Todo List App Using JavaScript
Last Updated : 06 Feb, 2025
This To-Do List app helps users manage tasks with features like adding, editing, and deleting tasks. By building it, you'll learn about DOM manipulation, localStorage integration, and basic JavaScript event handling.
What We Are Going To Create
We are creating a Todo application where
- Users can add, edit (toggle between "Edit" and "Save"), and delete tasks dynamically.
- Tasks are stored in local Storage for persistence, and the layout is responsive across devices.
- Custom CSS with hover effects and animations ensures a sleek, user-friendly experience.
Project Preview
JavaScript Project on Todo ListTodo List App - HTML and CSS code
This HTML structure creates the basic layout for a to-do list app, providing an input field for new tasks, an "Add" button, and a container to display the task list.
HTML <html> <head> <style> body { font-family: 'Arial', sans-serif; background: linear-gradient(135deg, #f06, #4a90e2); display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; color: #fff; } .container { background: rgba(255, 255, 255, 0.1); padding: 2rem; border-radius: 15px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); width: 100%; max-width: 400px; } input[type="text"] { width: calc(100% - 100px); padding: 0.8rem; border-radius: 8px; border: none; outline: none; font-size: 1rem; margin-right: 1rem; box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); } button { padding: 0.8rem 1rem; border-radius: 8px; border: none; background: #ff6b6b; color: #fff; font-size: 1rem; cursor: pointer; transition: background 0.3s; } button:hover { background: #ff4757; } .todo { background: rgba(255, 255, 255, 0.2); border-radius: 8px; margin-top: 1rem; display: flex; justify-content: space-between; align-items: center; padding: 0.8rem; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); transition: transform 0.2s, background 0.3s; } .todo:hover { transform: translateY(-3px); background: rgba(255, 255, 255, 0.3); } .task { flex: 1; font-size: 1rem; cursor: pointer; } .delete, .edit { cursor: pointer; transition: transform 0.2s, color 0.3s; } .delete:hover { transform: scale(1.1); color: #ff4757; } .edit:hover { transform: scale(1.1); color: #1e90ff; } svg { fill: currentColor; } </style> </head> <body> <div class="container"> <input type="text" placeholder="Add a new task..."> <button>Add</button> <div id="task-list"></div> </div> </body> </html> In this example
- A text input field and an "Add" button allow users to enter new tasks, all centered within a visually appealing gradient background.
- Tasks are displayed in rounded, shadowed containers, with hover effects that slightly lift the task and change its background for a dynamic feel.
- The edit and delete icons have color transitions and scaling effects, making interactions intuitive and visually responsive for better usability.
Todo List App - JavaScript code
This JavaScript code handles the functionality of the to-do list app, including adding tasks, editing, deleting, and saving them in the browser's local storage.
JavaScript let inputs = document.querySelector('input'); let btn = document.querySelector('button'); let taskList = document.getElementById('task-list'); let task = []; let localstoragedata = localStorage.getItem("task array"); if (localstoragedata != null) { let ogdata = JSON.parse(localstoragedata); task = ogdata; maketodo(); } btn.addEventListener("click", function() { let query = inputs.value; inputs.value = ""; if (query.trim() === "") { alert("no value entered"); throw new Error("empty input field error"); } let taskObj = { id: Date.now(), text: query } task.push(taskObj); localStorage.setItem("task array", JSON.stringify(task)); maketodo(); }); function maketodo() { taskList.innerHTML = ""; for (let i = 0; i < task.length; i++) { let { id, text } = task[i]; let element = document.createElement('div'); element.innerHTML = ` <span class="task" contenteditable="false">${text}</span> <button class='edit'>Edit</button> <span class="delete"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M17 6H22V8H20V21C20 21.5523 19.5523 22 19 22H5C4.44772 22 4 21.5523 4 21V8H2V6H7V3C7 2.44772 7.44772 2 8 2H16C16.5523 2 17 2.44772 17 3V6ZM18 8H6V20H18V8ZM13.4142 13.9997L15.182 15.7675L13.7678 17.1817L12 15.4139L10.2322 17.1817L8.81802 15.7675L10.5858 13.9997L8.81802 12.232L10.2322 10.8178L12 12.5855L13.7678 10.8178L15.182 12.232L13.4142 13.9997ZM9 4V6H15V4H9Z"></path></svg></span> `; let delbtn = element.querySelector('.delete'); let editbtn = element.querySelector('.edit'); let taskText = element.querySelector('.task'); // Delete Task delbtn.addEventListener("click", function() { let filteredarray = task.filter(function(taskobj) { return taskobj.id != id; }); task = filteredarray; localStorage.setItem("task array", JSON.stringify(task)); taskList.removeChild(element); }); // Edit Task editbtn.addEventListener("click", function() { if (editbtn.innerText === 'Edit') { taskText.setAttribute('contenteditable', 'true'); // Enable editing taskText.focus(); // Focus on the text to start editing editbtn.innerText = 'Save'; // Change button text to 'Save' } else { taskText.setAttribute('contenteditable', 'false'); // Disable editing let updatedText = taskText.innerText.trim(); if (updatedText !== "") { task = task.map(function(taskobj) { if (taskobj.id === id) { taskobj.text = updatedText; } return taskobj; }); localStorage.setItem("task array", JSON.stringify(task)); } editbtn.innerText = 'Edit'; // Change button text back to 'Edit' } }); element.classList.add('todo'); taskList.appendChild(element); } } In this example
- Selects the input field, button, and task list; retrieves stored tasks from localStorage and populates the task array.
- Reads and trims input, creates a task object, updates localStorage, and re-renders tasks; shows an alert for empty input.
- Uses the maketodo function to generate a styled task list with text, edit, and delete buttons.
- Removes the task from the task array, updates localStorage, and deletes it from the DOM.
- Toggles between "Edit" and "Save", allows inline text editing, updates localStorage, and refreshes the task list.
Complete code
HTML <html> <head> <style> body { font-family: 'Arial', sans-serif; background: linear-gradient(135deg, #f06, #4a90e2); display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; color: #fff; } .container { background: rgba(255, 255, 255, 0.1); padding: 2rem; border-radius: 15px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); width: 100%; max-width: 400px; } input[type="text"] { width: calc(100% - 100px); padding: 0.8rem; border-radius: 8px; border: none; outline: none; font-size: 1rem; margin-right: 1rem; box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); } button { padding: 0.8rem 1rem; border-radius: 8px; border: none; background: #ff6b6b; color: #fff; font-size: 1rem; cursor: pointer; transition: background 0.3s; } button:hover { background: #ff4757; } .todo { background: rgba(255, 255, 255, 0.2); border-radius: 8px; margin-top: 1rem; display: flex; justify-content: space-between; align-items: center; padding: 0.8rem; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); transition: transform 0.2s, background 0.3s; } .todo:hover { transform: translateY(-3px); background: rgba(255, 255, 255, 0.3); } .task { flex: 1; font-size: 1rem; cursor: pointer; } .delete, .edit { cursor: pointer; transition: transform 0.2s, color 0.3s; } .delete:hover { transform: scale(1.1); color: #ff4757; } .edit:hover { transform: scale(1.1); color: #1e90ff; } svg { fill: currentColor; } </style> </head> <body> <div class="container"> <input type="text" placeholder="Add a new task..."> <button>Add</button> <div id="task-list"></div> </div> <script> let inputs = document.querySelector('input'); let btn = document.querySelector('button'); let taskList = document.getElementById('task-list'); let task = []; let localstoragedata = localStorage.getItem("task array"); if (localstoragedata != null) { let ogdata = JSON.parse(localstoragedata); task = ogdata; maketodo(); } btn.addEventListener("click", function () { let query = inputs.value; inputs.value = ""; if (query.trim() === "") { alert("no value entered"); throw new Error("empty input field error"); } let taskObj = { id: Date.now(), text: query } task.push(taskObj); localStorage.setItem("task array", JSON.stringify(task)); maketodo(); }); function maketodo() { taskList.innerHTML = ""; for (let i = 0; i < task.length; i++) { let { id, text } = task[i]; let element = document.createElement('div'); element.innerHTML = ` <span class="task" contenteditable="false">${text}</span> <button class='edit'>Edit</button> <span class="delete"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M17 6H22V8H20V21C20 21.5523 19.5523 22 19 22H5C4.44772 22 4 21.5523 4 21V8H2V6H7V3C7 2.44772 7.44772 2 8 2H16C16.5523 2 17 2.44772 17 3V6ZM18 8H6V20H18V8ZM13.4142 13.9997L15.182 15.7675L13.7678 17.1817L12 15.4139L10.2322 17.1817L8.81802 15.7675L10.5858 13.9997L8.81802 12.232L10.2322 10.8178L12 12.5855L13.7678 10.8178L15.182 12.232L13.4142 13.9997ZM9 4V6H15V4H9Z"></path></svg></span> `; let delbtn = element.querySelector('.delete'); let editbtn = element.querySelector('.edit'); let taskText = element.querySelector('.task'); delbtn.addEventListener("click", function () { let filteredarray = task.filter(function (taskobj) { return taskobj.id != id; }); task = filteredarray; localStorage.setItem("task array", JSON.stringify(task)); taskList.removeChild(element); }); editbtn.addEventListener("click", function () { if (editbtn.innerText === 'Edit') { taskText.setAttribute('contenteditable', 'true'); // Enable editing taskText.focus(); // Focus on the text to start editing editbtn.innerText = 'Save'; // Change button text to 'Save' } else { taskText.setAttribute('contenteditable', 'false'); // Disable editing let updatedText = taskText.innerText.trim(); if (updatedText !== "") { task = task.map(function (taskobj) { if (taskobj.id === id) { taskobj.text = updatedText; } return taskobj; }); localStorage.setItem("task array", JSON.stringify(task)); } editbtn.innerText = 'Edit'; // Change button text back to 'Edit' } }); element.classList.add('todo'); taskList.appendChild(element); } } </script> </body> </html> Similar Reads
Todo list app using Flask | Python There are many frameworks that allow building your webpage using Python, like Django, flask, etc. Flask is a web application framework written in Python. Flask is based on WSGI(Web Server Gateway Interface) toolkit and Jinja2 template engine. Its modules and libraries that help the developer to writ
3 min read
Todo List Application using MERN Todo list web application using MERN stack is a project that basically implements basic CRUD operation using MERN stack (MongoDB, Express JS, Node JS, React JS). The users can read, add, update, and delete their to-do list in the table using the web interface. The application gives a feature to the
8 min read
Movie Search Application using JavaScript In this article, we are going to make a movie search application using JavaScript. It will use an API which is a RESTful web service to obtain movie information. We will be using HTML to structure our project, CSS for designing purposes and JavaScript will be used to provide the required functionali
4 min read
Todo List CLI application using Node.js CLI is a very powerful tool for developers. We will be learning how to create a simple Todo List application for command line. We have seen TodoList as a beginner project in web development and android development but a CLI app is something we don't often hear about.Pre-requisites:A recent version o
13 min read
How to Create a Desktop App Using JavaScript? Building a JavaScript desktop application is possible using various frameworks and technologies. One popular approach is to use Electron, which is an open-source framework developed by GitHub. Electron allows you to build cross-platform desktop applications using web technologies such as HTML, CSS,
2 min read