How to Create a "To Do" List Using HTML, CSS, JavaScript, and Local Storage

Creating a task list or "To Do" list is an excellent practical exercise for learning about web development. In this article, you will learn how to build a "To Do" list using HTML, CSS, and JavaScript, and how to store your tasks in the browser's Local Storage so they don't get lost when you refresh the page.

What is a "To Do" List?

A "To Do" list is a tool used for task management. It allows users to add, delete, and mark tasks as completed. In the realm of web development, it’s a popular project that combines various programming skills.

Project Structure

Create a new folder for your project and within it, create the following files:

todo-app/
├── index.html
├── styles.css
└── script.js

1. Create the HTML File

Let’s start by creating the basic structure in the index.html file.

<!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>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>Task List</h1>
        <input type="text" id="task-input" placeholder="Add new task...">
        <button id="add-task-button">Add</button>
        <ul id="task-list"></ul>
    </div>
    <script src="script.js"></script>
</body>
</html>

Explanation of the HTML

<div class="container">: Container for the task list interface.
<input>: Input field for the user to write a new task.
<button>: Button to add the task to the list.
<ul>: Unordered list where the tasks will be displayed.

2. Style with CSS

Now, let’s style our application in styles.css.

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 20px;
}

.container {
    max-width: 600px;
    margin: auto;
    background: white;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

#task-input {
    width: 70%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

#add-task-button {
    padding: 10px;
    background-color: #5cb85c;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#add-task-button:hover {
    background-color: #4cae4c;
}

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

li {
    padding: 10px;
    border-bottom: 1px solid #ccc;
}

.completed {
    text-decoration: line-through;
    color: gray;
}

Explanation of the CSS

The CSS will provide a clean look to our application, ensuring it is easy to use. The styles include margin configurations, colors, and typography.

3. Program the Logic in JavaScript

Now, let’s add the functionality of our application in script.js.

// Get references to DOM elements
const taskInput = document.getElementById("task-input");
const addTaskButton = document.getElementById("add-task-button");
const taskList = document.getElementById("task-list");

// Load tasks from Local Storage
let tasks = JSON.parse(localStorage.getItem("tasks")) || [];

// Function to update the task list in the DOM
function renderTasks() {
    taskList.innerHTML = "";
    tasks.forEach((task, index) => {
        const li = document.createElement("li");
        li.textContent = task.text;
        li.className = task.completed ? "completed" : "";

        // Mark task as completed when clicked
        li.addEventListener("click", () => {
            task.completed = !task.completed;
            saveTasks();
            renderTasks();
        });

        // Button to delete task
        const deleteButton = document.createElement("button");
        deleteButton.textContent = "Delete";
        deleteButton.addEventListener("click", (e) => {
            e.stopPropagation(); // Prevent it from being marked as completed
            tasks.splice(index, 1);
            saveTasks();
            renderTasks();
        });

        li.appendChild(deleteButton);
        taskList.appendChild(li);
    });
}

// Save tasks to Local Storage
function saveTasks() {
    localStorage.setItem("tasks", JSON.stringify(tasks));
}

// Add new task
addTaskButton.addEventListener("click", () => {
    const taskText = taskInput.value.trim();
    if (taskText) {
        tasks.push({ text: taskText, completed: false });
        taskInput.value = "";
        saveTasks();
        renderTasks();
    }
});

// Render tasks on page load
renderTasks();

Explanation of the JavaScript

DOM References: References to HTML elements are obtained.
Load Tasks: Tasks are loaded from Local Storage, or an empty array is initialized if there are no saved tasks.
Render Tasks: A function that updates the task list in the interface.
Save Tasks: Tasks are saved in Local Storage to preserve them.
Add New Tasks: Logic is defined to add a new task when the button is clicked.

4. Test the Application

Once you have followed the above steps, open index.html in your browser. You should be able to add tasks, mark them as completed, and delete them. The tasks will remain in Local Storage, so they will persist even if you refresh the page or close the browser.

Conclusion

Creating a "To Do" list with HTML, CSS, and JavaScript is an ideal project for beginners and a great way to practice. This project not only enhances your programming skills but also provides you with a useful tool for staying organized.

With this guide, you are ready to start building your own web applications and continually improve your development skills. Happy coding!