Adding Checkboxes to Mark Completion

Lesson Overview

Welcome to another interactive session in our course, "Making a Dynamic Todo List with JavaScript." Today, we are stepping into one of the most critical parts of any todo list — checking off items. This lesson will guide you through how to add checkboxes, make them interactive, and solve some problems that arise with this change. Our journey will include topics like checkboxes, handling change events, manipulating CSS properties like text decorations in JavaScript, and implementing a delete button. With these functionalities, our todo list will be that much closer to being a fully interactive application. These skills are essential not just for todo lists but also for setting preferences in forms or managing project tasks in a collaborative tool. Ready for the journey? Let's roll!

A Closer Look at Checkboxes

Let's begin our journey by examining the concept of checkboxes in HTML and JavaScript. In web development, checkboxes are commonly used for selection purposes. As you may have seen in online forms or surveys, checkboxes permit multiple selections from a group of options. Just like text fields, checkboxes are a way to receive input from the user. In our todo list, we use checkboxes to signify whether a task is completed. Let's consider the following HTML snippet to create a new checkbox: HTML <input type="checkbox"> This is useful when you are adding static items to the webpage, but in our case, where we want to dynamically add new checkboxes to any tasks that may be added to the todo list, it makes more sense to use JavaScript instead: JavaScript const checkbox = document.createElement('input'); checkbox.type = 'checkbox'; li.appendChild(checkbox); Here, we are using document.createElement to create an input element of type checkbox, and then appending it as a child to our list item (li). Checkboxes add interactivity to our list, allowing us to check off tasks once they're completed. Think of it like checking off items on a grocery list or marking attendance in a class. The variable is defined using the const keyword, indicating that its reference cannot be reassigned after initial declaration. This reduces the risk of bugs caused by accidental reassignment, making the code more predictable and easier to debug. In our todo list, using const ensures the reference to elements like checkboxes remains constant while still allowing their properties to change.

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal

Implementing a Delete Button

Finally, while it may seem that we are done, we have introduced a bug. Can you guess what it is? Here is our full code to delete a list item as a refresher:

JavaScript

// Existing code to delete a list item
li.addEventListener('click', function() {
    document.getElementById('todo-list').removeChild(li);
});

// Creating the checkbox and adding it as a child to the list item
const checkbox = document.createElement('input');
checkbox.type = 'checkbox';
li.appendChild(checkbox);

// Adding the event listener for the checkbox change
checkbox.addEventListener('change', function() {
    if (checkbox.checked) {
        li.style.textDecoration = 'line-through';
    } else {
        li.style.textDecoration = 'none';
    }
});

// Existing code to delete a list item
li.addEventListener('click', function() {
    document.getElementById('todo-list').removeChild(li);
});

// Creating the checkbox and adding it as a child to the list item
const checkbox = document.createElement('input');
checkbox.type = 'checkbox';
li.appendChild(checkbox);

// Adding the event listener for the checkbox change
checkbox.addEventListener('change', function() {
    if (checkbox.checked) {
        li.style.textDecoration = 'line-through';
    } else {
        li.style.textDecoration = 'none';
    }
});

The problem lies in the event listener. In JavaScript, by a process called event bubbling, all elements in the chain execute their respective event listeners. For example, if you have a li containing a checkbox, clicking the checkbox will trigger its click event as well as the click event of the li. This means that even if there is a specific checkbox.addEventListener, the li.addEventListener will still be run. This can result in unwanted behavior, such as the entire list item being deleted when clicking the checkbox.

To avoid this, we can add a third child component that specifically takes care of the deletion process:

JavaScript

const deleteBtn = document.createElement('button');
deleteBtn.textContent = 'Delete';
deleteBtn.addEventListener('click', function() {
    document.getElementById('todo-list').removeChild(li);
});
li.appendChild(deleteBtn);

const deleteBtn = document.createElement('button');
deleteBtn.textContent = 'Delete';
deleteBtn.addEventListener('click', function() {
    document.getElementById('todo-list').removeChild(li);
});
li.appendChild(deleteBtn);

In this snippet, we create a button and label it "Delete." Then, an event listener is assigned to this button that removes the associated task from its list when clicked. This ensures that clicking the checkbox does not inadvertently delete the task because the deletion process is now handled by the delete button, not the list item itself. This separation of concerns prevents accidental deletions through event bubbling.

Adding Text

With the code snippet so far, we still haven't added the actual text of our todo item. We'll use the document.createTextNode method for this purpose. This method creates a text node containing the text passed as an argument. Here's how we include this in our implementation:

JavaScript

li.appendChild(document.createTextNode(newTodo));

li.appendChild(document.createTextNode(newTodo));

This line of code creates a new text node with the value of newTodo and appends it to the li element. We need to use createTextNode instead of directly setting the text content of li (e.g., li.textContent = newTodo) because li contains other child elements like the checkbox and delete button. WithcreateTextNode, we can add a new text node as a child, preserving the existing structure.

To summarize everything, here is the complete implementation for adding a todo item with a checkbox to mark completion and a delete button to remove the item from the list:

JavaScript

document.getElementById('add-btn').addEventListener('click', function() {
    const newTodo = document.getElementById('new-todo').value;
    if (newTodo.trim() === '') return;
    
    const li = document.createElement('li');
    const checkbox = document.createElement('input');
    checkbox.type = 'checkbox';
    checkbox.addEventListener('change', function() {
        if (checkbox.checked) {
            li.style.textDecoration = 'line-through';
        } else {
            li.style.textDecoration = 'none';
        }
    });
    
    const deleteBtn = document.createElement('button');
    deleteBtn.textContent = 'Delete';
    deleteBtn.addEventListener('click', function() {
        document.getElementById('todo-list').removeChild(li);
    });
    
    li.appendChild(checkbox);
    li.appendChild(document.createTextNode(newTodo));
    li.appendChild(deleteBtn);
    
    document.getElementById('todo-list').appendChild(li);
    document.getElementById('new-todo').value = '';
});

document.getElementById('add-btn').addEventListener('click', function() {
    const newTodo = document.getElementById('new-todo').value;
    if (newTodo.trim() === '') return;
    
    const li = document.createElement('li');
    const checkbox = document.createElement('input');
    checkbox.type = 'checkbox';
    checkbox.addEventListener('change', function() {
        if (checkbox.checked) {
            li.style.textDecoration = 'line-through';
        } else {
            li.style.textDecoration = 'none';
        }
    });
    
    const deleteBtn = document.createElement('button');
    deleteBtn.textContent = 'Delete';
    deleteBtn.addEventListener('click', function() {
        document.getElementById('todo-list').removeChild(li);
    });
    
    li.appendChild(checkbox);
    li.appendChild(document.createTextNode(newTodo));
    li.appendChild(deleteBtn);
    
    document.getElementById('todo-list').appendChild(li);
    document.getElementById('new-todo').value = '';
});

Lesson Overview

A Closer Look at Checkboxes

Join the 1M+ learners on CodeSignal

Understanding Change Events

Spicing It Up with Text Decorations

Implementing a Delete Button

Adding Text

Lesson Summary