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

Trending Designs

Impressed by our work?

Hire us for exceptional web development services on Fiverr

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.

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

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.

This project is a great example for developers and beginners who want to strengthen their understanding of JavaScript projects, frontend development, and interactive web applications. 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