Skip to content

Commit e784c31

Browse files
Anujit1Anujit1
committed
added project ToDo
1 parent 661fee0 commit e784c31

File tree

3 files changed

+177
-0
lines changed

3 files changed

+177
-0
lines changed

‎ToDo/index.html‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
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>Dark Mode To-Do List</title>
7+
<link rel="stylesheet" href="styles.css" />
8+
</head>
9+
<body>
10+
<div class="container">
11+
<h1>To-Do List</h1>
12+
<div class="input-container">
13+
<input type="text" id="todo-input" placeholder="Add a new task..." />
14+
<button id="add-task-btn">Add Task</button>
15+
</div>
16+
<ul id="todo-list"></ul>
17+
</div>
18+
<script src="script.js"></script>
19+
</body>
20+
</html>

‎ToDo/script.js‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
document.addEventListener('DOMContentLoaded', () => {
2+
const input_btn = document.querySelector("#add-task-btn");
3+
const addItem = document.querySelector("#todo-list");
4+
const input = document.querySelector("#todo-input");
5+
6+
let tasks = JSON.parse(localStorage.getItem('tasks')) || [];
7+
8+
tasks.forEach(task => renderTask(task));
9+
10+
input_btn.addEventListener('click', function(){
11+
const taskText = input.value.trim();
12+
13+
if(taskText === "") return;
14+
15+
const newTask = {
16+
id: Date.now(),
17+
text: taskText,
18+
complete: false
19+
}
20+
21+
tasks.push(newTask);
22+
saveTask();
23+
renderTask(newTask);
24+
input.value = "";
25+
});
26+
27+
function renderTask(task){
28+
console.log(tasks);
29+
const li = document.createElement('li');
30+
li.setAttribute('data-id', task.id);
31+
32+
if(task.complete){
33+
li.classList.add('completed');
34+
}
35+
li.innerHTML = `
36+
<span>${task.text}</span>
37+
<button>Delete</button>
38+
`;
39+
40+
li.addEventListener('click', (e) => {
41+
if(e.target.tagName === 'BUTTON'){
42+
return;
43+
}
44+
task.completed = !task.completed;
45+
li.classList.toggle("completed");
46+
saveTask();
47+
});
48+
49+
50+
li.querySelector('button').addEventListener('click', (e) => {
51+
e.stopPropagation();
52+
tasks = tasks.filter(t => t.id !== task.id);
53+
li.remove();
54+
saveTask();
55+
});
56+
57+
addItem.appendChild(li);
58+
}
59+
60+
function saveTask(){
61+
localStorage.setItem('tasks', JSON.stringify(tasks));
62+
}
63+
});

‎ToDo/styles.css‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
/* styles.css */
2+
* {
3+
margin: 0;
4+
padding: 0;
5+
box-sizing: border-box;
6+
}
7+
8+
body {
9+
font-family: Arial, sans-serif;
10+
background-color: #121212;
11+
color: #ffffff;
12+
display: flex;
13+
justify-content: center;
14+
align-items: center;
15+
height: 100vh;
16+
}
17+
18+
.container {
19+
background-color: #1e1e1e;
20+
padding: 20px;
21+
border-radius: 10px;
22+
width: 300px;
23+
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
24+
}
25+
26+
h1 {
27+
text-align: center;
28+
margin-bottom: 20px;
29+
font-size: 24px;
30+
}
31+
32+
.input-container {
33+
display: flex;
34+
justify-content: space-between;
35+
margin-bottom: 20px;
36+
}
37+
38+
input[type="text"] {
39+
width: 70%;
40+
padding: 10px;
41+
background-color: #333333;
42+
border: none;
43+
border-radius: 5px;
44+
color: #fff;
45+
outline: none;
46+
}
47+
48+
button {
49+
width: 25%;
50+
padding: 10px;
51+
background-color: #6200ea;
52+
border: none;
53+
border-radius: 5px;
54+
color: #fff;
55+
cursor: pointer;
56+
transition: background-color 0.3s;
57+
}
58+
59+
button:hover {
60+
background-color: #3700b3;
61+
}
62+
63+
ul {
64+
list-style-type: none;
65+
padding: 0;
66+
}
67+
68+
li {
69+
background-color: #333333;
70+
padding: 10px;
71+
margin-bottom: 10px;
72+
border-radius: 5px;
73+
display: flex;
74+
justify-content: space-between;
75+
align-items: center;
76+
}
77+
78+
li.completed {
79+
text-decoration: line-through;
80+
opacity: 0.7;
81+
}
82+
83+
li button {
84+
background-color: #d32f2f;
85+
border: none;
86+
padding: 5px;
87+
color: white;
88+
border-radius: 5px;
89+
cursor: pointer;
90+
}
91+
92+
li button:hover {
93+
background-color: #b71c1c;
94+
}

0 commit comments

Comments
 (0)