Group 4: To-Do List with Categories
Updated: 30 Jul 2026, 09:55:57
Project Name : To-Do List with Categories
Project Structure
To-Do-List-with-Categories/
│
├── index.html
├── style.css
├── script.js
├── storage.js
└── README.txtIncluded Features
- ✅ Add tasks
- ✅ Categorize tasks (Work, Study, Personal)
- ✅ Mark tasks as completed
- ✅ Delete tasks
- ✅ Search by task or category
- ✅ Data saved in Local Storage
- ✅ Pure HTML, CSS, and JavaScript
File 1: 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 with Categories</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="c">
<h1>📝 To-Do List with Categories</h1>
<form id="f">
<input
id="task"
type="text"
placeholder="Enter Task"
required>
<select id="cat">
<option>Work</option>
<option>Study</option>
<option>Personal</option>
</select>
<button type="submit">
Add Task
</button>
</form>
<input
id="search"
type="text"
placeholder="Search Task">
<ul id="list"></ul>
</div>
<!-- ===========================
OJT Trainees Section
============================ -->
<section class="ojt-section">
<h2>On Job Training Project Team</h2>
<p class="subtitle">
This project was successfully completed by the following ITI trainees
as part of their <strong>On Job Training (OJT)</strong>.
</p>
<div class="trainee-container">
<div class="trainee-card">
<h3>1. Rachit Prakash</h3>
<p>ITI Trainee</p>
</div>
<div class="trainee-card">
<h3>2. Tanu Rajput</h3>
<p>ITI Trainee</p>
</div>
<div class="trainee-card">
<h3>3. Shyam Mohan</h3>
<p>ITI Trainee</p>
</div>
<div class="trainee-card">
<h3>4. Sonveer</h3>
<p>ITI Trainee</p>
</div>
<div class="trainee-card">
<h3>5. Kishan Veer</h3>
<p>ITI Trainee</p>
</div>
</div>
</section>
<footer class="footer">
<p>
© 2026 To-Do List with Categories |
Developed during <strong>On Job Training (OJT)</strong>
</p>
</footer>
<script src="storage.js"></script>
<script src="script.js"></script>
</body>
</html>
File 2: style.css
File 2: style.css
body{font-family:Arial;background:#f5f5f5}.c{max-width:700px;margin:30px auto;background:#fff;padding:20px}input,select,button{padding:8px;margin:5px}li{display:flex;justify-content:space-between;border-bottom:1px solid #ddd;padding:8px}
/* ===========================
OJT Section
=========================== */
.ojt-section{
margin-top:50px;
padding:40px 20px;
background:#f7f9fc;
border-top:3px solid #1976d2;
text-align:center;
}
.ojt-section h2{
color:#1976d2;
margin-bottom:10px;
}
.subtitle{
color:#555;
margin-bottom:30px;
max-width:800px;
margin-left:auto;
margin-right:auto;
line-height:1.6;
}
.trainee-container{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:20px;
max-width:1100px;
margin:auto;
}
.trainee-card{
background:#ffffff;
padding:20px;
border-radius:10px;
box-shadow:0 4px 12px rgba(0,0,0,.1);
transition:.3s;
}
.trainee-card:hover{
transform:translateY(-5px);
box-shadow:0 8px 20px rgba(0,0,0,.15);
}
.trainee-card h3{
color:#1976d2;
margin-bottom:8px;
}
.trainee-card p{
color:#666;
}
.footer{
background:#1976d2;
color:#fff;
text-align:center;
padding:18px;
margin-top:40px;
}
.footer p{
margin:0;
}
@media(max-width:768px){
.ojt-section{
padding:30px 15px;
}
.subtitle{
font-size:15px;
}
}
File 3: script.js
// Load saved tasks
let todos = load();
/*====================================
Render To-Do List
====================================*/
const render = () => {
// Clear existing list
list.innerHTML = "";
// Search keyword
let q = search.value.toLowerCase();
// Filter and display tasks
todos
.filter(task =>
task.task.toLowerCase().includes(q) ||
task.cat.toLowerCase().includes(q)
)
.forEach((task, index) => {
list.innerHTML += `
<li>
<span>
<input
type="checkbox"
${task.done ? "checked" : ""}
onchange="tog(${index})">
${task.task}
<b>[${task.cat}]</b>
</span>
<button onclick="del(${index})">
Delete
</button>
</li>
`;
});
};
/*====================================
Add New Task
====================================*/
f.onsubmit = (e) => {
e.preventDefault();
todos.push({
task: task.value,
cat: cat.value,
done: false
});
save(todos);
f.reset();
render();
};
/*====================================
Search Tasks
====================================*/
search.oninput = render;
/*====================================
Delete Task
====================================*/
function del(index) {
todos.splice(index, 1);
save(todos);
render();
}
/*====================================
Toggle Complete / Incomplete
====================================*/
function tog(index) {
todos[index].done = !todos[index].done;
save(todos);
render();
}
/*====================================
Initial Load
====================================*/
render();
File 4: storage.js
/**
* Load all tasks from Local Storage
* Returns an empty array if no data exists.
*/
const load = () => {
return JSON.parse(
localStorage.getItem("todos") || "[]"
);
};
/**
* Save all tasks to Local Storage
* @param {Array} data
*/
const save = (data) => {
localStorage.setItem(
"todos",
JSON.stringify(data)
);
};
File 5: README.txt
Run with Live Server. HTML CSS JS LocalStorage.
About Author
Swarnim Raj
Author & Career Content Writer
Experienced education and career writer at Infokept Career Hub, creating simple, research-based guides for students and government job aspirants.