2. Working with JavaScript

Activity 2.01: Adding and Modifying an Item to/in the To-Do List

Solution

1. Create the HTML file yourself and paste in the HTML code to get started:

   Figure 2.28: The initial to-do list's appearance

2. The first thing we need to do is assign an ID to our list in order to identify it via code. To do this, add an id attribute to the ol element and give it a value of todo-list. With that complete, we can then address this element directly with JavaScript:

   <ol id="todo-list">

3. Using a bit of JavaScript code, we can now create a new variable named parentContainer. This will refer to the ordered list container element that holds all of our list items. We'll use the ID we assigned in the previous step to address this element directly via the use of the getElementById() method:

   var parentContainer = document.getElementById('todo-list');

4. Create a new HTML <li> list item element via JavaScript. Right now,...