๐ Project 2: To-Do List Application Beginner to Intermediate
A To-Do List Application is one of the most common interview and portfolio projects because it teaches you how to build interactive web applications using JavaScript.
Unlike a static website, users can add, edit, delete, and manage tasks, making it a great project for learning real-world frontend development.
๐ฏ Project Goal
Build a responsive task management application where users can:
โ Add tasks
โ๏ธ Edit tasks
โ Delete tasks
โ Mark tasks as completed
๐ Search tasks
๐ Filter tasks All, Active, Completed
๐พ Save tasks using Local Storage
๐ฑ Mobile Responsive Design
๐ Technologies Used
Frontend
HTML5, CSS3, JavaScript ES6
Optional
React, Bootstrap / Tailwind CSS
๐ Project Folder Structure
todo-app/
โโโ index.html
โโโ style.css
โโโ script.js
โโโ icons/
๐จ Application Layout
My To-Do List
+-----------------------------+
| Enter a new task |
+-----------------------------+
[ Add Task ]
โ Learn HTML
โ Practice CSS
โ Build Portfolio Website
โ Learn JavaScript
All | Active | Completed
๐ Features
โ Add Task
Users can type a task and click the Add Task button.
Example HTML:
Add Task
โ Display Task List
Each task will be added dynamically using JavaScript.
โ Add Task Using JavaScript
const addBtn = document.getElementById("addBtn");
const taskInput = document.getElementById("taskInput");
const taskList = document.getElementById("taskList");
addBtn.addEventListener("click", () => {
const task = taskInput.value;
if(task === "") return;
const li = document.createElement("li");
li.textContent = task;
taskList.appendChild(li);
taskInput.value = "";
});
โ Delete Task
Each task should have a Delete button.
Example:
โข
Learn JavaScript
Delete
โ Mark Task as Completed
Example JavaScript
li.addEventListener("click", () => {
li.classList.toggle("completed");
});
Example CSS
.completed {
text-decoration: line-through;
opacity: .6;
}
โ Edit Task
Allow users to update an existing task.
Example:
const updatedTask = prompt("Edit task:");
if(updatedTask) {
li.firstChild.textContent = updatedTask;
}
โ Search Tasks
Filter tasks based on the entered keyword.
โ Filter Tasks
Create three buttons: All, Active, Completed
Users can switch between: All Tasks, Completed Tasks, Pending Tasks
โ Save Tasks in Local Storage
localStorage.setItem("tasks", JSON.stringify(tasks));
Load tasks when the page opens.
const savedTasks = JSON.parse(localStorage.getItem("tasks"));
This ensures tasks remain available even after refreshing the browser.
๐จ CSS Example
body {
font-family: Arial;
background: #f4f4f4;
}
.todo-container {
max-width: 500px;
margin: auto;
padding: 20px;
}
button {
padding: 10px;
cursor: pointer;
}
๐ฑ Responsive Design
@media(max-width:768px) {
.todo-container {
width: 90%;
}
}