DEV Community

Cover image for How to Build a Functional To-Do List App with JavaScript, HTML, and CSS: A Step-by-Step Guide
Odumosu Matthew
Odumosu Matthew

Posted on

How to Build a Functional To-Do List App with JavaScript, HTML, and CSS: A Step-by-Step Guide

Creating a simple To-Do List application using JavaScript, HTML, and CSS is a great way to learn the basics of web development. In this comprehensive guide, we'll walk through the entire process step by step, including every line of code needed. By the end, you'll have a functional To-Do List app that you can use as a foundation for more complex web projects.

Prerequisites

Before we begin, ensure you have a code editor (like Visual Studio Code) and a web browser (like Chrome) installed on your computer.

Step 1: Setting Up the HTML

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

Enter fullscreen mode Exit fullscreen mode

Step 2: Styling with CSS (styles.css)

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

.container {
    max-width: 400px;
    margin: 0 auto;
    background-color: #fff;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

h1 {
    text-align: center;
}

.input-container {
    display: flex;
    margin-bottom: 20px;
}

input[type="text"] {
    flex: 1;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
}

button {
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

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

li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 10px;
    margin-bottom: 10px;
    background-color: #fff;
}

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

Enter fullscreen mode Exit fullscreen mode

Step 3: Adding JavaScript Logic (app.js)

const taskInput = document.getElementById("task");
const addBtn = document.getElementById("add");
const taskList = document.getElementById("taskList");

// Add task
addBtn.addEventListener("click", () => {
    const taskText = taskInput.value.trim();
    if (taskText !== "") {
        createTask(taskText);
        taskInput.value = "";
    }
});

// Create a new task
function createTask(text) {
    const taskItem = document.createElement("li");
    taskItem.innerHTML = `
        <span>${text}</span>
        <button class="delete">Delete</button>
    `;
    taskList.appendChild(taskItem);

    // Delete task
    const deleteBtn = taskItem.querySelector(".delete");
    deleteBtn.addEventListener("click", () => {
        taskItem.remove();
    });

    // Mark as completed
    taskItem.addEventListener("click", () => {
        taskItem.classList.toggle("completed");
    });
}

Enter fullscreen mode Exit fullscreen mode

Step 4: Testing Your To-Do List
Now, open the HTMLfile in your web browser. You'll see a simple To-Do List application with the ability to add tasks, mark them as completed, and delete them.

Congratulations! You've successfully created a basic To-Do List app using HTML, CSS, and JavaScript. You can further enhance this app by adding features like task persistence, due dates, and categories to make it even more functional and appealing.

LinkedIn Account : LinkedIn
Twitter Account: Twitter
Credit: Graphics sourced from Coding Artist

Top comments (2)

Collapse
 
kamelak profile image
Kamel

this is greatđź‘Ť, and we can also add animation to it for make it more lively.

Collapse
 
iamcymentho profile image
Odumosu Matthew

Absolutely! Adding animations can make your To-Do List app even more engaging and visually appealing. It can give your users a smoother and more enjoyable experience while using the app.