Complete Web Designing Course for Beginners

Lesson 7.5 – To-Do List Project

🚀 Building a Task Management Application Using HTML, CSS & JavaScript

🎯 Learning Objectives

After completing this lesson, students will be able to:

✅ Build a To-Do List Application

✅ Add Tasks Dynamically

✅ Delete Tasks

✅ Use Arrays

✅ Use DOM Manipulation

✅ Handle User Events

✅ Build Real-World Productivity Applications

📖 Introduction

Every day we have tasks to complete.

Examples:

✔ Complete Assignment

✔ Attend Class

✔ Practice Coding

✔ Submit Project

Managing tasks manually can be difficult.

Modern applications like:

✅ Google Tasks

✅ Microsoft To Do

✅ Notion

✅ Trello

help users manage tasks.

Today we will build:

✅ To-Do List Application

🌟 Project Preview

------------------------

TO-DO LIST

[ Enter Task ]

[ Add Task ]

------------------------

✔ Complete Homework

✔ Learn JavaScript

✔ Practice Coding

❌ Delete

------------------------

🎯 Concepts Used

Concept	Used
Variables	✅
Arrays	✅
Functions	✅
Events	✅
DOM Manipulation	✅
Loops	✅

🗂️ Project Files

Create:

index.html

style.css

script.js

🎯 Step 1 – Create HTML Structure

index.html

<!DOCTYPE html>

<html>

<head>

<title>To-Do List</title>

<link rel="stylesheet" href="style.css">

</head>

<body>

<div class="container">

<h1>To-Do List</h1>

<input type="text"

id="taskInput"

placeholder="Enter Task">

<button onclick="addTask()">

Add Task

</button>

<ul id="taskList">

</ul>

</div>

<script src="script.js"></script>

</body>

</html>

🌟 Understanding HTML

Input Box:

<input type="text" id="taskInput">

Used to enter tasks.

Button:

<button onclick="addTask()">

Adds a task.

Task Area:

<ul id="taskList">

Displays all tasks.

🎯 Step 2 – Design the Project

style.css

body{

font-family:Arial;

background:#f4f4f4;

display:flex;

justify-content:center;

align-items:center;

height:100vh;

}

.container{

background:white;

padding:30px;

width:400px;

border-radius:10px;

box-shadow:0 0 15px lightgray;

text-align:center;

}

input{

padding:10px;

width:250px;

font-size:16px;

}

button{

padding:10px 15px;

background:#0d6efd;

color:white;

border:none;

border-radius:5px;

cursor:pointer;

}

button:hover{

background:#084298;

}

ul{

list-style:none;

padding:0;

}

li{

padding:10px;

margin-top:10px;

background:#f1f1f1;

border-radius:5px;

display:flex;

justify-content:space-between;

align-items:center;

}

🎯 Step 3 – Create Task Array

script.js

let tasks = [];

🌟 Why Use an Array?

Array stores all tasks.

Example:

tasks =

[
"Homework",

"Coding",

"Project"
];

🎯 Step 4 – Create Add Task Function

function addTask()
{

}

🌟 Get User Input

let task =

document.getElementById("taskInput").value;

Example:

Complete Homework

🎯 Validate Input

if(task == "")
{

alert("Please Enter Task");

return;

}

🌟 Add Task to Array

tasks.push(task);

Example:

Before:

Homework
Coding

After:

Homework
Coding
Project

🎯 Display Tasks

Create function:

function displayTasks()
{

}

🌟 Get Task List Area

let taskList =

document.getElementById("taskList");

🌟 Clear Existing List

taskList.innerHTML = "";

Prevents duplicate display.

🎯 Loop Through Tasks

for(let i = 0; i < tasks.length; i++)
{

}

Access each task.

🌟 Create List Item

let li =

document.createElement("li");

Set Task Text

li.innerHTML = tasks[i];

Add To List

taskList.appendChild(li);

🎯 Complete Display Function

function displayTasks()
{

let taskList =

document.getElementById("taskList");

taskList.innerHTML = "";

for(let i = 0; i < tasks.length; i++)
{

let li =

document.createElement("li");

li.innerHTML = tasks[i];

taskList.appendChild(li);

}

}

🌟 Update addTask()

function addTask()
{

let task =

document.getElementById("taskInput").value;

if(task == "")
{

alert("Please Enter Task");

return;

}

tasks.push(task);

displayTasks();

document.getElementById("taskInput").value = "";

}

🎯 Add Delete Button

Create button dynamically.

let deleteButton =

document.createElement("button");

Set Text

deleteButton.innerHTML = "Delete";

🌟 Delete Function

deleteButton.onclick = function()
{

deleteTask(i);

};

🎯 Create deleteTask()

function deleteTask(index)
{

tasks.splice(index,1);

displayTasks();

}

🌟 What is splice()?

Removes array items.

Example:

tasks.splice(1,1);

Before:

Homework

Coding

Project

After:

Homework

Project

🎯 Complete Display Function

function displayTasks()
{

let taskList =

document.getElementById("taskList");

taskList.innerHTML = "";

for(let i = 0; i < tasks.length; i++)
{

let li =

document.createElement("li");

li.innerHTML = tasks[i];

let deleteButton =

document.createElement("button");

deleteButton.innerHTML = "Delete";

deleteButton.onclick = function()
{

deleteTask(i);

};

li.appendChild(deleteButton);

taskList.appendChild(li);

}

}

💻 Complete Project Code

script.js

let tasks = [];

function addTask()
{

let task =

document.getElementById("taskInput").value;

if(task == "")
{

alert("Please Enter Task");

return;

}

tasks.push(task);

displayTasks();

document.getElementById("taskInput").value = "";

}

function displayTasks()
{

let taskList =

document.getElementById("taskList");

taskList.innerHTML = "";

for(let i = 0; i < tasks.length; i++)
{

let li =

document.createElement("li");

li.innerHTML = tasks[i];

let deleteButton =

document.createElement("button");

deleteButton.innerHTML = "Delete";

deleteButton.onclick = function()
{

deleteTask(i);

};

li.appendChild(deleteButton);

taskList.appendChild(li);

}

}

function deleteTask(index)
{

tasks.splice(index,1);

displayTasks();

}

🎯 Expected Output

User Enters:

Learn JavaScript

Clicks:

Add Task

Output:

Learn JavaScript    Delete

User Clicks:

Delete

Task disappears.

🌟 Project Improvements

Add:

✅ Task Completion Checkbox

✅ Edit Task Button

✅ Task Counter

✅ Save Tasks in Browser

✅ Dark Mode

🏫 Real World Applications

To-Do Lists are used in:

✅ Task Managers

✅ Project Management Tools

✅ Student Portals

✅ Office Applications

✅ Productivity Apps

✅ Mobile Applications

⚠️ Common Beginner Mistakes

Mistake 1

Forgetting displayTasks()

Task added but not shown.

Mistake 2

Wrong ID Name

taskInput

must match HTML.

Mistake 3

Forgetting splice()

Delete button will not work.

🌟 Best Practices

✅ Validate Input

✅ Use Arrays Properly

✅ Keep Functions Small

✅ Separate HTML, CSS, and JavaScript

✅ Test Add/Delete Features

🏆 Project Challenge

Modify the project and add:

✅ Complete Task Checkbox

✅ Edit Task Button

✅ Task Counter

✅ Current Date

✅ Local Storage Support

📝 Practical Activity

Create:

Student Daily Planner

Features:

Add Task
Delete Task
Mark Complete
Task Counter

📋 Assignment

Assignment 7.5

What is a To-Do List?
Why is an Array used?
What does push() do?
What does splice() do?
Create a To-Do List project.
Add a Delete Button.
Add a Task Counter.

🧠 Quiz

Q1. Which data structure stores tasks?

A. Function

B. Array

C. Event

D. Loop

✅ Answer: B

Q2. Which method adds an item to an array?

A. add()

B. push()

C. insert()

D. create()

✅ Answer: B

Q3. Which method removes an item from an array?

A. delete()

B. pop()

C. splice()

D. remove()

✅ Answer: C

Q4. To-Do List mainly uses?

A. DOM Manipulation

B. Arrays

C. Functions

D. All of These

✅ Answer: D

Q5. Which button removes a task?

A. Add

B. Edit

C. Delete

D. Save

✅ Answer: C

📌 Lesson Summary

✅ Built a complete To-Do List application.

✅ Learned how to store tasks in arrays.

✅ Used push() and splice().

✅ Applied DOM Manipulation.

✅ Created a real-world productivity application.