Skip to content

Commit afa1005

Browse files
S-V-KarthigeyanS-V-Karthigeyan
authored
Add files via upload
1 parent 6449a50 commit afa1005

File tree

4 files changed

+260
-0
lines changed

4 files changed

+260
-0
lines changed

‎Task3/doodles.jpg‎

1.51 MB
Loading

‎Task3/index.html‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>OIBSIP - To-Do App</title>
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
<main>
11+
<h1>My To-Do List</h1>
12+
13+
<div id="add-task-section">
14+
<input type="text" id="new-task-input" placeholder="Add a new task" aria-label="New task">
15+
<button id="add-task-button">Add</button>
16+
</div>
17+
18+
<div id="pending-tasks-section">
19+
<h2>Pending Tasks</h2>
20+
<ul id="pending-tasks-list"></ul>
21+
</div>
22+
23+
<div id="completed-tasks-section">
24+
<h2>Completed Tasks</h2>
25+
<ul id="completed-tasks-list"></ul>
26+
</div>
27+
</main>
28+
29+
<script src="script.js"></script>
30+
</body>
31+
</html>

‎Task3/script.js‎

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
let tasks = [];
2+
let nextId = 1;
3+
4+
const newTaskInput = document.getElementById("new-task-input");
5+
const addTaskButton = document.getElementById("add-task-button");
6+
const pendingList = document.getElementById("pending-tasks-list");
7+
const completedList = document.getElementById("completed-tasks-list");
8+
9+
function formatDateTime(date) {
10+
return date.toLocaleString();
11+
}
12+
function createTask(text) {
13+
return {
14+
id: nextId++,
15+
text,
16+
status: "pending",
17+
createdAt: new Date(),
18+
completedAt: null
19+
};
20+
}
21+
22+
function renderTasks() {
23+
pendingList.innerHTML = "";
24+
completedList.innerHTML = "";
25+
26+
tasks.forEach(task => {
27+
const li = document.createElement("li");
28+
if (task.status === "completed") {
29+
li.classList.add("completed");
30+
}
31+
32+
const mainDiv = document.createElement("div");
33+
mainDiv.className = "task-main";
34+
35+
const titleSpan = document.createElement("span");
36+
titleSpan.className = "task-title";
37+
titleSpan.textContent = task.text;
38+
39+
const metaSpan = document.createElement("span");
40+
metaSpan.className = "task-meta";
41+
let metaText = "Created: " + formatDateTime(task.createdAt);
42+
if (task.completedAt) {
43+
metaText += " • Completed: " + formatDateTime(task.completedAt);
44+
}
45+
metaSpan.textContent = metaText;
46+
mainDiv.appendChild(titleSpan);
47+
mainDiv.appendChild(metaSpan);
48+
const actionsDiv = document.createElement("div");
49+
actionsDiv.className = "task-actions";
50+
const toggleBtn = document.createElement("button");
51+
toggleBtn.textContent = task.status === "pending" ? "Complete" : "Pending";
52+
toggleBtn.addEventListener("click", () => toggleTaskStatus(task.id));
53+
const editBtn = document.createElement("button");
54+
editBtn.textContent = "Edit";
55+
editBtn.addEventListener("click", () => editTask(task.id));
56+
const deleteBtn = document.createElement("button");
57+
deleteBtn.textContent = "Delete";
58+
deleteBtn.addEventListener("click", () => deleteTask(task.id));
59+
actionsDiv.appendChild(toggleBtn);
60+
actionsDiv.appendChild(editBtn);
61+
actionsDiv.appendChild(deleteBtn);
62+
li.appendChild(mainDiv);
63+
li.appendChild(actionsDiv);
64+
65+
if (task.status === "pending") {
66+
pendingList.appendChild(li);
67+
} else {
68+
completedList.appendChild(li);
69+
}
70+
});
71+
}
72+
function addTask() {
73+
const text = newTaskInput.value.trim();
74+
if (!text) return;
75+
const task = createTask(text);
76+
tasks.push(task);
77+
newTaskInput.value = "";
78+
renderTasks();
79+
}
80+
function toggleTaskStatus(id) {
81+
const task = tasks.find(t => t.id === id);
82+
if (!task) return;
83+
if (task.status === "pending") {
84+
task.status = "completed";
85+
task.completedAt = new Date();
86+
} else {
87+
task.status = "pending";
88+
task.completedAt = null;
89+
}
90+
renderTasks();
91+
}
92+
function editTask(id) {
93+
const task = tasks.find(t => t.id === id);
94+
if (!task) return;
95+
const newText = prompt("Edit task:", task.text);
96+
if (newText === null) return;
97+
const trimmed = newText.trim();
98+
if (!trimmed) return;
99+
task.text = trimmed;
100+
renderTasks();
101+
}
102+
function deleteTask(id) {
103+
tasks = tasks.filter(t => t.id !== id);
104+
renderTasks();
105+
}
106+
addTaskButton.addEventListener("click", addTask);
107+
newTaskInput.addEventListener("keyup", event => {
108+
if (event.key === "Enter") {
109+
addTask();
110+
}
111+
});

‎Task3/style.css‎

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
* {
2+
box-sizing: border-box;
3+
}
4+
5+
body {
6+
margin: 0;
7+
padding: 0;
8+
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
9+
background-image: url(doodles.jpg);
10+
background-position: center;
11+
color: #302d2d;
12+
}
13+
14+
main {
15+
max-width: 600px;
16+
margin: 40px auto;
17+
padding: 24px;
18+
background-color: rgb(255, 255, 255,0.88);
19+
border: 2px solid black;
20+
border-radius: 15px;
21+
box-shadow: 0 2px 8px rgba(48, 48, 48, 0.08);
22+
}
23+
24+
h1 {
25+
margin-top: 0;
26+
margin-bottom: 16px;
27+
text-align: center;
28+
}
29+
30+
h2 {
31+
margin-top: 24px;
32+
margin-bottom: 8px;
33+
font-size: 1.1rem;
34+
}
35+
36+
#add-task-section {
37+
display: flex;
38+
gap: 8px;
39+
margin-bottom: 16px;
40+
}
41+
42+
#new-task-input {
43+
flex: 1;
44+
padding: 8px 10px;
45+
border: 2px solid black;
46+
border-radius: 15px;
47+
font: inherit;
48+
}
49+
50+
#add-task-button {
51+
padding: 8px 14px;
52+
border: none;
53+
border-radius: 9px;
54+
background-color: #ebb025;
55+
color: #ffffff;
56+
font: inherit;
57+
cursor: pointer;
58+
}
59+
60+
#add-task-button:hover {
61+
background-color: #d8a31d;
62+
}
63+
64+
section ul {
65+
list-style: none;
66+
margin: 0;
67+
padding: 0;
68+
}
69+
70+
section ul li {
71+
display: flex;
72+
align-items: center;
73+
justify-content: space-between;
74+
gap: 8px;
75+
padding: 8px 10px;
76+
margin-bottom: 6px;
77+
border: 1px solid #e5e7eb;
78+
border-radius: 4px;
79+
background-color: #f9fafb;
80+
}
81+
82+
.task-main {
83+
flex: 1;
84+
}
85+
86+
.task-title {
87+
display: block;
88+
font-size: 0.95rem;
89+
margin-bottom: 2px;
90+
}
91+
92+
.task-meta {
93+
font-size: 0.75rem;
94+
color: #6b7280;
95+
}
96+
97+
.task-actions {
98+
display: flex;
99+
gap: 4px;
100+
}
101+
102+
.task-actions button {
103+
padding: 4px 8px;
104+
border: 1px solid #d1d5db;
105+
border-radius: 4px;
106+
background-color: #ffffff;
107+
font-size: 0.75rem;
108+
cursor: pointer;
109+
}
110+
111+
.task-actions button:hover {
112+
background-color: #e5e7eb;
113+
}
114+
115+
.completed .task-title {
116+
text-decoration: line-through;
117+
color: #6b7280;
118+
}

0 commit comments

Comments
 (0)