What is the solution to this exercise? In the JavaScript file, you’ll see some s
ID: 3730068 • Letter: W
Question
What is the solution to this exercise?
In the JavaScript file, you’ll see some starting code, including a variable declaration for an array named taskList. Then, write the code for adding a task to this array when the user enters a task in the first text box and clicks the Add Task button. This code should also blank out the text box. At this point, don’t worry about displaying the tasks in the text area for the task list. Instead, use alert statements to make sure this works when you add one or more items. Add the JavaScript code for the click event handler of the Show Next Task button. This handler should display the first task in the array in the Next task text box and remove its element from the array. In the event handler for the Show Next Task button, test to make sure the array has elements in it. If it doesn’t, use the alert method to display “No tasks remaining” and clear the task from the Next task text box. Add a JavaScript function that displays the elements in the array in the Task list text area. Then, call this function from both of the click event handlers so the updated task list is displayed each time a task is added to the list or removed from it.
I'm given the HTML, CSS, and Javascript which is:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>To Do List</title>
<link rel="stylesheet" href="todo_list.css">
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="todo_list.js"></script>
</head>
<body>
<section>
<h1>To Do List</h1>
<label for="new_task">Add task:</label>
<input type="text" id="new_task">
<input type="button" id="add_task" value="Add Task"><br>
<label for="task_list">Task list:</label>
<textarea id="task_list"></textarea><br>
<label for="next_task">Next task:</label>
<input type="text" id="next_task">
<input type="button" id="show_next_task" value="Show Next Task"><br>
</section>
</body>
</html>
___________
body {
font-family: Arial, Helvetica, sans-serif;
background-color: white;
margin: 0 auto;
width: 600px;
border: 3px solid blue;
}
h1 {
color: blue;
}
section {
padding: 0 2em 1em;
}
label {
float: left;
width: 5em;
text-align: right;
padding-bottom: .5em;
}
input[type="text"] {
width: 20em;
margin-left: 1em;
margin-bottom: .5em;
}
textarea {
height: 10em;
width: 20em;
margin-left: 1em;
margin-bottom: .5em;
}
_______________
var taskList = [];
var $ = function (id) {
return document.getElementById(id);
}
window.onload = function () {
}
Thank you for your help!!!!
Explanation / Answer
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>To Do List</title>
<link rel="stylesheet" href="todo_list.css">
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="todo_list.js"></script>
</head>
<body>
<section>
<h1>To Do List</h1>
<label for="new_task">Add task:</label>
<input type="text" id="new_task">
<input type="button" id="add_task" value="Add Task"><br>
<label for="task_list">Task list:</label>
<textarea id="task_list"></textarea><br>
<label for="next_task">Next task:</label>
<input type="text" id="next_task">
<input type="button" id="show_next_task" value="Show Next Task"><br>
</section>
</body>
</html>
---------------------------------------------------------
var taskList = [];
var x=0;
function addTask()
{
taskList[x] = document.getElementById("new_task").value;
alert("Element: "+ taskList[x] + " added.");
x++;
document.getElementById("new_task").value="";
console.log(taskList.length);
addArray();
}
function showNextTask()
{
taskList[x] = document.getElementById("new_task").value;
if(taskList.length > 0) {
document.getElementById("next_task").value= taskList[0];
taskList.shift();
alert("Element removed.");
console.log(taskList.length);
addArray();
}
else{
alert("No Tasks Remaining");
}
}
function addArray()
{
document.getElementById("task_list").value = taskList;
}
window.onload = function () {
};
--------------------------------------------------------
body {
font-family: Arial, Helvetica, sans-serif;
background-color: white;
margin: 0 auto;
width: 600px;
border: 3px solid blue;
}
h1 {
color: blue;
}
section {
padding: 0 2em 1em;
}
label {
float: left;
width: 5em;
text-align: right;
padding-bottom: .5em;
}
input[type="text"] {
width: 20em;
margin-left: 1em;
margin-bottom: .5em;
}
textarea {
height: 10em;
width: 20em;
margin-left: 1em;
margin-bottom: .5em;
}
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.