GitHub Source Fileshttps://github.com/JS-Beginners/todo-list-project-2
- DOM Manipulation
- Event Listeners
- Nested Functions
- Local Storage API
My Personalize Summary
app.jsfile 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 RefreshedI 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);
DOMStringrepresenting the position relative to the
element; must be one of the following strings:
'beforebegin': Before the
'afterbegin': Just inside the
element, before its first child.
'beforeend': Just inside the
element, after its last child.
'afterend': After the
- The string to be parsed as HTML or XML and inserted into the tree.
Time to CodeI 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:
<p class = "child">
</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 CodeThis project around 110 lines of code, including white space.
What to Accomplish
- Download the source code from the github repository above.
- Delete the contents of the
- Add a link to your finished project below!
What You Should See
- 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?