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

In the final step, we integrate the HTML, JavaScript, and CSS code to create a cohesive and functional to-do app. 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 4: Integration

Upon opening the HTML file in a browser window, users can enter tasks, add them to the task list, and mark them as completed with a visual indication. Pretty cool huh? This simple framework can be used to build out a much larger scale product.

< html>
< head>
  < title>To-Do App
  < style>
    #todo-list {
      list-style-type: none;
      padding: 0;
    }
    .completed {
      text-decoration: line-through;
    }
  < /style>
< /head>

< body>
  < h1>To-Do App
  < input type="text" id="taskInput" placeholder="Enter a task">
  < button onclick="addTask()">Add Task
  < ul id="todo-list">

  < script>
    function addTask() {
      var taskInput = document.getElementById("taskInput");

      var task = taskInput.value;

      if (task !== "") {
        var listItem = document.createElement("li");
        var checkbox = document.createElement("input");
        checkbox.type = "checkbox";
        checkbox.addEventListener("change", toggleTaskCompletion);
        
        var label = document.createElement("label");
        label.innerText = task;
        listItem.appendChild(checkbox);
        listItem.appendChild(label);

        document.getElementById("todo-list").appendChild(listItem);

        taskInput.value = "";
      }
    }

    function toggleTaskCompletion(event) {
      var checkbox = event.target;
      var listItem = checkbox.parentNode;

      if (checkbox.checked) {
        listItem.classList.add("completed");
      } else {
        listItem.classList.remove("completed");
      }
    }
  < /script>

< /body>
< /html>

That’s it for this month, check back next month for more short tutorials.

“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.