Skip to content

Commit bb606b0

Browse files
MOHAMMED-FARHANUDDINMOHAMMED-FARHANUDDIN
authored
Add files via upload
0 parents  commit bb606b0

File tree

3 files changed

+278
-0
lines changed

3 files changed

+278
-0
lines changed

‎index.html‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Advanced TODO App</title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
11+
<div class="container">
12+
13+
<div class="top-bar">
14+
<h1>TODO App</h1>
15+
<button id="darkToggle" onclick="toggleDarkMode()">🌙</button>
16+
</div>
17+
18+
<div class="input-area">
19+
<input type="text" id="taskName" placeholder="Enter task...">
20+
<input type="date" id="taskDate">
21+
<button onclick="addTask()">Add</button>
22+
</div>
23+
24+
<div class="controls">
25+
<input type="text" id="searchBar" placeholder="Search tasks..." oninput="loadTasks()">
26+
27+
<select id="filter" onchange="loadTasks()">
28+
<option value="all">All</option>
29+
<option value="pending">Pending</option>
30+
<option value="completed">Completed</option>
31+
</select>
32+
33+
<select id="sort" onchange="loadTasks()">
34+
<option value="none">Sort</option>
35+
<option value="oldest">Oldest → Newest</option>
36+
<option value="newest">Newest → Oldest</option>
37+
</select>
38+
</div>
39+
40+
<table>
41+
<thead>
42+
<tr>
43+
<th>#</th>
44+
<th>Task</th>
45+
<th>Date</th>
46+
<th>Status</th>
47+
<th>Action</th>
48+
</tr>
49+
</thead>
50+
<tbody id="taskTable"></tbody>
51+
</table>
52+
</div>
53+
54+
<script src="script.js"></script>
55+
</body>
56+
</html>

‎script.js‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
let tasks = JSON.parse(localStorage.getItem("tasks")) || [];
2+
3+
function saveTasks() {
4+
localStorage.setItem("tasks", JSON.stringify(tasks));
5+
}
6+
7+
// Add task
8+
function addTask() {
9+
let name = document.getElementById("taskName").value;
10+
let date = document.getElementById("taskDate").value;
11+
12+
if (name === "" || date === "") {
13+
alert("Enter task & date!");
14+
return;
15+
}
16+
17+
tasks.push({ name, date, status: "Pending" });
18+
saveTasks();
19+
20+
document.getElementById("taskName").value = "";
21+
document.getElementById("taskDate").value = "";
22+
23+
loadTasks();
24+
}
25+
26+
// Mark complete
27+
function completeTask(i) {
28+
tasks[i].status = "Completed";
29+
saveTasks();
30+
loadTasks();
31+
}
32+
33+
// Delete
34+
function deleteTask(i) {
35+
tasks.splice(i, 1);
36+
saveTasks();
37+
loadTasks();
38+
}
39+
40+
// Edit
41+
function editTask(i) {
42+
let newName = prompt("Enter new task name:", tasks[i].name);
43+
let newDate = prompt("Enter new date (YYYY-MM-DD):", tasks[i].date);
44+
45+
if (newName && newDate) {
46+
tasks[i].name = newName;
47+
tasks[i].date = newDate;
48+
saveTasks();
49+
loadTasks();
50+
}
51+
}
52+
53+
// Filters + Search + Sorting
54+
function loadTasks() {
55+
let table = document.getElementById("taskTable");
56+
let filter = document.getElementById("filter").value;
57+
let search = document.getElementById("searchBar").value.toLowerCase();
58+
let sort = document.getElementById("sort").value;
59+
60+
let list = tasks.filter(t => {
61+
if (filter === "pending" && t.status !== "Pending") return false;
62+
if (filter === "completed" && t.status !== "Completed") return false;
63+
if (!t.name.toLowerCase().includes(search)) return false;
64+
return true;
65+
});
66+
67+
if (sort === "oldest") {
68+
list.sort((a, b) => a.date.localeCompare(b.date));
69+
} else if (sort === "newest") {
70+
list.sort((a, b) => b.date.localeCompare(a.date));
71+
}
72+
73+
table.innerHTML = "";
74+
75+
list.forEach((task, i) => {
76+
table.innerHTML += `
77+
<tr>
78+
<td>${i + 1}</td>
79+
<td>${task.name}</td>
80+
<td>${task.date}</td>
81+
<td class="${task.status === 'Completed' ? 'status-completed' : 'status-pending'}">${task.status}</td>
82+
<td>
83+
<button class="action-btn complete-btn" onclick="completeTask(${i})">✔</button>
84+
<button class="action-btn edit-btn" onclick="editTask(${i})">✏️</button>
85+
<button class="action-btn delete-btn" onclick="deleteTask(${i})">🗑</button>
86+
</td>
87+
</tr>
88+
`;
89+
});
90+
}
91+
92+
// Dark Mode
93+
function toggleDarkMode() {
94+
document.body.classList.toggle("dark");
95+
}
96+
97+
loadTasks();

‎style.css‎

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
body {
2+
margin: 0;
3+
font-family: Arial, sans-serif;
4+
background: #f4f4f4;
5+
transition: 0.3s;
6+
}
7+
8+
body.dark {
9+
background: #1e1e1e;
10+
color: white;
11+
}
12+
13+
.container {
14+
width: 90%;
15+
max-width: 800px;
16+
background: white;
17+
margin: 40px auto;
18+
padding: 25px;
19+
border-radius: 12px;
20+
box-shadow: 0px 4px 15px rgba(0,0,0,0.1);
21+
transition: 0.3s;
22+
}
23+
24+
body.dark .container {
25+
background: #2b2b2b;
26+
}
27+
28+
.top-bar {
29+
display: flex;
30+
justify-content: space-between;
31+
align-items: center;
32+
}
33+
34+
#darkToggle {
35+
padding: 8px 12px;
36+
border-radius: 8px;
37+
border: none;
38+
font-size: 18px;
39+
cursor: pointer;
40+
}
41+
42+
.input-area {
43+
display: flex;
44+
gap: 10px;
45+
margin: 20px 0;
46+
}
47+
48+
input, button, select {
49+
padding: 10px;
50+
font-size: 16px;
51+
border-radius: 6px;
52+
border: 2px solid #ddd;
53+
}
54+
55+
button {
56+
background: #4a90e2;
57+
color: white;
58+
cursor: pointer;
59+
border: none;
60+
}
61+
62+
button:hover {
63+
background: #1473e6;
64+
}
65+
66+
.controls {
67+
display: flex;
68+
gap: 10px;
69+
margin-bottom: 20px;
70+
}
71+
72+
table {
73+
width: 100%;
74+
border-collapse: collapse;
75+
}
76+
77+
th {
78+
background: #4a90e2;
79+
color: white;
80+
padding: 10px;
81+
}
82+
83+
td {
84+
padding: 12px;
85+
border-bottom: 1px solid #ddd;
86+
}
87+
88+
.status-pending {
89+
color: #cc7a00;
90+
font-weight: bold;
91+
}
92+
93+
.status-completed {
94+
color: #2e8b57;
95+
font-weight: bold;
96+
}
97+
98+
.action-btn {
99+
padding: 6px 10px;
100+
border-radius: 5px;
101+
color: white;
102+
border: none;
103+
cursor: pointer;
104+
}
105+
106+
.complete-btn { background: #2e8b57; }
107+
.edit-btn { background: #ffc107; color: black; }
108+
.delete-btn { background: #d9534f; }
109+
110+
tr {
111+
animation: fadeIn 0.4s ease;
112+
}
113+
114+
@keyframes fadeIn {
115+
from { opacity: 0; transform: translateY(5px); }
116+
to { opacity: 1; transform: translateY(0); }
117+
}
118+
119+
/* Dark mode table */
120+
body.dark th {
121+
background: #111;
122+
}
123+
body.dark td {
124+
border-bottom: 1px solid #444;
125+
}

0 commit comments

Comments
 (0)