Skip to content

Commit 20a2ca1

Browse files
SazwanismailSazwanismail
authored
Create List 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</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <h1>To-Do List</h1> <form id="todo-form"> <input type="text" id="todo-input" placeholder="Add a new task..." required> <button type="submit">Add</button> </form> <ul id="todo-list"></ul> </div> <script src="script.js"></script> </body> </html>
1 parent 21441f7 commit 20a2ca1

File tree

1 file changed

+146
-0
lines changed

1 file changed

+146
-0
lines changed

‎List HTML‎

Lines changed: 146 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
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>To-Do List</title>
7+
<style>
8+
body {
9+
font-family: Arial, sans-serif;
10+
margin: 0;
11+
padding: 0;
12+
display: flex;
13+
justify-content: center;
14+
align-items: center;
15+
height: 100vh;
16+
background-color: #f4f4f9;
17+
}
18+
.container {
19+
background: #fff;
20+
padding: 20px;
21+
border-radius: 8px;
22+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
23+
width: 300px;
24+
}
25+
h1 {
26+
text-align: center;
27+
font-size: 24px;
28+
margin-bottom: 20px;
29+
}
30+
#taskInput {
31+
width: 100%;
32+
padding: 10px;
33+
margin-bottom: 10px;
34+
border: 1px solid #ddd;
35+
border-radius: 4px;
36+
}
37+
#addTaskBtn {
38+
width: 100%;
39+
padding: 10px;
40+
background-color: #007bff;
41+
color: #fff;
42+
border: none;
43+
border-radius: 4px;
44+
cursor: pointer;
45+
}
46+
#addTaskBtn:hover {
47+
background-color: #0056b3;
48+
}
49+
ul {
50+
list-style: none;
51+
padding: 0;
52+
}
53+
li {
54+
display: flex;
55+
justify-content: space-between;
56+
align-items: center;
57+
background: #f9f9f9;
58+
padding: 10px;
59+
border-radius: 4px;
60+
margin-bottom: 10px;
61+
border: 1px solid #ddd;
62+
}
63+
.delete-btn {
64+
background-color: #dc3545;
65+
color: #fff;
66+
border: none;
67+
padding: 5px 10px;
68+
border-radius: 4px;
69+
cursor: pointer;
70+
}
71+
.delete-btn:hover {
72+
background-color: #b02a37;
73+
}
74+
</style>
75+
</head>
76+
<body>
77+
<div class="container">
78+
<h1>To-Do List</h1>
79+
<input type="text" id="taskInput" placeholder="Add a new task..." />
80+
<button id="addTaskBtn">Add Task</button>
81+
<ul id="taskList"></ul>
82+
</div>
83+
84+
<script>
85+
// Select DOM elements
86+
const taskInput = document.getElementById('taskInput');
87+
const addTaskBtn = document.getElementById('addTaskBtn');
88+
const taskList = document.getElementById('taskList');
89+
90+
// Load tasks from localStorage on page load
91+
document.addEventListener('DOMContentLoaded', loadTasks);
92+
93+
// Add a new task
94+
addTaskBtn.addEventListener('click', () => {
95+
const task = taskInput.value.trim();
96+
if (task) {
97+
addTaskToUI(task);
98+
saveTaskToLocalStorage(task);
99+
taskInput.value = '';
100+
}
101+
});
102+
103+
// Delete a task
104+
taskList.addEventListener('click', (e) => {
105+
if (e.target.classList.contains('delete-btn')) {
106+
const taskItem = e.target.parentElement;
107+
const taskText = taskItem.firstChild.textContent;
108+
taskItem.remove();
109+
deleteTaskFromLocalStorage(taskText);
110+
}
111+
});
112+
113+
// Functions
114+
function addTaskToUI(task) {
115+
const li = document.createElement('li');
116+
li.textContent = task;
117+
const deleteBtn = document.createElement('button');
118+
deleteBtn.textContent = 'Delete';
119+
deleteBtn.classList.add('delete-btn');
120+
li.appendChild(deleteBtn);
121+
taskList.appendChild(li);
122+
}
123+
124+
function saveTaskToLocalStorage(task) {
125+
const tasks = getTasksFromLocalStorage();
126+
tasks.push(task);
127+
localStorage.setItem('tasks', JSON.stringify(tasks));
128+
}
129+
130+
function deleteTaskFromLocalStorage(task) {
131+
let tasks = getTasksFromLocalStorage();
132+
tasks = tasks.filter(t => t !== task);
133+
localStorage.setItem('tasks', JSON.stringify(tasks));
134+
}
135+
136+
function getTasksFromLocalStorage() {
137+
return JSON.parse(localStorage.getItem('tasks')) || [];
138+
}
139+
140+
function loadTasks() {
141+
const tasks = getTasksFromLocalStorage();
142+
tasks.forEach(addTaskToUI);
143+
}
144+
</script>
145+
</body>
146+
</html>

0 commit comments

Comments
 (0)