JavaScript To-Do List App (with Local Storage)

This project allows users to:

  • Add, delete, and mark tasks as complete
  • Automatically save tasks using localStorage
  • Maintain task data even after refreshing the browser


Folder Structure

todo-list-app/
├── index.html
├── style.css
└── script.js


1. HTML Structure (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>To-Do List App</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<h1>To-Do List</h1>
<div class="input-group">
<input type="text" id="taskInput" placeholder="Enter a new
 task..." />
<button onclick="addTask()">Add</button>
</div>
<ul id="taskList"></ul>
</div>
<script src="script.js"></script>
</body>
</html>


2. CSS Styling (style.css)

body {
font-family: 'Segoe UI', sans-serif;
background: #f0f2f5;
display: flex;
justify-content: center;
align-items: start;
padding: 50px;
min-height: 100vh;
}
.container {
background: white;
border-radius: 12px;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
padding: 30px 25px;
width: 100%;
max-width: 400px;
}
h1 {
text-align: center;
margin-bottom: 25px;
color: #333;
}
.input-group {
display: flex;
gap: 10px;
}
input[type=
"text"] {
flex: 1;
padding: 10px;
font-size: 1rem;
border: 1px solid #ccc;
border-radius: 6px;
}
button {
background: #007bff;
color: white;
border: none;
padding: 10px 16px;
border-radius: 6px;
cursor: pointer;
}
button:hover {
background: #0056b3;
}
ul {
list-style-type: none;
padding: 0;
margin-top: 20px;
}
li {
background: #f8f9fa;
padding: 10px;
margin-bottom: 10px;
border-radius: 6px;
display: flex;
justify-content: space-between;
align-items: center;
}
li.completed span {
text-decoration: line-through;
color: #888;
}


3. JavaScript Logic (script.js)

const input = document.getElementById("taskInput");
const taskList = document.getElementById("taskList");
let tasks = JSON.parse(localStorage.getItem("tasks")) || [];
function renderTasks() {
taskList.innerHTML = "";
tasks.forEach((task, index) => {
const li = document.createElement("li");
li.className = task.completed ? "completed" : "";
li.innerHTML =`
<span onclick="toggleComplete(${index})">${task.text}</span>
<button onclick="deleteTask(${index})"></button>
`;
taskList.appendChild(li);
});
}
function addTask() {
const text = input.value.trim();
if (text) {
tasks.push({ text, completed: false });
input.value = "";
saveTasks();
renderTasks();
}
}
function toggleComplete(index) {
tasks[index].completed = !tasks[index].completed;
saveTasks();
renderTasks();
}
function deleteTask(index) {
tasks.splice(index, 1);
saveTasks();
renderTasks();
}
function saveTasks() {
localStorage.setItem("tasks"
, JSON.stringify(tasks));
}
renderTasks();
_todo