JavaScript
Posted By Sebastian

Building A Vanilla JavaScript Todo App From Start To Finish | EP5: Completing & Removing Todos


Subscribe On YouTube

Episodes

In the last part of this series we’ll finalize our JavaScript Todo App by adding missing functionality like completing and removing todo items.

Therefore we’re adding another click event handler function for the ul element.

document.querySelector('ul').addEventListener('click', handleClickDeleteOrCheck);

Everytime the user clicks anywhere in the list output the handleClickDeleteOrCheck function will be executed:

function handleClickDeleteOrCheck(e) {
    if (e.target.name == 'checkButton')
        checkTodo(e);

    if (e.target.name == 'deleteButton')
        deleteTodo(e);
}

Inside that function it needs to be distinguished if the click comes from a check button or from a delete button. In case a check button is clicked the checkTodo helper function is called in case a delete button is clicked the deleteTodo helper function is executed:

function checkTodo(e) {
    let item = e.target.parentNode;
    if (item.style.textDecoration == 'line-through')
        item.style.textDecoration = 'none';
    else
        item.style.textDecoration = 'line-through';
}

function deleteTodo(e) {
    let item = e.target.parentNode;
    
    item.addEventListener('transitionend', function () {
        item.remove(); 
    });

    item.classList.add('todo-list-item-fall');
}

Inside the checkTodo function we need to retrieve a reference to the parent node (list item), so that we’re able to apply a text decoration style of line-through to this item.

Inside the deleteTodo function we’re retrieving a reference to the parent node as well. Furthermore we’re registering an event handler function for the transitionend event of this node. This is needed due to the fact that a CSS transition should be applied when a todo element is removed from the list.

The transition is started by adding the CSS class todo-list-item-fall to the element. Once the transition effect is completed the event is triggered and inside the event handler function the todo item is removed from the list by calling item.remove.

Inside styles.css we need to add the following two CSS class definitions in order to make the transition effect work:

.todo-list-item {
    transition: all 0.3s ease-out;
}

.todo-list-item-fall {
    transform: translateY(12rem) rotateZ(10deg);
    opacity: 0;
}

Finally we’re registering and implementing another click event handler function for the Clear All link.

document.getElementById('clearAll').addEventListener('click', handleClearAll);

In making sure to clear the complete list inside the event handler function by selecting the ul element and then setting the innerHTML property to an empty string:

function handleClearAll(e) {
    document.querySelector('ul').innerHTML = '';
}

Advertisement: The Complete JavaScript Course: Build Real Projects

Master JavaScript with the most complete course! Projects, challenges, quizzes, JavaScript ES6+, OOP, AJAX, Webpack

The Complete JavaScript Course: Build Real Projects *

  • Go from a total beginner to an advanced JavaScript developer
  • JavaScript and programming fundamentals: variables, boolean logic, if/else, loops, functions, arrays, etc.
  • Asynchronous JavaScript: The event loop, promises, async/await, AJAX and APIs
  • A true understanding of how JavaScript works behind the scenes
  • Practice your new skills with coding challenges (solutions included)

Go To Course*

* Affiliate Link / Advertisement: This blog post contains affiliate links, which means that if you click on one of the product links and buy a product, we’ll receive a small commission. There are no additional costs for you. This helps support the channel and allows us to continue to make videos like this. Thank you for the support!


Using and writing about best practices and latest technologies in web design & development is my passion.