In this problem, you will create a selectable “To Do” List. To add a task to...

Question

Question

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 an un-ordered list with an id of “todo” that represents a group of selectable tasks, and each task is a list item element with a class of “ui-state-default”. Also, notice how the ui-selected class is defined in the style element.
Add jQuery code that enables the selectable interaction on the to do list.
Add jQuery code that responds to the click event of the Add Task button. When this button is clicked, use the prompt method to get a description of the task. If a description is entered and the OK button is clicked, add the task before the other tasks in the list. To do that, you’ll need to add an li element with contents like the <li> elements for the other tasks. You’ll also need to enable the selectable interaction on the list again so the new task is selectable.
Add jQuery code that responds to the click event of the Delete Task button. When this button is clicked, each selected task should be deleted from the list.

To Do List Click the Add button to add a task Select a task and click the Delete button to remove it Wash car Prune bushes Cl

index.html

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Selectable Interactions</title>

<link href="css/smoothness/jquery-ui-1.8.23.custom.css" type="text/css" rel="stylesheet">
   
<link href="styles.css" type="text/css" rel="stylesheet">

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>

<script type="text/javascript" src="js/jquery-ui-1.8.23.custom.min.js"></script>

   <style>
.ui-selected {
           border: 2px solid blue;
       }
</style>
<script>
$(document).ready(function() {

});
</script>
</head>

<body>
   <section>
       <h2>To Do List</h2>
       <div>
       <h3>Click the Add button to add a task</h3>
       <h3>Select a task and click the Delete button to remove it</h3>
       <ul id="todo">
           <li class="ui-state-default">Wash car</li>
       <li class="ui-state-default">Prune bushes</li>
       <li class="ui-state-default">Clean garage</li>
       </ul>
       <input type="button" id="add" value="Add Task">
       <input type="button" id="delete" value="Delete Task">
</div>
   </section>
</body>
</html>

engineering Computer-Science

Add a comment Improve this question Transcribed image text

Answer 1

Answer #1

<!DOCTYPE html>

<head>

<title>Selectable Interactions</title>

<style>

.ui-selected {

border: 2px solid blue;

}

</style>

$(document).ready(function() {

var list = document.querySelector('ul');

list.addEventListener('click', function(ev) {

if (ev.target.tagName === 'LI') {

ev.target.classList.toggle('ui-selected');

}

});

document.getElementById("add").addEventListener('click', function(ev) {

var todo = document.getElementById("todo");

var desc;

desc = prompt("Enter Description: ");

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

li.className = "ui-state-default";

var t = document.createTextNode(desc);

li.appendChild(t);

todo.insertBefore(li, todo.firstChild);

desc = "";

});

document.getElementById("delete").addEventListener('click', function(ev) {

var myNodelist = document.getElementsByTagName("LI");

var arr = [], k=0;

for (var i = 0; i < myNodelist.length; i++) {

if(myNodelist[i].className == "ui-state-default ui-selected") {

arr[k] = i;

k++;

}

for (var i = arr.length -1; i >= 0; i--) {

myNodelist[arr[i]].remove();

}

});

</script>

</head>

<body>

<div>

<h3>Click the Add button to add a task</h3>

<h3>Select a task and click the Delete button to remove it</h3>

<li class="ui-state-default">Prune bushes</li>

<li class="ui-state-default">Clean garage</li>

</ul>

</div>

</section>

</body>

</html>

Add a comment

Answer 2

In this problem, you will create a selectable “To Do” List. To add a task to...

Homework Answers

Add Answer to:
In this problem, you will create a selectable “To Do” List. To add a task to...

Post as a guest

Earn Coins

URGENT HELP NEEDED: JQuery. PLEASE POST SCREEN SHOTS Task 1: Downloading jQuery Right-click the link to...

Task 3: Creating a Simple jQuery Application 1. Launch HTML-Kit. 2. Create a new HTML file...

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

Modify an application that lets users add tasks to a list so the tasks can also...

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

Hello Ive been tryting to add the CDN of jquery to my html code and I...

Please edit and add all the code needed to make the images side by side and to put the buttons in...

I'm having trouble to link the .js file to the html so changes for the html...

for Javascript, JQuery When the page is first opened a user will see the name field...

<!DOCTYPE html> <html> <head> <!-- JavaScript 6th Edition Chapter 4 Hands-on Project 4-3 Author: Da...

In this problem, you will create a selectable “To Do” List. To add a task to...

Homework Answers

Add Answer to: In this problem, you will create a selectable “To Do” List. To add a task to...

Post as a guest

Earn Coins

Add Answer to:
In this problem, you will create a selectable “To Do” List. To add a task to...