Modify an application that lets users add tasks to a list so the tasks can also...
Modify an application that lets users add tasks to a list so the tasks can also be deleted when they’re completed.
1. In the HTML file, enclose the text for each of the three existing list items in a <p> element. Then, Add buttons like the ones shown above preceding the <p> elements. No ids or names are required for these buttons, but they should be assigned to the class named “delete”.
2. In the JavaScript file, modify the event handler for the click event of the Add Task button so it adds new tasks that have the same format as the existing tasks you just modified.
3. Add an event handler for the click event of the Task Complete buttons. Be sure to code this event handler so it works for new tasks as well as existing tasks.
***CURRENT CODE***
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Task List</title>
<link rel="stylesheet" href="main.css">
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="tasks.js"></script>
</head>
<body>
<aside>
<h2>Add a task</h2>
<label for="task">Task:</label>
<input type="text" id="task" name="task"><br>
<label> </label>
<input type="button" id="add" name="add" value="Add Task">
</aside>
<main>
<h1>Task list</h1>
<ul>
<li>Wash car</li>
<li>Fertilize lawn</li>
<li>Clean out refrigerator</li>
</ul>
</main>
<footer></footer>
</body>
</html>
tasks.js
$(document).ready(function() {
$("#add").click(function() {
var html = "";
html += "<li>" + $("#task").val() + "</li>";
$("ul").append(html);
$("#task").val("");
}); // end click
}); // end ready
main.css
* {
margin: 0;
padding: 0;
}
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 87.5%;
width: 770px;
margin: 0 auto;
padding: 20px;
border: 3px solid blue;
}
h1 {
font-size: 170%;
margin-bottom: .4em;
}
h2 {
font-size: 140%;
padding: .25em 0 .25em 0;
margin-bottom: .5em;
}
p {
padding-bottom: .25em;
padding-left: 25px;
}
aside {
float: left;
width: 375px;
}
aside label {
float: left;
width: 3em;
}
aside input {
margin-left: 1em;
margin-bottom: .5em;
}
#task {
width: 250px;
}
main {
float: left;
width: 370px;
padding-left: 25px;
}
main ul {
list-style-type: none;
/* margin-left: -1.8em;*/
}
main input {
margin-bottom: .5em;
}
main p {
float: right;
width: 250px;
padding-top: .2em;
padding-left: 1em;
}
aside #add, main input {
padding: .2em;
}
footer {
clear: both;
}
Homework Answers
Note: Done accordingly. Please comment for any problem. Please Uprate. Thanks
Code:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Task List</title>
<link rel="stylesheet" href="main.css">
<script
src="https://code.jquery.com/jquery-2.2.4.js"
integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI="
crossorigin="anonymous"></script>
<script src="tasks.js"></script>
</head>
<body>
<aside>
<h2>Add a task</h2>
<label for="task">Task:</label>
<input type="text" id="task" name="task"><br>
<label> </label>
<input type="button" id="add" name="add" value="Add Task">
</aside>
<main>
<h1>Task list</h1>
<ul>
<li>
<input type="button" class="delete" value="Task
Complete">
<p>
Wash car
</p>
</li>
<li>
<input type="button" class="delete" value="Task
Complete">
<p>
Fertilize lawn
</p></li>
<li>
<input type="button" class="delete" value="Task
Complete">
<p>
Clean out refrigerator
</p>
</li>
</ul>
</main>
<footer></footer>
</body>
</html>
----------------------------------------------------------------
main.css
* {
margin: 0;
padding: 0;
}
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 87.5%;
width: 770px;
margin: 0 auto;
padding: 20px;
border: 3px solid blue;
}
h1 {
font-size: 170%;
margin-bottom: .4em;
}
h2 {
font-size: 140%;
padding: .25em 0 .25em 0;
margin-bottom: .5em;
}
p {
padding-bottom: .25em;
padding-left: 25px;
}
aside {
float: left;
width: 375px;
}
aside label {
float: left;
width: 3em;
}
aside input {
margin-left: 1em;
margin-bottom: .5em;
}
#task {
width: 250px;
}
main {
float: left;
width: 370px;
padding-left: 25px;
}
main ul {
list-style-type: none;
/* margin-left: -1.8em;*/
}
main input {
margin-bottom: .5em;
}
main p {
float: right;
width: 250px;
padding-top: .2em;
padding-left: 1em;
}
aside #add, main input {
padding: .2em;
}
footer {
clear: both;
}
---------------------------------------------------
tasks.js
$(document).ready(function() {
$("#add").click(function() {
var html = "";
html += "<li> <input type='button' class='delete' value='Task Complete'><p>"+ $("#task").val() + "</p></li>";
$("ul").append(html);
$("#task").val("");
}); // end click
$("ul").on('click', '.delete' ,function(event){
$(this).next().remove();
$(this).remove();
});
}); // end ready
Output:
After deleting a task:
Add Answer to:
Modify an application that lets users add tasks to a list so the
tasks can also...
Develop the Change Calculator application In this exercise, you’ll create an application that displays the minimum...
Develop the Change Calculator application In this exercise, you’ll create an application that displays the minimum number of quarters, dimes, nickels, and pennies that make up the number of cents specified by the user. Without the use of a JavaScript Library (for coins). 1. Open the HTML and JavaScript files below: 2. In the JavaScript file, note that three functions are supplied. The $ function. The start of a calculateChange function. And an onload event handler that attaches the calculateChange...
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...
Does my css style sheet look okay? /* Author: Your Name --> Natasha Strange /*...
Does my css style sheet look okay?
/* Author: Your Name -->
Natasha Strange
/* Date: Today's
Date --> September 22, 2019
/* Description: Lab Number --> Lab04
/*doctype css*/
@import url(fonts/chuckfive.css);
@import url(fonts/merriweather.css);
body { background-color: rgb(199,201,191);
}
div { border: 1px solid black;
padding: 100px 100px 100px
100px;
background-color: gray;
}
nav { text-align: center;
color: rgb( 7,20,138);
}
header,
footer { background-color: rgb(199,201,199);
color:...
In this exercise, you’ll upgrade a version of the MPG application so the error messages are...
In this exercise, you’ll upgrade a version of the MPG
application so the error messages are displayed in span elements to
the right of the text boxes.
Open the HTML and JavaScript files in this folder:
exercises_short\ch06\mpg\
Then, run the application and click the Calculate MPG button to
see that an error message is displayed in an alert dialog box for
each of the two input fields.
2. In the HTML file, add a span element after the input element...
Add JavaScript code in the “find_primeV2.js” to allow users to enter a number, and then based...
Add JavaScript code in the “find_primeV2.js” to allow users to enter a number, and then based on the number of user enters, to find out how many prime numbers there are up to and including the user inputted number and then display them on the web page. The following are the detailed steps to complete this assignment: Step 1. [30 points] In “find_primeV2.js”, complete isPrime() function by (1) Adding one parameter in function header. That parameter is used to accept...
Please edit and add all the code needed to make the images side by side and to put the buttons in...
Please edit and add all the code needed to make the images side
by side and to put the buttons in the middle of the images. Thank
you
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<title>Untitled Document</title>
<!-- Bootstrap -->
<link href="css/bootstrap-4.0.0.css"
rel="stylesheet">
<link href="style.css" rel="stylesheet"
type="text/css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg navbar-light
bg-light"> <a class="navbar-brand" href="#">Lakeside
Resort Spot</a>
<button class="navbar-toggler"
type="button" data-toggle="collapse"
data-target="#navbarSupportedContent1"
aria-controls="navbarSupportedContent1" aria-expanded="false"
aria-label="Toggle navigation">...
Apply the following styles: Set the width of the body element to 1000 pixels. Set the...
Apply the following styles:
Set the width of the body element to 1000 pixels.
Set the width of the navigation element to 100%.
Adjust the css and html to have your navigation list display
horizontally (think floats and widths).
Center the navigation element by setting the margin to auto.
Clear the float for the section element.
Set the width of all articles to 75%.
Add a class to the articles that contains your favorite
websites.
Set the width of that...
image_gallery.js: $(document).ready(function() { $("#image_list a").each(function() { // get the image URL and caption for each...
image_gallery.js:
$(document).ready(function() {
$("#image_list a").each(function() {
// get the image URL and caption for each image
var imageURL = $(this).attr("href");
var caption = $(this).attr("title");
// preload the image for each link
var galleryImage = new
Image();
galleryImage.src = imageURL;
// set up the event handlers for
each link
$(this).click(function(evt) {
$("#image").attr("src", imageURL);
$("#caption").text(caption);
// cancel...
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...
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!
WEB230 - JavaScript 1 Assignment 6b - Event Delegation Before starting, study the HTML and open it in a browser so that you understand the structure of the document. You will add functionality to perform several tasks in our shopping list app. Clicking the red "X" at the right of an item will delete that item. Clicking on...
In this exercise, you’ll upgrade a version of the MPG
application so the error messages are displayed in span elements to
the right of the text boxes.
Open the HTML and JavaScript files in this folder:
exercises_short\ch06\mpg\
Then, run the application and click the Calculate MPG button to
see that an error message is displayed in an alert dialog box for
each of the two input fields.
2. In the HTML file, add a span element after the input element...
Please edit and add all the code needed to make the images side
by side and to put the buttons in the middle of the images. Thank
you
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<title>Untitled Document</title>
<!-- Bootstrap -->
<link href="css/bootstrap-4.0.0.css"
rel="stylesheet">
<link href="style.css" rel="stylesheet"
type="text/css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg navbar-light
bg-light"> <a class="navbar-brand" href="#">Lakeside
Resort Spot</a>
<button class="navbar-toggler"
type="button" data-toggle="collapse"
data-target="#navbarSupportedContent1"
aria-controls="navbarSupportedContent1" aria-expanded="false"
aria-label="Toggle navigation">...
Apply the following styles:
Set the width of the body element to 1000 pixels.
Set the width of the navigation element to 100%.
Adjust the css and html to have your navigation list display
horizontally (think floats and widths).
Center the navigation element by setting the margin to auto.
Clear the float for the section element.
Set the width of all articles to 75%.
Add a class to the articles that contains your favorite
websites.
Set the width of that...
image_gallery.js:
$(document).ready(function() {
$("#image_list a").each(function() {
// get the image URL and caption for each image
var imageURL = $(this).attr("href");
var caption = $(this).attr("title");
// preload the image for each link
var galleryImage = new
Image();
galleryImage.src = imageURL;
// set up the event handlers for
each link
$(this).click(function(evt) {
$("#image").attr("src", imageURL);
$("#caption").text(caption);
// cancel...
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...
given below are the project description and their Html and css
files i need javascript according to the project and other
files!
WEB230 - JavaScript 1 Assignment 6b - Event Delegation Before starting, study the HTML and open it in a browser so that you understand the structure of the document. You will add functionality to perform several tasks in our shopping list app. Clicking the red "X" at the right of an item will delete that item. Clicking on...
Most questions answered within 3 hours.
-
8. A drug company has a monopoly on a new class of
corticosteroid. The market demand...
asked 1 minute ago -
The pulse rates of
176176
randomly selected adult males vary from a low of
4242
bpm...
asked 9 minutes ago -
Projecting the financial performance and requirements for the
venture is related to the major milestones. It...
asked 11 minutes ago -
Can you all give me an example of a good organizational
alliance. Please explain why you...
asked 13 minutes ago -
A mother nags her son daily to do his household chores. One day
he decides to...
asked 27 minutes ago -
A pore of a K+ channel has the diameter of about 5.5
angstroms, and this channel is...
asked 41 minutes ago -
Let's say that the median income for someone with an associate’s
degree is about $10,800 higher...
asked 40 minutes ago -
I need to rewrite this lambda function into a def function using
python.
mp is an...
asked 49 minutes ago -
In using the sales comparison approach to determine the current
value of the subject property, it...
asked 52 minutes ago -
Research examples of how water treatment practices and
systems are being utilized across the globe and...
asked 55 minutes ago -
2) A board with a mass of 6 kg, which is 5 meters long, rests on...
asked 56 minutes ago -
Which of the following is a benefit under the Employee
Retirement Income Security Act guidelines for...
asked 57 minutes ago