Building a Simple To-Do List App Using Core JavaScript

March 7, 2025

6 min read

Building a Simple To-Do List App Using Core JavaScript

In this article, we’ll walk through the creation of a simple To-Do List application using only HTML, CSS, and JavaScript—without any frameworks or libraries. This project will help you understand basic DOM manipulation, event handling, and styling in vanilla JavaScript.

Overview

A To-Do List app allows users to:

Add new tasks.
Mark tasks as completed.
Remove tasks from the list.

By the end of this tutorial, you will have a functional To-Do List that performs these actions efficiently.

Step 1: Setting Up the HTML Structure

Our basic structure consists of an input field, a button to add tasks, and an unordered list (<ul>) where tasks will be displayed.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>To-Do List</title>
</head>
<body>
    <input type="text" id="taskInput">
    <button onclick="addTask()">Add Task</button>
    <ul id="taskList"></ul>
</body>
</html>

Step 2: Styling the To-Do List

To make our app visually appealing, we add some CSS styles:

body {
    font-family: Arial, sans-serif;
    max-width: 400px;
    margin: 20px auto;
    text-align: center;
}
ul {
    list-style-type: none;
    padding: 0;
}
li {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    border: 1px solid #ddd;
    margin-top: 5px;
}
.completed {
    text-decoration: line-through;
    color: gray;
}

Step 3: JavaScript Functionality

Now, let’s implement the JavaScript functions to handle adding, marking as complete, and removing tasks.

function addTask() {
    let input = document.getElementById("taskInput");
    let inputValue = input.value.trim();
    
    if (inputValue === "") return; // Prevent empty tasks
    
    const li = document.createElement("li");
    li.innerHTML = `<span>${inputValue}</span>
                    <button onclick="markComplete(this)">Complete</button>
                    <button onclick="removeTask(this)">X</button>`;
    document.getElementById("taskList").appendChild(li);
    input.value = "";
}

function markComplete(button) {
    button.parentElement.querySelector("span").classList.toggle("completed");
}

function removeTask(button) {
    button.parentElement.remove();
}

Breaking Down the JavaScript Code

addTask() Function:
- Retrieves input value and trims spaces.
- Prevents adding empty tasks.
- Creates a new <li> element with task text, a "Complete" button, and a "Remove" button.
- Appends the task to the list.
markComplete(button) Function:
- Toggles the "completed" class on the <span> element inside the task.
- This applies the CSS rule to strike through completed tasks.
removeTask(button) Function:
- Removes the corresponding task from the list when the "X" button is clicked.

Final Thoughts

This simple To-Do List demonstrates how you can build functional applications using just HTML, CSS, and JavaScript. You can extend this project by:

Storing tasks in localStorage to retain them after page reloads.
Adding an edit option for existing tasks.
Implementing a drag-and-drop feature for reordering tasks.

Give it a try.