How To: Create a ‘To-Do’ List with JavaScript (Part 2/4)

Here, we add JavaScript functions to make our to-do app interactive. This month, I will show you how to make a nice and simple to-do style list with JavaScript, HTML and CSS. As always, I’ve broken this script down into 4 steps:

1. Define the basic HTML Structure of the page.
2. Add the JavaScript Functionality to make it interactive.
3. Add some CSS styling to add a strikethrough completed tasks.
4. Integration. Making the JS and CSS files external for easy readability.

Step 2: JavaScript Functionality

The addTask() function retrieves the task entered by the user, creates a new list item, and appends it to the task list. The toggleTaskCompletion() function allows users to mark tasks as completed or incomplete by updating the CSS class of the task item.

// This function adds a task to a to-do list
function addTask() {
  // Retrieve the task input element from the HTML
  var taskInput = document.getElementById("taskInput");

  // Get the value entered in the task input
  var task = taskInput.value;

  // Check if the task is not empty
  if (task !== "") {
    // Create a new list item element
    var listItem = document.createElement("li");

    // Create a checkbox element
    var checkbox = document.createElement("input");
    checkbox.type = "checkbox";

    // Add an event listener to the checkbox to handle task completion
    checkbox.addEventListener("change", toggleTaskCompletion);

    // Create a label element to display the task text
    var label = document.createElement("label");
    label.innerText = task;

    // Append the checkbox and label to the list item
    listItem.appendChild(checkbox);
    listItem.appendChild(label);

    // Append the list item to the to-do list
    document.getElementById("todo-list").appendChild(listItem);

    // Reset the task input value to an empty string
    taskInput.value = "";
  }
}

// This function toggles the completion status of a task
function toggleTaskCompletion(event) {
  // Get the checkbox that triggered the event
  var checkbox = event.target;

  // Get the parent list item of the checkbox
  var listItem = checkbox.parentNode;

  // If the checkbox is checked, add the "completed" class to the list item
  if (checkbox.checked) {
    listItem.classList.add("completed");
  } else {
    // If the checkbox is unchecked, remove the "completed" class from the list item
    listItem.classList.remove("completed");
  }
}

Next, we’re going to add some CSS to make a strike through completed tasks.

“The code you write makes you a programmer. The code you delete makes you a good one. The code you don’t have to write makes you a great one.” – Mario Fusco.