Todo List JavaScript Project v1

Hosted Project

https://github.com/JS-Beginners/todo-list-project-2

GitHub Source Files

https://github.com/JS-Beginners/todo-list-project-2

Project Objective

The objective of this JavaScript Project is to wire up a todo list application.

JavaScript Used

• Arrays
• DOM Manipulation
• Event Listeners
• Nested Functions
• Local Storage API

My Personalize Summary

Level of Difficulty

I found this JavaScript project easy to get through in the beginning. I went through most of it without interruption, up until I had to wire up the individual event listeners for each item. This was the tricky part since the DOM elements can't be selected without developer interaction. In other words, I had to create a handler function that was wired to select the DOM elements only after the list of items were added to the document. This is when I spent the most time trying to figure out why I was getting the errors I received. The app.js file has two main event listeners and four functions. The form's event listener took me a little time because I had to ensure their was functionality if a user tried to submit an item without actually adding text, and I had to ensure that items were pushed to the global todoItem array. The form event listener also handled the function call to set the items immediately into local storage. My function getList(todoItems) is what I used to add my event handler function, which wired the three interactive elements (complete, edit, and delete). Last, the clear button takes an event listener that simply clears local storage and creates a new empty todo list array.

New Things Learned or Refreshed

I learned about the WEB API's element.insertAdjacentHTML method. I used it to add the DOM elements to the created HTML list of todo items. The syntax is as follows: element.insertAdjacentHTML(position, text);

position

A DOMString representing the position relative to the element; must be one of the following strings:

• 'beforebegin': Before the element itself.
• 'afterbegin': Just inside the element, before its first child.
• 'beforeend': Just inside the element, after its last child.
• 'afterend': After the element itself.

text

The string to be parsed as HTML or XML and inserted into the tree.

Time to Code

I came back and forth to this project over several weeks. I really got stuck on the adding elements to the DOM portion. I tried to use element.removeChild(item) in my event listeners but it turned out that the child I was tried to remove was in fact, not a child, of the element. For example: <div class="parent"> <p class = "child"> <div class="notTheChild"></div> </p> I was trying to remove the div element with the class “notTheChild” on the div element with class “parent.” This gave me an error in the console stating that I was trying to remove a node that wasn't a child. This took me a while to figure out.

Lines of Code

This project around 110 lines of code, including white space.

Your Turn!

What to Accomplish

1. Download the source code from the github repository above.
2. Delete the contents of the app.js file.
3. Implement the JavaScript code in your own app.js file.
4. If you think you need to see a video solution first, be sure to pick up John's JavaScript Tutorial and Projects Course.
5. Add a link to your finished project below!

What You Should See

1. Visit the hosted github page to see this JavaScript Todo App in action.
2. You should be able to add new items and use the buttons to toggle completed items, edit items, or delete items.
3. If you try to add an item without text, you should receive an alert telling the user to add an item.
4. The clear button should clear your page.
5. Data should persist since this app uses local storage.

Need to see the video solution for this project?

Get John's JavaScript Tutorial and Projects Course