Hosted Project
https://github.com/JS-Beginners/todo-list-project-2
GitHub Source Files
https://github.com/JS-Beginners/todo-list-project-2Project 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. Theapp.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 theelement
; must be one of the following strings:'beforebegin'
: Before theelement
itself.'afterbegin'
: Just inside theelement
, before its first child.'beforeend'
: Just inside theelement
, after its last child.'afterend'
: After theelement
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 useelement.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
- Download the source code from the github repository above.
- Delete the contents of the
app.js
file. - Implement the JavaScript code in your own
app.js file.
- If you think you need to see a video solution first, be sure to pick up John's JavaScript Tutorial and Projects Course.
- Add a link to your finished project below!
What You Should See
- Visit the hosted github page to see this JavaScript Todo App in action.
- You should be able to add new items and use the buttons to toggle completed items, edit items, or delete items.
- If you try to add an item without text, you should receive an alert telling the user to add an item.
- The clear button should clear your page.
- 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
I didn´t understand when the function removeItem is used, and why you have transformed the list in a string on the function setLocalStorage and turns into an object again in todoItems = JSON.parse(todoStorage) on function getLocalStorage
Thanks
Gr8 Project !!!
Can u explain how the “closures” work in the adding event listener to the icon using the parameter “itemName”
Can you update the “Hosted Project” link? It is the same as the “GitHub Source Files” link.