This content originally appeared on DEV Community and was authored by s mathavi
In this blog, we’ll build a modern To-Do App where you can add tasks, edit them, delete them, and even store them in your browser using local Storage so they don’t disappear when you refresh the page.
HTML Structure
<div class="container">
<input type="text" placeholder="Add a new task...">
<button>Add</button>
<div id="task-list"></div>
</div>
- I wrapped everything inside a .container.
- Inside it, I have:
- An input box where users type their task.
- An Add button to submit the task.
- A
<div id="task-list">where all tasks will appear dynamically.
CSS Styling
- I added CSS to make the app look modern:
- Background Gradient →
linear-gradient(135deg, #f06, #4a90e2) - Glass Effect Container →
background: rgba(255, 255, 255, 0.1); border-radius: 15px; - Hover Animations → Tasks slightly move up and change background on hover.
- Buttons → Rounded with color transitions on hover.
- This makes the app look clean and interactive. JavaScript Functionality
1. Selecting Elements
let inputs = document.querySelector('input');
let btn = document.querySelector('button');
let taskList = document.getElementById('task-list');
let task = [];
I selected the input, button, and task list. Also, I created an empty array task to store all tasks.
2. Loading from Local Storage
let localstoragedata = localStorage.getItem("task array");
if (localstoragedata != null) {
let ogdata = JSON.parse(localstoragedata);
task = ogdata;
maketodo();
}
Here, I checked if there’s already a saved task list in localStorage. If yes, I load it back into my task array and call maketodo()to display them.
3. Adding a Task
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();
});
Steps:
- Get the text from the input.
- Clear the input box.
- Check if it’s empty → if yes, alert the user.
- Create a task object with a unique id using
Date.now(). - Push it into the array.
- Save the updated array into
localStorage. - Call
maketodo()to update the UI.
4. Displaying Tasks (maketodo function)
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"> </span>
`;
This function:
- Clears the task list (taskList.innerHTML = "").
- Loops through the array of tasks.
- Creates a new for each task with:
- A showing the task text.
- An Edit button.
- A Delete button (x).
5. Deleting a 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);
});
When delete is clicked:
- I use filter() to remove that task by id.
- Update the array and save it back to localStorage.
- Remove the element from the DOM. 6. Editing a Task
editbtn.addEventListener("click", function() {
if (editbtn.innerText === 'Edit') {
taskText.setAttribute('contenteditable', 'true');
taskText.focus();
editbtn.innerText = 'Save';
} else {
taskText.setAttribute('contenteditable', 'false');
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';
}
});
Explanation:
- If button says Edit, make the text editable and switch button text to Save.
- If button says Save, disable editing and update the text in the array + localStorage.
What I Learned
- How to use querySelector, addEventListener, and createElement.
- How to handle CRUD (Create, Read, Update, Delete) operations in JavaScript.
- How to store and retrieve data from localStorage.
- How to make the UI look professional using CSS hover effects.
output:
!~~~ I really enjoyed making this project because I Learned Many JavaScript logic and CSS styling.~~~!
Thanks for reading, and I’ll be back with another project soon.
See you soon!
This content originally appeared on DEV Community and was authored by s mathavi
s mathavi | Sciencx (2025-08-28T14:30:42+00:00) Build a Stylish To-Do App with JavaScript (with Local Storage. Retrieved from https://www.scien.cx/2025/08/28/build-a-stylish-to-do-app-with-javascript-with-local-storage/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.