Enhance the Task List application so it uses objects

Open, test, and review the application

1. Use your text editor or IDE to open the JavaScript files.

2. Test this application in Chrome by adding three tasks and deleting one. Then, review the code in the JavaScript files for this application.

3. In the main JavaScript file (task_list.js), find the code at the end of the ready() event handler that loads and displays the tasks in storage. Then, chain the calls to the load and display methods of the tasklist object.

4. Run the application and note that your tasks dont display. Open the Console panel of the developer tools and review the error messages there.

5. In the task list library (library_tasklist.js), update all the methods so they return the value in the this keyword.

6. Run the application again. This time, everything should work correctly.

7. In the main JavaScript file, find the event handler for the click event of the Add Task button and chain the method calls to the tasklist object it contains. Then, run the application and test it by adding a task.

8. In the task list library, find the display method and chain the method calls to the tasklist object it contains. Then, run the application and test it by deleting a task.

******CODES********

task_list.js

"use strict"; $( document ).ready(function() { $("#add_task").click( function() { if ( $("#due_date").val() === "" ) { var newTask = new Task( $("#task").val() ); } else { var newTask = new Task( $("#task").val(), $("#due_date").val() ); } if ( newTask.isValid() ) { tasklist.load(); tasklist.add(newTask); tasklist.save(); tasklist.display( $("#tasks") ); $("#task").val(""); } else { alert("Please enter a task and a future due date."); } $("#task").focus(); }); $("#clear_tasks").click( function() { tasklist.clear(); $("#tasks").html(""); $("#task").val(""); $("#due_date").val(""); $("#task").focus(); }); $("#due_date").datepicker({ changeMonth: true, changeYear: true }); tasklist.load(); tasklist.display( $("#tasks") ); $("#task").focus(); });

library_task.js

"use strict"; var Task = function(task, dueDate) { this.text = task; if (arguments.length === 1) { this.dueDate = new Date(); this.dueDate.setMonth( this.dueDate.getMonth() + 1 ); } else { this.dueDate = new Date( dueDate ); } }; Task.prototype.isValid = function() { if (this.text === "") { return false; } var dt = new Date(); if (this.dueDate.getTime() <= dt.getTime() ) { return false; } return true; }; Task.prototype.toString = function() { return this.text + " Due Date: " + this.dueDate.toDateString(); };

library_tasklist.js

"use strict"; var tasklist = { tasks: [], storage: getTaskStorage("tasks_17"), load: function() { this.tasks = this.storage.retrieveTasks(); }, save: function() { this.storage.storeTasks(this.tasks); }, sort: function() { this.tasks.sort( function(task1, task2) { if ( task1.dueDate < task2.dueDate ) { return -1; } else if ( task1.dueDate > task2.dueDate ) { return 1; } else { return 0; } }); }, add: function(task) { this.tasks.push(task); }, delete: function(i) { this.sort(); this.tasks.splice(i, 1); }, clear: function() { this.storage.clear(); }, display: function(div) { this.sort();

//create and load html string from sorted array var html = ""; for (var i in this.tasks) { html = html.concat("

"); html = html.concat("Delete"); html = html.concat(this.tasks[i].toString()); html = html.concat("

"); } div.html(html);

// add onclick event handler to each tag just added to div div.find("a").each(function() { $(this).on("click", function(evt){ tasklist.load(); tasklist.delete(this.title); tasklist.save(); tasklist.display(div); evt.preventDefault(); $("input:first").focus(); }); }); } };

library_storage.js

"use strict"; var getLocalStorage = function(key) { var prototype = { get: function() { return localStorage.getItem(this.key) || ""; }, set:function(str) { localStorage.setItem(this.key, str); }, clear: function() { localStorage.setItem(this.key, ""); } };

var storage = Object.create( prototype ); storage.key = key; return storage; };

var getTaskStorage = function(key) { var prototype = getLocalStorage(key); prototype.retrieveTasks = function() { var str = this.get(); if (str.length === 0) { return []; } else { var interim = str.split( "|" ); // convert each interim string to a Task object return interim.map( function( current ) { var t = current.split( "~~" ); return new Task( t[0], t[1] ); }); } }; prototype.storeTasks = function(tasks) { if (!Array.isArray(tasks)) { this.set( "" ); } else { // convert each Task object to an interim string var interim = tasks.map( function( current ) { return current.text + "~~" + current.dueDate.toDateString(); }); this.set( interim.join( "|" ) ); } };

var storage = Object.create(prototype); storage.key = key; return storage; };

index.html

Task List

Task: Due Date:

task_list.css

body {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 100%;

background-color: white;

width: 725px;

margin: 0 auto;

border: 3px solid blue;

padding: 0 2em 1em;

}

h1 {

font-size: 150%;

color: blue;

margin-bottom: .5em;

}

label {

float: left;

width: 8em;

}

input {

width: 20em;

margin-right: 1em;

margin-bottom: 1em;

}

#tasks {

float: right;

width: 25em;

margin: 0 0 .5em;

padding: 1em;

border: 2px solid black;

min-height: 5em;

}

#tasks a {

margin-right: 0.5em;

}

p {

margin: 0;

padding-bottom: .5em;

}

.clear {

clear: both;

}

.delete {

width: 5em;

}