My First ToDo App
So I’ve created my first ToDo App. It’s not super flashy, and it’s written in vanilla JavaScript, but it functions.
Because each new task element and the children elements of those tasks are created dynamically through JavaScript, my biggest hurdle was figuring out how to attach an event listener to those elements. By looking through StackOverflow and the MDN documentation, I was able to discover the concept of event bubbling.
Event bubbling is the concept that almost any event ('click', 'keypress', etc.) is initiated on an element, then bubbles up through all of the initial element’s parent elements. By using this concept, I was able to attach an event listener to the <ul> element that would contain all of the user created tasks alongside the Event object’s .target property to pinpoint the exact element that was triggering the event. As an example, if I wanted to execute the necessary code when a user clicks the “delete task” button, my event listener would look like this:
document.getElementById('list').addEventListener('click', e => { if (e.target.getAttribute('class') === 'edit') { ... }}
Once I was able to grasp this concept, the rest was smooth sailing.
The next aspects I’d like to add to the app are persistence, so that a user can maintain their list between browser sessions, and also to clean up the look and feel of the buttons.
You can check out the app at https://jorygu.github.io/ToDoApp/.
Full source code at https://github.com/JoRyGu/ToDoApp.