Clicking on the red \"create twit\" button should display a modal that allows yo
ID: 3859550 • Letter: C
Question
Clicking on the red "create twit" button should display a modal that allows you to write a new twit. The modal (along with a backdrop that goes behind it to shade the underlying page while the modal is displayed) are both already included in the HTML code, but they are hidden. Clicking the red "create twit" button should un-hide them.
When the modal is open, clicking the modal close button (the small "X" in the upper-right corner) or the modal cancel button (the one in the modal footer that says "Cancel") should close the modal by re-hiding it and the backdrop. When the modal is closed, the values of all of the input fields should be cleared so they don't appear the next time the modal is opened.
When the modal is open, clicking the modal accept button (the one in the modal footer that says "Create Twit") should close the modal and generate a new twit that is placed inside the twit container after all of the other existing ones. The new twit should match the structure of the existing twits so it is styled correctly. Here is what the structure of the twit should be:
<article class="twit">
<div class="twit-icon">
<i class="fa fa-bullhorn"></i>
</div>
<div class="twit-content">
<p class="twit-text">
<--! Put the twit text entered by the user here. -->
</p>
<p class="twit-attribution">
<a href="#"><--! Put the twit author entered by the user here. --></a>
</p>
</div>
</article>
Importantly, you should not use innerHTML to generate HTML content directly from user-input content, since this is a major security hazard. You must ensure that user-input content is safely added into the DOM.
When the new twit is created and the modal is closed, the values of all of the input fields should be cleared so they don't appear the next time the modal is opened.
If the user clicks the modal accept button while either of the input fields is blank, the user should be alerted (using the alert() function), and the modal should be kept open until the user either closes/cancels it or provides values for both input fields. A new twit should not be created if the user hasn't specified values for both fields.
When the user enters a search query into the search box in the navbar and clicks the search button (the little magnifying glass in the navbar), any twits whose text or author don't contain the specified search query should be removed from the DOM, leaving only the ones that match the search query being displayed. Don't worry about re-displaying the removed twits if the search query changes. You can rely on refreshing the page to bring all of the original twits back (newly entered ones will be lost this way).
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::index.html:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tweeter</title>
<!-- This is a stylesheet that includes the font you should use -->
<link href="https://fonts.googleapis.com/css?family=Roboto:100,400,700" rel="stylesheet">
<!-- This is a 3rd-party stylesheet for Font Awesome: http://fontawesome.io/ -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" media="screen">
<link rel="stylesheet" href="style.css" media="screen">
</head>
<body>
<header>
<!-- The <i> tag below includes the bullhorn icon from Font Awesome -->
<a href="#"><h1 class="site-title"><i class="fa fa-hand-lizard-o"></i> tweeter</h1></a>
<nav class="navbar">
<ul class="navlist">
<li class="navitem navlink active"><a href="#">Home</a></li>
<li class="navitem navlink"><a href="#">Trending</a></li>
<li class="navitem navlink"><a href="#">People</a></li>
<li class="navitem navbar-search">
<input type="text" id="navbar-search-input" placeholder="Search...">
<button type="button" id="navbar-search-button"><i class="fa fa-search"></i></button>
</li>
</ul>
</nav>
</header>
<main class="twit-container">
<article class="twit">
<div class="twit-icon">
<i class="fa fa-bullhorn"></i>
</div>
<div class="twit-content">
<p class="twit-text">
Sitting in web dev... This class is so awesome!
</p>
<p class="twit-attribution">
<a href="#">CSMajor2017</a>
</p>
</div>
</article>
<article class="twit">
<div class="twit-icon">
<i class="fa fa-bullhorn"></i>
</div>
<div class="twit-content">
<p class="twit-text">
Anyone watch the baseball game last night? The Beavs are still in 1st place!
</p>
<p class="twit-attribution">
<a href="#">BeaverBeliever</a>
</p>
</div>
</article>
<article class="twit">
<div class="twit-icon">
<i class="fa fa-bullhorn"></i>
</div>
<div class="twit-content">
<p class="twit-text">
A body in motion must remain in motion unless acted upon by an outside force.
</p>
<p class="twit-attribution">
<a href="#">NewtonRulez</a>
</p>
</div>
</article>
<article class="twit">
<div class="twit-icon">
<i class="fa fa-bullhorn"></i>
</div>
<div class="twit-content">
<p class="twit-text">
Huh?
</p>
<p class="twit-attribution">
<a href="#">ConfusedTweeterer</a>
</p>
</div>
</article>
<article class="twit">
<div class="twit-icon">
<i class="fa fa-bullhorn"></i>
</div>
<div class="twit-content">
<p class="twit-text">
Why did the calf cross the road?
</p>
<p class="twit-attribution">
<a href="#">Setup</a>
</p>
</div>
</article>
<article class="twit">
<div class="twit-icon">
<i class="fa fa-bullhorn"></i>
</div>
<div class="twit-content">
<p class="twit-text">
To get to the udder side!
</p>
<p class="twit-attribution">
<a href="#">Punchline</a>
</p>
</div>
</article>
<article class="twit">
<div class="twit-icon">
<i class="fa fa-bullhorn"></i>
</div>
<div class="twit-content">
<p class="twit-text">
Any questions about flexboxes?
</p>
<p class="twit-attribution">
<a href="#">Hess</a>
</p>
</div>
</article>
<article class="twit">
<div class="twit-icon">
<i class="fa fa-bullhorn"></i>
</div>
<div class="twit-content">
<p class="twit-text">
Friendly reminder: your taxes were due yesterday.
</p>
<p class="twit-attribution">
<a href="#">TheIRS</a>
</p>
</div>
</article>
</main>
<button type="button" id="create-twit-button"><i class="fa fa-bullhorn"></i></button>
<div id="modal-backdrop" class="hidden"></div>
<div id="create-twit-modal" class="hidden">
<div class="modal-dialog">
<div class="modal-header">
<h3>Create a Twit</h3>
<button type="button" class="modal-close-button">×</button>
</div>
<div class="modal-body">
<div class="twit-input-element">
<label for="twit-text-input">Twit text</label>
<textarea id="twit-text-input"></textarea>
</div>
<div class="twit-input-element">
<label for="twit-attribution-input">Author</label>
<input type="text" id="twit-attribution-input">
</div>
</div>
<div class="modal-footer">
<button type="button" class="modal-cancel-button">Cancel</button>
<button type="button" class="modal-accept-button">Create Twit</button>
</div>
</div>
</div>
</body>
<script src="index.js" charset="utf-8"></script>
</html>
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::style.css:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
body {
font-family: Roboto, Helvetica, sans-serif;
margin: 0;
background-color: #eee;
}
a {
text-decoration: none;
}
.site-title {
margin: 0;
padding: 10px 20px;
font-size: 30px;
font-weight: 100;
background-color: #319df6;
color: #fff;
}
.navbar {
background-color: #fff;
font-size: 18px;
line-height: 22px;
}
.navlist {
margin: 0 0 0 20px;
padding: 0;
}
.navitem {
display: inline-block;
}
a {
color: #343434;
}
a:hover,
a:focus {
color: #319df6;
}
a:focus {
outline: none;
}
.navlink a {
padding: 8px 10px;
display: inline-block;
}
.navlink.active {
box-shadow: inset 0 -3px #319df6;
}
.navbar-search {
float: right;
margin-right: 20px;
padding: 0;
line-height: 38px;
}
#navbar-search-input {
padding: 4px;
font-size: 16px;
background-color: #eee;
border: 1px solid #dadada;
border-radius: 2px;
}
#navbar-search-input:focus {
outline: none;
background-color: #fff;
}
#navbar-search-button {
margin-left: -5px;
font-size: 16px;
background: none;
border: none;
color: #343434;
cursor: pointer;
}
#navbar-search-button:hover {
color: #319df6;
}
#navbar-search-button:focus {
color: #319df6;
outline: none;
}
.twit-container {
margin: 50px 10%;
display: flex;
flex-wrap: wrap;
}
.twit {
flex: 0 1 28%;
display: flex;
margin: 2px;
padding: 20px;
border: 1px solid #dadada;
border-radius: 2px;
background-color: #fff;
}
.twit-icon {
font-size: 24px;
}
.twit-content {
flex: 1 1 80%;
margin-left: 10px;
}
.twit-content p {
margin: 0;
}
.twit-content .twit-attribution {
margin-top: 8px;
text-align: right;
font-weight: bold;
}
#create-twit-button {
position: fixed;
right: 30px;
bottom: 30px;
height: 60px;
width: 60px;
border: none;
border-radius: 30px;
font-size: 36px;
background-color: #ff1010;
color: #fff;
cursor: pointer;
box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.25);
}
#create-twit-button:hover,
#create-twit-button:focus {
right: 27px;
bottom: 27px;
height: 66px;
width: 66px;
border-radius: 33px;
font-size: 40px;
background-color: #319df6;
}
#create-twit-button:focus {
outline: none;
}
#modal-backdrop {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1000;
background-color: rgba(0, 0, 0, 0.85);
}
#create-twit-modal {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1010;
overflow: scroll;
}
.hidden {
display: none;
}
.modal-dialog {
width: auto;
max-width: 600px;
min-width: 350px;
min-height: 300px;
margin: 40px auto;
background-color: #fff;
border-radius: 15px;
}
.modal-header {
position: relative;
padding: 10px 20px;
}
.modal-header h3 {
margin: 0;
font-size: 28px;
}
.modal-close-button {
position: absolute;
right: 10px;
top: 5px;
font-size: 24px;
border: none;
background: none;
padding: 0;
cursor: pointer;
}
.modal-body {
padding: 20px;
}
.twit-input-element {
display: flex;
align-items: center;
font-size: 20px;
margin: 10px 0;
}
.twit-input-element label {
font-weight: 600;
flex: 1 75px;
margin-right: 10px;
}
.twit-input-element input,
.twit-input-element textarea {
flex: 6 200px;
padding: 8px;
font-size: 20px;
border: 1px solid #aaa;
}
.twit-input-element textarea {
min-height: 64px;
}
.modal-footer {
display: flex;
justify-content: flex-end;
padding: 10px 10px 20px 10px;
}
.modal-footer button {
font-size: 20px;
background-color: #fff;
color: #333;
border: 1px solid #333;
border-radius: 5px;
padding: 10px;
margin-right: 20px;
cursor: pointer;
}
.modal-footer .modal-cancel-button:hover {
background-color: #eee;
}
.modal-footer .modal-accept-button {
background-color: #319df6;
color: #fff;
}
.modal-footer .modal-accept-button:hover {
background-color: #087dde;
}
Explanation / Answer
Hi ,
Please see below the updated files:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tweeter</title>
<!-- This is a stylesheet that includes the font you should use -->
<link href="https://fonts.googleapis.com/css?family=Roboto:100,400,700" rel="stylesheet">
<!-- This is a 3rd-party stylesheet for Font Awesome: http://fontawesome.io/ -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" media="screen">
<link rel="stylesheet" href="style.css" media="screen">
</head>
<body>
<script src="index.js" charset="utf-8"></script>
<header>
<!-- The <i> tag below includes the bullhorn icon from Font Awesome -->
<a href="#"><h1 class="site-title"><i class="fa fa-hand-lizard-o"></i> tweeter</h1></a>
<nav class="navbar">
<ul class="navlist">
<li class="navitem navlink active"><a href="#">Home</a></li>
<li class="navitem navlink"><a href="#">Trending</a></li>
<li class="navitem navlink"><a href="#">People</a></li>
<li class="navitem navbar-search">
<input type="text" id="navbar-search-input" placeholder="Search...">
<button type="button" id="navbar-search-button"><i class="fa fa-search"></i></button>
</li>
</ul>
</nav>
</header>
<main class="twit-container">
<div id="twit-container-div" class="twit-container-div">
<article class="twit">s
<div class="twit-icon">
<i class="fa fa-bullhorn"></i>
</div>
<div class="twit-content">
<p class="twit-text">
Sitting in web dev... This class is so awesome!
</p>
<p class="twit-attribution">
<a href="#">CSMajor2017</a>
</p>
</div>
</article>
<article class="twit">
<div class="twit-icon">
<i class="fa fa-bullhorn"></i>
</div>
<div class="twit-content">
<p class="twit-text">
Anyone watch the baseball game last night? The Beavs are still in 1st place!
</p>
<p class="twit-attribution">
<a href="#">BeaverBeliever</a>
</p>
</div>
</article>
<article class="twit">
<div class="twit-icon">
<i class="fa fa-bullhorn"></i>
</div>
<div class="twit-content">
<p class="twit-text">
A body in motion must remain in motion unless acted upon by an outside force.
</p>
<p class="twit-attribution">
<a href="#">NewtonRulez</a>
</p>
</div>
</article>
<article class="twit">
<div class="twit-icon">
<i class="fa fa-bullhorn"></i>
</div>
<div class="twit-content">
<p class="twit-text">
Huh?
</p>
<p class="twit-attribution">
<a href="#">ConfusedTweeterer</a>
</p>
</div>
</article>
<article class="twit">
<div class="twit-icon">
<i class="fa fa-bullhorn"></i>
</div>
<div class="twit-content">
<p class="twit-text">
Why did the calf cross the road?
</p>
<p class="twit-attribution">
<a href="#">Setup</a>
</p>
</div>
</article>
<article class="twit">
<div class="twit-icon">
<i class="fa fa-bullhorn"></i>
</div>
<div class="twit-content">
<p class="twit-text">
To get to the udder side!
</p>
<p class="twit-attribution">
<a href="#">Punchline</a>
</p>
</div>
</article>
<article class="twit">
<div class="twit-icon">
<i class="fa fa-bullhorn"></i>
</div>
<div class="twit-content">
<p class="twit-text">
Any questions about flexboxes?
</p>
<p class="twit-attribution">
<a href="#">Hess</a>
</p>
</div>
</article>
<article class="twit">
<div class="twit-icon">
<i class="fa fa-bullhorn"></i>
</div>
<div class="twit-content">
<p class="twit-text">
Friendly reminder: your taxes were due yesterday.
</p>
<p class="twit-attribution">
<a href="#">TheIRS</a>
</p>
</div>
</article>
</div>
</main>
<button type="button" id="create-twit-button"><i class="fa fa-bullhorn"onclick="createTweet();"></i></button>
<div id="modal-backdrop" class="hidden"></div>
<div id="create-twit-modal" class="hidden">
<div class="modal-dialog">
<div class="modal-header">
<h3>Create a Twit</h3>
<button type="button" class="modal-close-button">×</button>
</div>
<div class="modal-body">
<div class="twit-input-element">
<label for="twit-text-input">Twit text</label>
<textarea id="twit-text-input"></textarea>
</div>
<div class="twit-input-element">
<label for="twit-attribution-input">Author</label>
<input type="text" id="twit-attribution-input">
</div>
</div>
<div class="modal-footer">
<button type="button" class="modal-cancel-button">Cancel</button>
<button type="button" class="modal-accept-button">Create Twit</button>
</div>
</div>
</div>
</body>
</html>
index.css
body {
font-family: Roboto, Helvetica, sans-serif;
margin: 0;
background-color: #eee;
}
a {
text-decoration: none;
}
.site-title {
margin: 0;
padding: 10px 20px;
font-size: 30px;
font-weight: 100;
background-color: #319df6;
color: #fff;
}
.navbar {
background-color: #fff;
font-size: 18px;
line-height: 22px;
}
.navlist {
margin: 0 0 0 20px;
padding: 0;
}
.navitem {
display: inline-block;
}
a {
color: #343434;
}
a:hover,
a:focus {
color: #319df6;
}
a:focus {
outline: none;
}
.navlink a {
padding: 8px 10px;
display: inline-block;
}
.navlink.active {
box-shadow: inset 0 -3px #319df6;
}
.navbar-search {
float: right;
margin-right: 20px;
padding: 0;
line-height: 38px;
}
#navbar-search-input {
padding: 4px;
font-size: 16px;
background-color: #eee;
border: 1px solid #dadada;
border-radius: 2px;
}
#navbar-search-input:focus {
outline: none;
background-color: #fff;
}
#navbar-search-button {
margin-left: -5px;
font-size: 16px;
background: none;
border: none;
color: #343434;
cursor: pointer;
}
#navbar-search-button:hover {
color: #319df6;
}
#navbar-search-button:focus {
color: #319df6;
outline: none;
}
.twit-container {
margin: 50px 10%;
display: flex;
flex-wrap: wrap;
}
.twit {
flex: 0 1 28%;
display: flex;
margin: 2px;
padding: 20px;
border: 1px solid #dadada;
border-radius: 2px;
background-color: #fff;
}
.twit-icon {
font-size: 24px;
}
.twit-content {
flex: 1 1 80%;
margin-left: 10px;
}
.twit-content p {
margin: 0;
}
.twit-content .twit-attribution {
margin-top: 8px;
text-align: right;
font-weight: bold;
}
#create-twit-button {
position: fixed;
right: 30px;
bottom: 30px;
height: 60px;
width: 60px;
border: none;
border-radius: 30px;
font-size: 36px;
background-color: #ff1010;
color: #fff;
cursor: pointer;
box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.25);
}
#create-twit-button:hover,
#create-twit-button:focus {
right: 27px;
bottom: 27px;
height: 66px;
width: 66px;
border-radius: 33px;
font-size: 40px;
background-color: #319df6;
}
#create-twit-button:focus {
outline: none;
}
#modal-backdrop {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1000;
background-color: rgba(0, 0, 0, 0.85);
}
#create-twit-modal {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1010;
overflow: scroll;
}
.hidden {
display: none;
}
.modal-dialog {
width: auto;
max-width: 600px;
min-width: 350px;
min-height: 300px;
margin: 40px auto;
background-color: #fff;
border-radius: 15px;
}
.modal-header {
position: relative;
padding: 10px 20px;
}
.modal-header h3 {
margin: 0;
font-size: 28px;
}
.modal-close-button {
position: absolute;
right: 10px;
top: 5px;
font-size: 24px;
border: none;
background: none;
padding: 0;
cursor: pointer;
}
.modal-body {
padding: 20px;
}
.twit-input-element {
display: flex;
align-items: center;
font-size: 20px;
margin: 10px 0;
}
.twit-input-element label {
font-weight: 600;
flex: 1 75px;
margin-right: 10px;
}
.twit-input-element input,
.twit-input-element textarea {
flex: 6 200px;
padding: 8px;
font-size: 20px;
border: 1px solid #aaa;
}
.twit-input-element textarea {
min-height: 64px;
}
.modal-footer {
display: flex;
justify-content: flex-end;
padding: 10px 10px 20px 10px;
}
.modal-footer button {
font-size: 20px;
background-color: #fff;
color: #333;
border: 1px solid #333;
border-radius: 5px;
padding: 10px;
margin-right: 20px;
cursor: pointer;
}
.modal-footer .modal-cancel-button:hover {
background-color: #eee;
}
.modal-footer .modal-accept-button {
background-color: #319df6;
color: #fff;
}
.modal-footer .modal-accept-button:hover {
background-color: #087dde;
}
.twit-container-div {
margin: 50px 6%;
display: flex;
flex-wrap: wrap;
}
index.js
function createTweet(){
document.getElementById("modal-backdrop").classList.remove("hidden");
document.getElementById("create-twit-modal").style.display ="block";
}
function CloseModal(){
document.getElementById("modal-backdrop").classList.add("hidden");
document.getElementById("create-twit-modal").style.display ="none";
//When the modal is closed, the values of all of the input fields should be cleared
// so they don't appear the next time the modal is opened.
document.getElementById("twit-text-input").value = "";
document.getElementById("twit-attribution-input").value = "";
}
function createTwit(){
var text = document.getElementById("twit-text-input").value;
var author = document.getElementById("twit-attribution-input").value;
var elem = document.createElement('article');
var articeElem =elem ;
elem.setAttribute('class','twit');
document.getElementById("twit-container-div").append(elem);
var innerelem = document.createElement('div');
innerelem.setAttribute('class','twit-icon');
elem.append(innerelem);
elem = innerelem;
var innerelem = document.createElement('i');
innerelem.setAttribute('class','fa fa-bullhorn');
elem.append(innerelem);
elem = innerelem;
var innerelem = document.createElement('div');
var twit_content_elem = innerelem;
innerelem.setAttribute('class','twit-content');
articeElem.append(innerelem);
elem = innerelem;
var innerelem = document.createElement('p');
innerelem.setAttribute('class','twit-text');
innerelem.textContent = text;
elem.append(innerelem);
elem = innerelem;
var innerelem = document.createElement('p');
innerelem.setAttribute('class','twit-attribution');
twit_content_elem.append(innerelem);
elem = innerelem;
var innerelem = document.createElement('a');
innerelem.setAttribute('href','#');
innerelem.textContent = author;
elem.append(innerelem);
elem = innerelem;
CloseModal();
}
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.