HTML and CSS Reference
In-Depth Information
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
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.
document.getElementById("buttonOpenTask").addEventListener("click", TodoList.
Here's the body of the handlers to add to the same JavaScript file:
TodoList.newTaskClick = function () {
TodoList.displayTask(new Task());
TodoList.openTaskClick = function () {
Search WWH ::

Custom Search