To do list - Javascript Javascript(only) needs to be added in order to do the following:...

Question

Question

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:

<h3 class="card-title">Today's To Do List</h3>

</div>

</div>

</form>

</div>

<li class="list-group-item">Pick up groceries

</li>

<li class="list-group-item">Finish essay

</li>

<li class="list-group-item">Soccer @ 5:00

</ul>

</div>

CSS:

body

{

background-color: #34495e;

font-family: 'Lato', sans-serif;

}

button {

margin: 0 auto;

float: right;

}

.centered {

margin: 0 auto;

width: 80%

}

.card {

margin: 50px auto;

width: 18rem;

}

i{

float:right;

padding-top:5px

}

engineering Computer-Science

Add a comment Improve this question Transcribed image text

Answer 1

Answer #1

Here is code:

<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

</head>

var items = [{

item: "Pick up groceries"

},

{

item: "Finish essay"

},

{

item: "Soccer @ 5:00"

}

]

function addItem(element) {

var li = document.createElement("li");

li.className = "list-group-item";

li.innerText = element.item;

var i = document.createElement("i");

i.className = "fa fa-trash";

i.onclick = (event) => {

document.getElementById("todo-ul").removeChild(li);

}

li.appendChild(i)

document.getElementById("todo-ul").appendChild(li);

}

window.onload = () => {

items.forEach(element => {

addItem(element);

});

}

function addToItem() {

addItem({

item: document.getElementById("todo-input").value

})

document.getElementById("todo-input").value = "";

return false;

}

</script>

<style>

body {

background-color: #34495e;

font-family: 'Lato', sans-serif;

}

button {

margin: 0 auto;

float: right;

}

.centered {

margin: 0 auto;

width: 80%

}

.card {

margin: 50px auto;

width: 18rem;

}

i {

float: right;

padding-top: 5px

}

</style>

<body>

<h3 class="card-title">Today's To Do List</h3>

</div>

</div>

</form>

</div>

<!-- <li class="list-group-item">Pick up groceries

</li>

<li class="list-group-item">Finish essay

</li>

<li class="list-group-item">Soccer @ 5:00

</li> -->

</ul>

</div>

</body>

</html>

Output:

Add a comment

Answer 2

Similar Homework Help Questions

To do list - Javascript Javascript(only) needs to be added in order to do the following: Add...

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"> ...
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...
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...

JavaScript Question: Select only the second element with the class '.container'. Assign it to a variable...

JavaScript Question: Select only the second element with the class '.container'. Assign it to a variable named `container`. Code snippets of the sections with "container:" <nav class="navbar navbar-expand-lg"> <div class="container"> <a title="someUniversity" class="navbar-brand order-1 mr-0" href="#" target="_blank">Presented by someUniversity JavaScript Course</a> <div class="" id="navbarNavAltMarkup"> <div class="navbar-nav"> <a class="nav-item nav-link" href="#home">Home <span class="sr-only">(current)</span></a> <a class="nav-item nav-link" href="#about">About</a> <a class="nav-item nav-link" href="#speakers">Speakers</a> <a class="nav-item nav-link" href="#schedule">Schedule</a> </div> </div> </div> <div class="jumbotron jumbotron-fluid text-white"> <div class="container text-sm-center pt-5"> <h1 class="display-2">JavaScript Conference</h1> <p class="lead">A...
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...
JavaScript (Please debug this code) When a user enters a string in the input box, the...

JavaScript (Please debug this code) When a user enters a string in the input box, the program is designed to add the string to an array. When the array reaches a certain length, the program displays all the users' entries in a list on the page. When you finish debugging, the user's entry in the input box should be cleared each time the submit button is clicked. Additionally, after five strings are submitted, the entire list of submitted strings should...

NEED HELP DIRECTIONS: Notice that there is one input area and two buttons There is a...

NEED HELP DIRECTIONS: Notice that there is one input area and two buttons There is a place in the HTML reserved for < li > elements under the heading “Shopping List” Write a javascript program that will cause whatever the user inputs to be placed in a newly -created < li > tag and the tag placed inside the < ul > element whenever the user clicks the button Your program must not create any < li > tag is...
HTML Coding <html> <head> <title> Contact -- Charles Robertson </title> </head> <body bgcolor="white"> <table width="700" height="500"...

HTML Coding <html> <head> <title> Contact -- Charles Robertson </title> </head> <body bgcolor="white"> <table width="700" height="500" border="10">  <tr><td> <img src="20150516_084745" width="700" height="200"> </td></tr>  <tr><td>  <table width="700" height="100" border="5" bgcolor="lightgreen" > <tr><td><a href="HerbFarm.html"> <center> HOME </center></a></td> <td><a href="about3.html"> <center> ABOUT </center></a></td> <td><a href="contact3.html"> <center> CONTACT </center></a></td> <td><a href="gallery3.html"> <center> GALLERY </center></a></td> </tr> </table>  </td></tr> <tr><td> <h1>Contact </h1> <form action="thankyou.html"> </form> <div class="row"> <div class="col-75"> <div class="container"> <form action="/action_page.php"> <div class="row"> <div class="col-50"> <h3>Billing Address</h3> <label for="fname"><i...
<!DOCTYPE html> <html> <head>  <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Hands-on Project 4-3</title> <link rel="stylesheet" href="styles.css" /> <script src="modernizr.custom.05819.js"></script> </head> <body> <header> <h1> Hands-on Project 4-3 </h1> </header> <article> <div id="results"> <p id="resultsExpl"></p> <ul> <li id="item1"></li> <li id="item2"></li> <li id="item3"></li> <li id="item4"></li> <li id="item5"></li> </ul> </div> <form> <fieldset> <label for="placeBox" id="placeLabel"> Type the name of a place, then click Submit: </label> <input type="text" id="placeBox"...

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...

To do list - Javascript Javascript(only) needs to be added in order to do the following:...

Homework Answers

Add Answer to:
To do list - Javascript Javascript(only) needs to be added in order to do the following:...

Post as a guest

Earn Coins