How to Build a Functional To-Do List App with JavaScript, HTML, and CSS: A Step-by-Step Guide
Tags: beginners, learning, webdev, javascript
Published: 2023-09-19 09:46:03

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**

```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>

```

**Step 2: Styling with CSS (styles.css)**

```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;
}

```

**Step 3: Adding JavaScript Logic (app.js)**

```Javascript
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");
    });
}

```

**Step 4: Testing Your To-Do List**
Now, open the `HTML `file 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](https://www.linkedin.com/in/matthew-odumosu/)
`Twitter Account `: [Twitter](https://twitter.com/iamcymentho)
**Credit**: Graphics sourced from [Coding Artist](https://codingartistweb.com/2021/02/simple-to-do-list-javscript-javascript-project/)