To-Do List App Project | HTML, CSS & JavaScript

To-Do List App with HTML, CSS & JavaScript

10 DAYS 10 PROJECT CHALLENGE

Day #03

Project Overview

This project is a To-Do List App built using HTML, CSS, and JavaScript.
It allows users to add, mark complete, and delete tasks, while also storing them in the browser’s LocalStorage so tasks remain even after refreshing the page. The app is designed to be simple, modern, and responsive, making it a great beginner-friendly JavaScript project to learn arrays, event handling, DOM manipulation, and data persistence with LocalStorage.

Key Features

Add Tasks – Users can easily add new tasks to the list.
Mark Complete – Tasks can be marked as completed with a single click.
Delete Tasks – Remove tasks from the list instantly.
LocalStorage Support – Tasks are saved in the browser so they remain after refresh.
Responsive Design – Works smoothly on desktop, tablet, and mobile devices.

HTML Code

<!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="todo-container">
    <h1>To-Do List</h1>
    <div class="input-section">
      <input type="text" id="taskInput" placeholder="Enter a new task...">
      <button id="addTask">Add</button>
      <button id="clearAll">Clear All</button>

    </div>
    <ul id="taskList"></ul>
  </div>
  <script src="script.js"></script>
</body>
</html>

CSS Code

body {
  font-family: Arial, sans-serif;
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
  background: #002252;
}

.todo-container {
  background: #eea731;
  padding: 20px;
  border-radius: 12px;
  width: 400px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

h1 {
  text-align: center;
  margin-bottom: 20px;
}

.input-section {
  display: flex;
  gap: 10px;
}

#taskInput {
  flex: 1;
  padding: 10px;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 8px;
}

#addTask {
  padding: 10px 15px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.2s;
}

#clearAll {
  width: 100%;
  padding: 10px 15px;
  background: #dc3545;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.2s;
}
#clearAll:hover {
  background: #a71d2a;
}


#addTask:hover {
  background: #0056b3;
}

ul {
  list-style: none;
  padding: 0;
  margin-top: 20px;
}

li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f1f1f1;
  margin-bottom: 10px;
  padding: 10px;
  border-radius: 8px;
}

li.completed {
  text-decoration: line-through;
  color: gray;
}

button.delete {
  background: #dc3545;
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 6px;
  cursor: pointer;
}

button.delete:hover {
  background: #a71d2a;
}

Javascript Code

const taskInput = document.getElementById("taskInput");
const addTaskBtn = document.getElementById("addTask");
const taskList = document.getElementById("taskList");
const clearAllBtn = document.getElementById("clearAll");


let tasks = JSON.parse(localStorage.getItem("tasks")) || [];

// Render tasks
function renderTasks() {
  taskList.innerHTML = "";
  tasks.forEach((task, index) => {
    const li = document.createElement("li");
    li.className = task.completed ? "completed" : "";

    li.innerHTML = `
      <span>${task.text}</span>
      <div>
        <button onclick="toggleTask(${index})">✔</button>
        <button class="delete" onclick="deleteTask(${index})">✖</button>
      </div>
    `;

    taskList.appendChild(li);
  });
}

// Add task
addTaskBtn.addEventListener("click", () => {
  const text = taskInput.value.trim();
  if (text !== "") {
    tasks.push({ text, completed: false });
    localStorage.setItem("tasks", JSON.stringify(tasks));
    renderTasks();
    taskInput.value = "";
  }
});

// Toggle complete
function toggleTask(index) {
  tasks[index].completed = !tasks[index].completed;
  localStorage.setItem("tasks", JSON.stringify(tasks));
  renderTasks();
}

// Delete task
function deleteTask(index) {
  tasks.splice(index, 1);
  localStorage.setItem("tasks", JSON.stringify(tasks));
  renderTasks();
}
// Clear all task
clearAllBtn.addEventListener("click", () => {
  tasks = [];
  localStorage.removeItem("tasks");
  renderTasks();
});


// Initial render
renderTasks();