Question

In: Computer Science

Once the form in this file is submitted, create a new paragraph that will stack on...

Once the form in this file is submitted, create a new paragraph that will stack on top of the existing paragraphs and will contain the data entered into the textarea. Each new paragraph should have the class 'tweet' applied to it.

*Hint: Remember to use return false; to stop the form submission from reloading the page.

<!DOCTYPE html>
<html>
<head>
   <title>Simple Twitter</title>
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
   <style>
   .tweet{border-top:1px solid #dedede; padding:20px;}
   </style>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body class="container" style="width:50%">
   <h1>Twitter</h1>
   <form id="tweetForm" action="" method="">
       <div class="form-group">
           <textarea class="form-control tweetText" rows="3"></textarea>
       </div>
       <div class="form-group float-right">
           <input type="submit" class="tweetBtn btn btn-primary" value="Tweet">
       </div>
   </form>
   <div style="clear:both;">&nbsp;</div>
   <p class="tweet">I'm having lunch right now</p>
   <p class="tweet">This is my first Tweet!!</p>
      
</body>
</html>

It should maybe be something structure like this, not sure.

$('#eventExample').submit(function(){
                   $(this).find('input').attr('disabled', true); //find() gets an elements descendants
                   return false;
               });

Solutions

Expert Solution

Deserves thumbs up :)

<!DOCTYPE html>
<html>
<head>
<title>Simple Twitter</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<style>
.tweet{border-top:1px solid #dedede; padding:20px;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body class="container" style="width:50%">
<h1>Twitter</h1>
<form id="tweetForm" action="" method="">
<div class="form-group">
<textarea id="myInput" class="form-control tweetText" rows="3"></textarea>
</div>
<div class="form-group float-right">
<input onclick="newElement()" class="tweetBtn btn btn-primary" value="Tweet">
</div>
</form>
<div style="clear:both;">&nbsp;</div>
<div id="myUL">
<p class="tweet">I'm having lunch right now</p>
<p class="tweet">This is my first Tweet!!</p>
</div>
<script>
function newElement() {
var li = document.createElement("p");
li.setAttribute("class", "tweet");
var inputValue = document.getElementById("myInput").value;
var t = document.createTextNode(inputValue);
li.appendChild(t);
if (inputValue === '') {
alert("You must write something!");
} else {
document.getElementById("myUL").appendChild(li);
}
}
</script>
</body>
</html>

venereology answered 8 months ago
Next > < Previous

Related Solutions

Once the form in this file is submitted, create a new paragraph that will stack on...
Once the form in this file is submitted, create a new paragraph that will stack on top of the existing paragraphs and will contain the data entered into the textarea. Each new paragraph should have the class 'tweet' applied to it. *Hint: Remember to use return false; to stop the form submission from reloading the page. <!DOCTYPE html> <html> <head> <title>Simple Twitter</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <style> .tweet{border-top:1px solid #dedede; padding:20px;} </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </head> <body class="container" style="width:50%"> <h1>Twitter</h1>...
Create a Java class file for a Car class. In the File menu select New File......
Create a Java class file for a Car class. In the File menu select New File... Under Categories: make sure that Java is selected. Under File Types: make sure that Java Class is selected. Click Next. For Class Name: type Car. For Package: select csci2011.lab7. Click Finish. A text editor window should pop up with the following source code (except with your actual name): csci1011.lab7; /** * * @author Your Name */ public class Car { } Implement the Car...
Description of the Assignment: Write a Python program to (a) create a new empty stack. Then,...
Description of the Assignment: Write a Python program to (a) create a new empty stack. Then, (b) add items onto the stack. (c) Print the stack contents. (d) Remove an item off the stack, and (e) print the removed item. At the end, (f) print the new stack contents: Please use the following comments in your python script: # ************************************************* # COP3375 # Student's full name ( <<< your name goes here) # Week 8: Assignment 1 # ************************************************* #...
Exercise 3: Stack Write a program in Java to manipulate a Stack List: 1. Create Stack...
Exercise 3: Stack Write a program in Java to manipulate a Stack List: 1. Create Stack List 2. Display the list 3. Create the function isEmply 4. Count the number of nodes 5. Insert a new node in the Stack List. 6. Delete the node in the Stack List. 7. Call all methods above in main method with the following data: Test Data : Input the number of nodes : 4 Input data for node 1 : 5 Input data...
Assignment 2: Create a form that collects 5 different pieces of data. Once the user clicks...
Assignment 2: Create a form that collects 5 different pieces of data. Once the user clicks the submit button, the processing PHP file displays the data that was entered thru the form, performs a calculation, and displays the result. To receive full credit, students need to implement the following: Create variables with valid names and assign values to them Use literals and concatenate strings Use $_POST Use echo statements to display data on a page Code string and numeric expressions...
Create MySortedArrayCollection.java This file is inherited from SortedArrayCollection.java This file implements MySortedArrayCollectionInterface.java ****** Make new and...
Create MySortedArrayCollection.java This file is inherited from SortedArrayCollection.java This file implements MySortedArrayCollectionInterface.java ****** Make new and just complete MySortedArrayCollection.java, dont modify others //////////////////////////////////////////////////////// SortedArrayCollection.java public class SortedArrayCollection<T> implements CollectionInterface<T> {    protected final int DEFCAP = 100; // default capacity    protected int origCap; // original capacity    protected T[] elements; // array to hold collection elements    protected int numElements = 0; // number of elements in this collection    // set by find method    protected boolean found;...
Write a Python program to (a) create a new empty stack. Then, (b) add items onto...
Write a Python program to (a) create a new empty stack. Then, (b) add items onto the stack. (c) Print the stack contents. (d) Remove an item off the stack, and (e) print the removed item. At the end, (f) print the new stack contents:
it should be done in libre office Create a new presentation – Click File -> New-...
it should be done in libre office Create a new presentation – Click File -> New- > Presentation then select ForestBird template. Activate slide pane by clicking on View tab then Slide Pane. Right click on the first slide on the slide pane and click on Layout then select Title Only layout. In the title box, type – Getting started with Impress Right click on the title box and change the alignment to Centre Delete other slides from Slide Pane...
In the Stack Module I gave you a project that shows how to create a Stack...
In the Stack Module I gave you a project that shows how to create a Stack using doubly linked nodes. StackWithDoublyLinkedNodes.zip It is a template class that needs the Node class. You must use this same Node class (no alterations) to create a Queue class . public class Queue <T>{ } Use the NetBeans project above as an example. I have put a driver program (q1.java) in the module. Also here:  q1.java This driver program should then run with your Queue...
Design an efficient layout and service blueprint for the new Starbucks. (essay Form in paragraph)
Design an efficient layout and service blueprint for the new Starbucks. (essay Form in paragraph)
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT