My First ToDo App

Josh Gude
Josh Gude
Sep 9, 2018 · 1 min read

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.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade