Todo List Application Using HTML CSS & JavaScript | JavaScript Project Tutorial

Learn how to add, delete, and manage tasks with a simple and responsive UI. Perfect JavaScript project for beginners with full source code.

Todo List Application Using HTML CSS & JavaScript | JavaScript Project Tutorial

What is a Todo List Application?

In Today's life we all need a application that can manage simple Task and have simple functionality like add, update and delete daily task. So we create A Todo List Application is a simple task management tool that allows users to add, manage, and delete their daily tasks in one place. It helps people stay organized and keep track of what they need to do. In this project we build a fully functional Todo List with a clean and responsive user interface using HTML, CSS and JavaScript. Users can type a task, add it to the list, mark it as completed, and delete it when done. All tasks are saved in the browser local storage so they remain even after the page is refreshed.

This Todo List Application is built using HTML, CSS, and JavaScript to demonstrate how task management works in a real frontend project. The application allows users to add tasks, delete tasks, and organize daily activities through a clean and interactive user interface. It showcases essential JavaScript concepts such as DOM manipulation, event handling, and dynamic content updates. At the end of this project you can do crud operation with better understanding.

This project is usefull for developers and beginners who want to strengthen their understanding of JavaScript projects, frontend development, and interactive web applications.This is one of the most beginner friendly JavaScript projects that helps you understand how to work with DOM manipulation, event listeners, crud operation and local storage in a practical way. Whether you are a student learning web development or a developer who wants to strengthen JavaScript fundamentals, this project will give you hands on experience that you can also add to your portfolio. By building a todo list app using HTML, CSS, and JavaScript, developers can learn how user actions are handled in real applications and how simple logic can be transformed into a practical productivity tool.

Steps to Create a Todo List Application Using HTML, CSS & JavaScript:

Follow these simple steps to build a Todo List App using HTML, CSS, and JavaScript:

Create a folder with any name, for example, todo-list-app.
Inside the folder, create two files: index.html, style.css.
In the index.html file, add the basic HTML structure for the Todo application, including an input field, add button, and task list container and also right javascript code in it with script tag.

                            
                                <!DOCTYPE html>

<!-- TheProviders ----------------- youtube.com/@TheProvidersOfficial -->

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Todo List Application</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

        <div class="container">
            <h2>Todo List Management</h2>
            <div class="input-group">
                <input type="text" id="myinput" placeholder="Enter Task">
                <button onclick="insert()">Create</button>
                <div id="box"></div>
            </div>

            <span id="error"></span>
            <!-- list show  -->
            <ul id="list">

            </ul>
        </div>

        <script>

            const tasks = ['Social Media','Upload Video']

            const input = document.getElementById('myinput')
            const list = document.getElementById('list')
            const error = document.getElementById('error')
            const box = document.getElementById('box')
            // call function 
            renderTasks();
            // show tasks function 
            function renderTasks(){
                let html = '';
                tasks.forEach((item,index) => {
                    html += `
                        <li>${item}
                            <div>
                                <button onclick='editItem(${index})'>Edit</button>    
                                <button class='danger' onclick='deleteItem(${index})'>X</button>    
                            </div>
                            </li>
                    `;
                });
                list.innerHTML = html;
            }


            // insert new task 
            function insert(){
                if(input.value.trim() === ""){
                    error.innerHTML = 'Task is required';
                    return;
                }
                error.innerHTML = '';
                tasks.push(input.value.trim())
                input.value = ''
                // show all tasks 
                renderTasks();
            }

            // edit function 
            function editItem(index){
                input.value = tasks[index];
                box.innerHTML =  `<button onclick='updateItem(${index})'>Update</button>`
            }

            // update function 
            function updateItem(index){
                if(input.value.trim() === ""){
                    error.innerHTML = 'Task is required';
                    return
                }
                tasks[index] = input.value.trim();
                input.value = ''
                box.innerHTML = ''
                error.innerHTML = ''
                renderTasks();
            }

            // delete function 
            function deleteItem(index){
                tasks.splice(index,1)
                error.innerHTML = 'Task Deleted Successfully'
                renderTasks();
            }



        </script>
    
</body>

</html>

In your style.css file, style yourTodo List to make it responsive and visually appealing. Experiment with colors, fonts, and backgrounds to enhance the design.

                            
                                *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body{
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, #3066BE,#734d9a)
}
.container{
    width: 400px;
    background-color: #FBFFF1;
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}
.container h2{
    text-align: center;
    margin-bottom: 20px;
    color: #333;
}
.input-group{
    display: flex;
    gap: 10px;
}
#myinput{
    flex: 1;
    padding: 10px 12px;
    border-radius: 6px;
    border: 1px solid #ccc;
    outline: none;
    font-size: 14px;
}
#myinput:focus{
    border-color: #3066BE;
}
button{
    padding: 10px 14px;
    border: none;
    border-radius: 6px;
    background-color: #3066BE;
    color: white;
    font-size: 14px;
    cursor: pointer;
    transition: 0.3s;
}
button:hover{
    background-color: #5a67d8;
}
/* for delete button we create using JS  */
button.danger{
    background-color: #e53e3e;
}
button.danger:hover{
    background: #c53030;
}
/* for error message  */
#error{
    margin-top: 8px;
    font-size: 13px;
    color: #e53e3e;
    font-weight: bold;
}
ul{
    list-style: none;
    margin-top: 15px;
}
ul li{
    background: #f7f7f7;
    padding: 12px 10px;
    border-radius: 8px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: #333;
}

Download Code Files