In: Computer Science
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;"> </div>
<p class="tweet">I'm having lunch right now</p>
<p class="tweet">This is my first Tweet!!</p>
</body>
</html>
Hi,
Please find below code as per your requirement.
Let me know if you have any doubt/concerns in this via comments.
Hope this answer helps you.
Thanks.
/***********CODE***********/
<!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" onsubmit="return addTweet();">
<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;"> </div>
<p class="tweet">I'm having lunch right now</p>
<p class="tweet">This is my first Tweet!!</p>
</body>
</html>
<script>
function addTweet() {
/* getting text area text element by classname */
var tweetText = document.getElementsByClassName("tweetText")[0].value;
/* creating p tag and textnode adding text node to p tag, also added class to p tag*/
var para = document.createElement("p");
var node = document.createTextNode(tweetText);
para.classList.add("tweet");
/*adding text node to p tag */
para.appendChild(node);
/* getting first p tag*/
var childTag = document.getElementsByClassName("tweet")[0];
//adding new p tag before first p tag
childTag.parentNode.insertBefore(para, childTag);
return false;
}
</script>