Simple To-Do List Using HTML, CSS & JavaScript

Beginner Friendly Task Manager Project

A Simple To-Do List is one of the best beginner-friendly projects to practice frontend development. In this tutorial, you will learn how to create a clean and interactive To-Do List using HTML, CSS, and JavaScript that allows users to add, delete, and manage daily tasks easily.

This project helps you understand DOM manipulation, event handling, and basic JavaScript logic in a practical way.

Tools & Resources That Support My Web Development Work

Discover the exact hardware and services I use daily — from laptops and keyboards to hosting and domains.

1. Video Tutorial – Simple To-Do List

If you prefer learning visually, you can follow the complete video tutorial where the To-Do List is built step by step using HTML, CSS, and JavaScript.

In the tutorial, you will learn:

Creating the task input layout
Styling the app using CSS
Writing JavaScript to manage tasks
Adding delete and complete functionality

2. HTML Structure – To-Do List Layout

The HTML structure includes:

Main container
Input field for adding new tasks
Add button
Task list section

The layout is kept simple and clean to focus on functionality.

👇 Place your complete HTML code below this section.

				
					<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Simple To-Do List | CodeByGaurav</title>
        <link rel="stylesheet" href="CodeByGaurav.css" />
        <link
            rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css"
        />
    </head>
    <body>
        <div class="container">
            <div id="newTask">
                <input type="text" placeholder="Task to be done.." />
                <button class="push">Add</button>
            </div>
            <div id="tasks">
                <!-- <div class="task">
                <span id="taskname">
                    html task
                </span>
                <button class="delete"><i class="fa-solid fa-trash"></i></button>
            </div> -->
            </div>
        </div>
    </body>
    <script src="script.js"></script>
</html>

3. CSS Styling – Clean and Minimal UI

CSS is used to:

Design the task container
Style buttons and input fields
Add hover effects
Create spacing and alignment
Make the layout responsive

A clean UI makes the app easy to use and visually appealing.

👇 Add your complete CSS code below this section.

				
					* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}

body{
    height: 100vh;
    background: #066acd;
}

.container{
    width: 40%;
    min-width: 450px;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    background: #fff;
    border-radius: 10px;
}

#newTask{
    position: relative;
    padding: 30px 20px;
}

#newTask input{
    width: 75%;
    height: 45px;
    font-size: 15px;
    border: 2px solid #d1d3d4;
    padding: 12px;
    color: #111;
    font-weight: 500;
    position: relative;
    border-radius: 5px;
}

#newTask input:focus{
    outline: none;
    border-color: #0d75ec;
}

#newTask button{
    position: relative;
    float: right;
    width: 20%;
    height: 45px;
    border-radius: 5px;
    font-weight: 500;
    font-size: 16px;
    background: #0d75ec;
    border: none;
    color: #fff;
    cursor: pointer;
    outline: none;
}

#tasks{
    background: #fff;
    padding: 30px 20px;
    margin-top: 10px;
    border-radius: 10px;
    width: 100%;
    position: relative;
}

.task{
    background: #c5e1e6;
    height: 50px;
    margin-bottom: 8px;
    padding: 5px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #939697;
    cursor: pointer;
    border-radius: 5px;
}
.task span{
    font-size: 15px;
    font-weight: 400;
}

.task button{
    background: #0a2ea4;
    color: #fff;
    height: 100%;
    width: 40px;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    outline: none;

}

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

4. JavaScript Logic – Making It Functional

JavaScript handles the core functionality:

Adding new tasks to the list
Deleting tasks
Marking tasks as completed
Updating the UI dynamically

👇 Insert your complete JavaScript code below this section.

				
					document.querySelector(".push").addEventListener("click", () => {

    if (document.querySelector("#newTask input").value.length == 0) {
        alert("Please Enter a Task")
    } else {

        document.querySelector("#tasks").innerHTML += `
        <div class="task">
                <span id="taskname">
                   ${document.querySelector("#newTask input").value.trim()}
                </span>
                <button class="delete"><i class="fa-solid fa-trash"></i></button>
            </div>
        `;

        let cTask = document.querySelectorAll(".delete");
        for(var i = 0; i < cTask.length; i++){
            cTask[i].onclick = function(){
                this.parentNode.remove();
            }
        }

        document.querySelector("#newTask input").value = "";

    }

})

5. Key Features of This Project

Add and delete tasks
Mark tasks as completed
Beginner-friendly code
Clean and modern UI
Fully responsive design

Conclusion

In this tutorial, you learned how to build a Simple To-Do List using HTML, CSS, and JavaScript. This project is perfect for beginners who want to strengthen their JavaScript basics and build interactive web applications.

Creating small but functional projects like this helps you gain confidence in frontend development and improves your portfolio quality.

Keep building and experimenting with new features 🚀