How to Create a Todo App in javascript

In this tutorial, we’re going to be building a simple todo list app using HTML, CSS, and javascript. This app will enable users to do the following:

Add a todo item
Display list of items
Remove an item from the list

Prerequisites

This tutorial is not for absolute beginners. It has been written for those who have a basic knowledge of HTML, CSS, and javascript and are looking for something to practice with. With that in mind, here are some things you need to be familiar with:

How Functions work in javascript
How to style a basic webpage

Set up your HTML structure

The first thing we need to do is to create our index.html file with all the neccessary HTML elements for our todo app.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Todo List App</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
      <div class="container">
      <h1>Todo List</h1>
      <input type="text" id="taskInput" placeholder="Enter a new task" />
      <button id="addButton">Add</button>
      <ul id="taskList"></ul>
    </div>
    <script src="script.js"></script>
  </body>
</html>

So in the HTML file, the first thing we did, was to:

Link the HTML file with the style.css and script.js files.
Then we created a div with a class of “container” to contain the entire todo list UI.
Then inside the container, an input field was created to enable the users add items.
Then the next thing we did, was to create a button to enable the users add their items/tasks to the list.
Finally, we added an unordered list element to hold the list of tasks.

Create the CSS file

body {
  font-family: Arial, sans-serif;
}

.container {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

h1 {
  text-align: center;
}

ul {
  list-style: none;
  padding: 0;
}

li {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}

button {
  margin-left: 10px;
}

To keep things as simple as possible, the stylesheet above only contains very basic styling to ensure the page displays correctly. Feel free to adjust the styling the way you want.

Implement the JavaScript logic

document.addEventListener("DOMContentLoaded", function () {
  const taskInput = document.getElementById("taskInput");
  const addButton = document.getElementById("addButton");
  const taskList = document.getElementById("taskList");

  addButton.addEventListener("click", addTask);
  taskList.addEventListener("click", removeTask);

  function addTask() {
    const taskText = taskInput.value.trim();
    if (taskText !== "") {
      const li = document.createElement("li");
      li.innerHTML = `
                <span>${taskText}</span>
                <button class="deleteButton">Delete</button>
            `;
      taskList.appendChild(li);
      taskInput.value = "";
    }
  }

  function removeTask(event) {
    if (event.target.classList.contains("deleteButton")) {
      const listItem = event.target.parentElement;
      taskList.removeChild(listItem);
    }
  }
});

In the javascript code implementation, we made use of the DOMContentLoaded event to ensure the JavaScript code runs after the page has been loaded. We then accessed the necessary DOM elements (input, button, and list with IDs: taskInput, addButton and taskList respectively).

After that, we added event listeners to handle adding and removing tasks. For the addButton, the addTask function has been attached to it while for the taskList, the removeTask function has been attached to it.

Let’s have a closer look at these functions.

addTask Function

Remember this function runs whenever we click the addButton button. That is, when the user wants to add a new task. So when we click the addButton, this is what the button does:

It gets whatever the user has written in the taskInput field, using the taskInput.value property. Then it removes the leading and trailing whitespaces from the text using the trim() function. So for example, if the user enters, " Feed the cat" or “Feed the cat “, after the trim function has been applied, the value will be “feed the cat”.
After the value has been trimmed, we stored it in the taskText variable.
Next, we checked if the user has actually entered a value before hitting the addButton. We do this by using this expression: (taskText !== ""). So if the taskText is not empty, our code in the if block will run.
In the if block, the first thing we did was to create an li (list item) element.
Inside the li element, we put the taskText and a button that can be used to delete the taskText. To achieve this, we made use of the li.innerHTML property.
So now we have our li element completely set, we add it to our taskList using the appendChild() function (which takes the li as an argument). Then finally, we clear the taskInput field by setting the value to an empty string. This is to ensure that the input field is empty and ready to be used whenever the user wants to add another taskText.

removeTask Function

What this function does, is to look for the task item that is associated with the delete button you’ve pressed, and to remove that task item. Here’s how it does it:

The expression in the if block event.target.classList.contains("deleteButton") checks to see if the user has clicked the delete button.
Tip: To have a better understanding of this expression, I’d recommend that you break it up at each reasonable dot operator, and then print it out on the console. For example, you can print to the console, the event.target first, then the event.target.classList then finally the event.target.classList.contains("deleteButton").
Doing this will give you a better understanding of the code. Doing some extra research will also help.
Next, we check for the element that wraps/houses the delete button (this is going to be one of the li elements), and store it in the listItem variable.
Then finally, we remove that listItem from the taskList using the removeChild function.

So in summary, when the “Add” button is clicked, a new task is created and appended to the list. When the “Delete” button within a task is clicked, that task is removed from the list.

With this setup, you have a basic todo list app using JavaScript. Depending on your requirements, you can enhance this app by adding features like task persistence (e.g., using local storage), marking tasks as completed, sorting tasks, etc.

Prerequisites#

Set up your HTML structure#

Create the CSS file#

Implement the JavaScript logic#

addTask Function#

removeTask Function#