Adding persistent data to applications - Build Windows 8 Apps with HTML5 and JavaScript - page 243

FIGURE 10-4 The JSON content of a .todo file created by TodoList.
The next challenge is now making TodoList capable of loading and editing existing JSON-formatted
tasks.
Creating Task objects from files
On the way to reading back the content of saved Task objects, you make a couple of changes to the
user interface of the TodoList application. You add a button to create a blank new task and a button
to open an existing task from the specified file.
Making changes to the user interface
You open the default.html page and add the following markup to the DIV element that contains the
other two buttons to add and share a task.
<button id="buttonNewTask">New</button>
<button id="buttonOpenTask">Open</button>
Next, in the todolist.js file, you locate the TodoList.init method and add the following code to
register handlers for the click event of the two new buttons.
document.getElementById("buttonNewTask").addEventListener("click", TodoList.
newTaskClick);
document.getElementById("buttonOpenTask").addEventListener("click", TodoList.
openTaskClick);
Here's the body of the handlers to add to the same JavaScript file:
TodoList.newTaskClick = function () {
TodoList.displayTask(new Task());
}
TodoList.openTaskClick = function () {
TodoList.pickFileAndOpenTask();
}