Build a Simple To-Do List Using JavaScript (Step-by-Step)

A To-Do List is one of the best beginner projects for learning JavaScript. It teaches you how to work with the DOM, handle events, create HTML elements dynamically, and remove elements from a webpage.

In this article, we'll build a simple To-Do List where users can:

• Add a new task
• Prevent empty tasks
• Delete a task
• Clear the input field after adding a task

Let's understand the JavaScript code line by line.

Selecting HTML Elements

const input = document.getElementById("input");
const button = document.getElementById("btn");
const ul = document.getElementById("value");

What's happening?

First, we select the HTML elements that we want to work with.

• input stores the text box where the user types a task.
• button stores the Add button.
• ul stores the unordered list that will display all tasks.

Instead of searching for these elements every time, we store them in variables for easy access.

---

Listening for the Button Click

button.addEventListener("click", function touch() {

The addEventListener() method waits for an event.

Here, the event is "click".

This means:

Whenever the user clicks the Add button, execute the function.

The function name touch is optional. Since the function isn't called anywhere else, you could also write:

button.addEventListener("click", function () {

Both versions work the same.

---

Checking for Empty Input

if (input.value.trim() === "") {
    alert("please enter the value");
    return;
}

Before adding a task, we check whether the input field is empty.

input.value

Gets the text entered by the user.

Example:

Learn JavaScript

trim()

Removes spaces from the beginning and end of the string.

For example:

"   Hello   "

becomes

"Hello"

If the user enters only spaces, trim() converts them into an empty string.

Why use return?

If the input is empty:

1. An alert is displayed.
2. return immediately stops the function.
3. No task is added.

Without return, JavaScript would continue executing the remaining code and create an empty list item.

---

Creating a New Task

const li = document.createElement("li");

The createElement() method creates a new HTML element.

Here, it creates a new list item:

<li></li>

At this point, the element exists only in memory.

It won't appear on the webpage until we add it to the DOM.

---

Adding the Task Text

li.innerText = input.value;

This places the user's input inside the <li>.

If the user enters:

Buy Milk

The element becomes:

<li>Buy Milk</li>

---

Creating the Delete Button

const deletebtn = document.createElement("button");
deletebtn.innerText = "delete";

First, a new button is created.

Then its text is set to delete.

The result is:

<button>delete</button>

---

Adding the Delete Functionality

deletebtn.addEventListener("click", function () {
    ul.removeChild(li);
});

Each task gets its own Delete button.

When the Delete button is clicked:

• JavaScript finds the corresponding <li>
• Removes it from the <ul>

As a result, the task disappears from the page.

---

Displaying the Task

ul.appendChild(li);

This adds the new <li> to the unordered list.

Before:

<ul></ul>

After:

<ul>
    <li>Buy Milk</li>
</ul>

Now the task becomes visible.

---

Adding the Delete Button to the Task

li.appendChild(deletebtn);

This places the Delete button inside the list item.

Final structure:

<li>
    Buy Milk
    <button>delete</button>
</li>

Every task now has its own Delete button.

---

Clearing the Input Field

input.value = "";

After adding a task, the input field is cleared automatically.

This allows the user to type the next task without manually deleting the previous text.

---

How the Program Works

User enters a task
        │
        ▼
Clicks Add button
        │
        ▼
Is the input empty?
        │
   Yes ─────► Show alert
        │           │
        │           ▼
        │        return
        │
       No
        ▼
Create a new <li>
        ▼
Add the task text
        ▼
Create a Delete button
        ▼
Attach Delete functionality
        ▼
Display the task
        ▼
Clear the input field

What You'll Learn

By building this simple project, you'll practice:

• DOM Manipulation
• Event Listeners
• Functions
• Conditional Statements (if)
• trim()
• return
• createElement()
• appendChild()
• removeChild()
• innerText

These concepts are the building blocks of interactive web applications.

Final Thoughts

A To-Do List may look like a small project, but it teaches many essential JavaScript concepts used in real-world applications. Once you're comfortable with this version, try improving it by adding features such as editing tasks, marking tasks as completed, searching tasks, and saving tasks with localStorage.