![Go Run Terminal Help 2 4 8 9 <> as6b.html x <> asb.html >... 1 ! DOCTYPE html] <html> 3 <head> 5 <meta charset=utf-8> 6 <ti](http://img.homeworklib.com/questions/e9d94bc0-03ab-11eb-a708-830134df8c95.png?x-oss-process=image/resize,w_560)
Homework Answers
/********************* as6b.html ************************/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Assignment 6b - Event Delegation</title>
<link rel="stylesheet" href="main.css" />
<script src="main.js" defer></script>
</head>
<body>
<div>
<h1>Shopping List</h1>
<ul id='todo-list'>
<li class='todo-item'>Butter, Unsalted
<span class='remove'></span> </li>
<li class='todo-item'>Dozen Eggs
<span class='remove'></span> </li>
<li class='todo-item'>Chick Peas
<span class='remove'></span> </li>
<li class='todo-item'>Sugar
<span class='remove'></span> </li>
<li class='todo-item'>Laundry Soap
<span class='remove'></span> </li>
</ul>
<p class='todo-new'>
<input type="text" id="new-item-text" />
<a href="#" id="add-item">+</a>
</p>
</div>
</body>
</html>
/************************* main.css *******************************/
body {
background-color: #BCDBF2;
font-family: Helvetica, Arial, sans-serif;
}
body > div {
width: 300px;
margin: 50px auto;
}
h1 {
text-align: center;
}
#todo-list {
list-style: none;
padding: 0px;
}
.todo-item {
border: 2px solid #444;
margin-top: -2px;
padding: 10px;
cursor: pointer;
display: block;
background-color: #ffffff;
}
.todo-new {
display: block;
margin-top: 10px;
content: "20S";
}
.todo-new input[type="text"] {
width: 260px;
height: 22px;
border: 2px solid #444;
}
.todo-new a {
font-size: 1.5em;
color: black;
text-decoration: none;
background-color: #ffffff;
border: 2px solid #444;
display: block;
width: 24px;
float: right;
text-align: center;
}
.todo-new a:hover {
background-color: #0EB0dd;
}
.remove {
float: right;
font-family: Helvetica, Arial, sans-serif;
font-size: 0.8em;
color: #dd0000;
}
.remove:before {
content: 'X';
}
.remove:hover {
color: #ffffff;
}
.todo-item::after:hover {
background-color: #dd0000;
color: white;
}
.todo-item:hover {
background-color: #0EB0FF;
color: white;
}
.completed {
text-decoration: line-through;
opacity: 0.5;
}
/*********************** main.js ****************************/
function listListener(event) {
console.log(event.target.tagName);
if (event.target.tagName == "LI") {
event.target.classList.add("completed");
}
else if (event.target.tagName == "SPAN") {
event.target.parentNode.remove();
}
else {
console.log("Unknown TagName: " + event.target.tagName)
}
}
function addItem() {
list = document.getElementById('todo-list');
item = document.createElement('li');
deleteButton = document.createElement('span');
itemField = document.getElementById('new-item-text')
item.classList.add('todo-item');
item.appendChild(document.createTextNode(itemField.value));
item.appendChild(deleteButton);
deleteButton.classList.add('remove');
list.appendChild(item);
itemField.value = "";
}
document.getElementById('todo-list').addEventListener('click', listListener);
document.getElementById('add-item').addEventListener('click', () => {
console.log("Add Button Pressed");
addItem();
});
document.getElementById('new-item-text').addEventListener('keydown', (event) => {
if (event.key == 'Enter' || event.keyCode == 13) {
console.log("key " + event.keyCode + " Pressed in Text Field!");
addItem();
}
});
/***************** Output *****************/
/*************** If you have any questions you may ask in comments *************/
/******************* Thanks for reading ***********************************************/
Add Answer to:
given below are the project description and their Html and css
files i need javascript according...
given below are the project description and their Html and css files i need javascript according to the project and other files!
HTML------------------------------------------------------CSS---------------------------------------------------WEB230 - JavaScript 1 Assignment 7 - FormsSome of these tasks would be better done in HTML or CSS but do them in JavaScript to practice whatwe have learned.1. Select the form element and save it in a variable. From here we can access all of the form fields.2. When the page loads do the following:add the password value "monkey"select the favourite city "New York"clear the textarea3. Add an event handler to the "name" field to change the background color...
To do list - Javascript Javascript(only) needs to be added in order to do the following:...
To do list - Javascript Javascript(only) needs to be added in order to do the following: Add a new todo item to the list, complete with trash icon Remove the item when the trash icon is clicked Clear the input when the user clicks back into it to add another item. This is already in place in the JS window: (codepen) (function(){ })(); HTML: <div class="card"> <div class="card-body"> <h3 class="card-title">Today's To Do List</h3> <form id="todo-form"> <div class="form-group"> <input type="text" class="form-control"...
I cant seem to get the CSS at the bottom of this HTML to work. <!doctype...
I cant seem to get the CSS at the bottom of this HTML to work. <!doctype html> <html lang="en"> <head> <!--Madison McCuiston--> <meta charset="utf-8"> <title>Amelie Boulangerie</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <div id="wrapper"> <header>Amelie Boulangerie</header> <!-- change this to header tag --> <nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="pastries.html">Pastries</a></li> <li><a href="events.html">Events</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> <main> <H2>Experience the Difference</H2> <p><span class="bakery">Amelie Boulangerie</span> is the master of flavor combinations.The jewel-colored macarons come in the most tempting of flavors. Experience the difference...
How do I get my HTML and CSS to look similar to this mockup? HTML: <!DOCTYPE...
How do I get my HTML and CSS to look similar to this mockup?
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>nitro
site</title>
<link href="css/main.css"
rel="stylesheet"/>
</head>
<body>
<header class="header">
<section class="navlist">
<img
class="logo" src="assets/logobeans.png"/>
<h2
class="headertitle">nitro</h2>
<nav>
<ul>
<li><a
href="index.html"
target="_parent">About</a></li>
<li><a
href="/html/menu.html"
target="_blank">Menu</a></li>
<li><a
href="/html/menu.html">Shop Now</a></li>
</ul>
</nav>
</section>
<section
class="headerContainer">
<h1
class="heading">Nitro Coffee</h1>
<p
class="productDesc">Coffee is a brewed drink prepared from
roasted coffee beans, the seeds of berries from certain Coffea
species.</p>...
Javascript to edit a HTML file. Where to begin? <!doctype html> <html> <head> <meta charset="utf-8"> <title>TODO:...
Javascript to edit a HTML file. Where to begin? <!doctype html> <html> <head> <meta charset="utf-8"> <title>TODO: Change The Title</title> </head> <body> <h1></h1> <p>First paragraph.</p> <p class="intro">Second <span>paragraph</span>.</p> <button id="start">Start</button> <main> </main> <!-- Test 6: DOM Programming You MAY consult the notes for week 7, but you MAY NOT discuss this test or your code with any other students. All work must be your own. Instructions: 1. Put all solution code in a file named solution.js. When you upload your solution to...
As part of this assignment we are using the base Gallery HTML and writing JavaScript code...
As part of this assignment we are using the base Gallery HTML and writing JavaScript code that will: 1) preload the images provided to us, 2) Create rollover functionality for each of the thumbnails in your image gallery 3) Use appropriate images found in the images folder. 4) Write developer comments to describe the variables being declared and explain the functions and logical blocks of JavaScript code pertaining to the gallery. I know it has to be an external JS...
In this problem, you will create a selectable “To Do” List. To add a task to...
In this problem, you will create a selectable “To Do” List. To
add a task to this list, the user clicks the Add Task button and
enters a description of the task. To delete a task from the list,
the user selects the task and then clicks the Delete Task
button.
Open the HTML and JavaScript files provided as start-up files
(index.html from within todo_list_Q.zip file). Then,
review the HTML in this file. Note, within the div element, there
is...
JQuery- need help with the option to Edit the items on To-Do list program...either an option...
JQuery- need help with the option to Edit the
items on To-Do list program...either an option for edit
button or double clicking the item will enable user to edit the
list
<div id="container"> <hl>To-Do List<i class=" fas fa-plus"></i></hl> <input type ="text" ame' placeholder="Add Items To Do" id-'nan kul id-"display" <li><span>i class="fas fa-trash"></i></span> Build An Todo List</li> <li><span><i class="fas fa-trash"></i></span>Build Color Game</li> <li><span><i class="fas fa-trash"></i></span> Build Calculator</li> </ul> <button onclick="save ()">save< /button> </div> ("ul").on("click", "li",function () 5 $(this).toggleclass ("completed"); 6 7...
Hello, I am designing a website for my class. I am using HTML/CSS/Jscript. I need to...
Hello, I am designing a website for my class. I am using HTML/CSS/Jscript. I need to have my text in the body, white. All text and the picture centered but how do I have margins on the left and right side?. I have a figcaption and I dont know have to place it under the picture but I am having a hard time. Can you help me? Thank you! HTML <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet"...
Look at the following illustrated output for an HTML and a css given below <!DOCTYPE html>...
Look at the following illustrated output for an HTML and
a css given below
<!DOCTYPE html>
<head>
<title>TABLE with STYLE
SHEET</title>
<meta charset="utf-8" />
<meta name="description" content="Godaddy Webpage
original" />
<link rel = "stylesheet"
href="GoDaddy_assignment_1.css">
<body>
<img src= "GoDaddy.png"/>
<p>Welcome
to:<strong>webhamster.com</strong></br>
This web page is
parked<strong>Free</strong>courtesy of
<a class="aclass1" href
="https://www.godaddy.com">GoDaddy.com</a></p>
<h1>Want to buy<span class
="span2">webmaster.com ?</span></h1>
<div class ="div1">
<a class ="aclass2"
href="https://www.godaddy.com">Learn How</a>
</div>
</hr>
<button>Search Ads</button>
</body>
</html>
“
QUESTION continued Given the corresponding css
file
.aclass1{color:purple;}...
How do I get my HTML and CSS to look similar to this mockup?
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>nitro
site</title>
<link href="css/main.css"
rel="stylesheet"/>
</head>
<body>
<header class="header">
<section class="navlist">
<img
class="logo" src="assets/logobeans.png"/>
<h2
class="headertitle">nitro</h2>
<nav>
<ul>
<li><a
href="index.html"
target="_parent">About</a></li>
<li><a
href="/html/menu.html"
target="_blank">Menu</a></li>
<li><a
href="/html/menu.html">Shop Now</a></li>
</ul>
</nav>
</section>
<section
class="headerContainer">
<h1
class="heading">Nitro Coffee</h1>
<p
class="productDesc">Coffee is a brewed drink prepared from
roasted coffee beans, the seeds of berries from certain Coffea
species.</p>...
In this problem, you will create a selectable “To Do” List. To
add a task to this list, the user clicks the Add Task button and
enters a description of the task. To delete a task from the list,
the user selects the task and then clicks the Delete Task
button.
Open the HTML and JavaScript files provided as start-up files
(index.html from within todo_list_Q.zip file). Then,
review the HTML in this file. Note, within the div element, there
is...
JQuery- need help with the option to Edit the
items on To-Do list program...either an option for edit
button or double clicking the item will enable user to edit the
list
<div id="container"> <hl>To-Do List<i class=" fas fa-plus"></i></hl> <input type ="text" ame' placeholder="Add Items To Do" id-'nan kul id-"display" <li><span>i class="fas fa-trash"></i></span> Build An Todo List</li> <li><span><i class="fas fa-trash"></i></span>Build Color Game</li> <li><span><i class="fas fa-trash"></i></span> Build Calculator</li> </ul> <button onclick="save ()">save< /button> </div> ("ul").on("click", "li",function () 5 $(this).toggleclass ("completed"); 6 7...
Look at the following illustrated output for an HTML and
a css given below
<!DOCTYPE html>
<head>
<title>TABLE with STYLE
SHEET</title>
<meta charset="utf-8" />
<meta name="description" content="Godaddy Webpage
original" />
<link rel = "stylesheet"
href="GoDaddy_assignment_1.css">
<body>
<img src= "GoDaddy.png"/>
<p>Welcome
to:<strong>webhamster.com</strong></br>
This web page is
parked<strong>Free</strong>courtesy of
<a class="aclass1" href
="https://www.godaddy.com">GoDaddy.com</a></p>
<h1>Want to buy<span class
="span2">webmaster.com ?</span></h1>
<div class ="div1">
<a class ="aclass2"
href="https://www.godaddy.com">Learn How</a>
</div>
</hr>
<button>Search Ads</button>
</body>
</html>
“
QUESTION continued Given the corresponding css
file
.aclass1{color:purple;}...
Most questions answered within 3 hours.
-
A solid, frictionless cylindrical reel of mass M=5.00kg and
radius R=0.55m is used to draw water...
asked 1 minute ago -
how do radio waves get emitted from Jupiter?
- do they come from radiation from planet...
asked 1 minute ago -
The test statistic used in the F test for the equality of two
variances is calculated...
asked 13 minutes ago -
How does neutralisation of IL-6 trans-signaling affect the
autoimmune disease and inflammation? What if the trans-signaling...
asked 3 minutes ago -
f an allele is 'fixed' in a population, what is its
frequency?
0.50
0.75
0.25
0...
asked 18 minutes ago -
Do we have a duty of national loyalty in business? What is the
major argument in...
asked 18 minutes ago -
compare the international treatment of segment reporting to the
us gaap treatment
asked 14 minutes ago -
A statistics student finds herself struggling with a newspaper
article stating that only eighteen percent of...
asked 48 minutes ago -
People with beriberi, a disease caused by a thiamin deficiency,
have elevated levels of blood pyruvate...
asked 34 minutes ago -
PYTHON Programming Exercise 2: Create a Simple Cost Calculator
Write a program that displays input fields...
asked 40 minutes ago -
1.Seki agreed that Groupon could sell 18 hot air
balloon rides on his Magical Adventures company...
asked 41 minutes ago -
A cohort study is conducted to determine whether smoking is
associated with an increased risk of...
asked 47 minutes ago