JavaScript/lesson-04/TodoList.html at main · deep100x/JavaScript · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<!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>
		<style>
			body {
				font-family: Arial, sans-serif;
				background-color: #f4f4f4;
				margin: 0;
				padding: 0;
			}
			.container {
				max-width: 400px;
				margin: 0 auto;
				padding: 20px;
				background-color: #fff;
				box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
				border-radius: 5px;
			}
			h1 {
				text-align: center;
				color: #333;
			}
			.input-container {
				display: flex;
				margin-top: 20px;
			}
			input[type="text"] {
				flex-grow: 1;
				padding: 10px;
				border: 1px solid #ccc;
				border-radius: 5px;
				font-size: 16px;
			}
			button#addTask {
				background-color: #007bff;
				color: #fff;
				border: none;
				border-radius: 5px;
				padding: 10px 20px;
				font-size: 16px;
				margin-left: 10px;
				cursor: pointer;
			}
			ul {
				list-style: none;
				padding: 0;
			}
			li {
				display: flex;
				justify-content: space-between;
				align-items: center;
				background-color: #fff;
				border: 1px solid #ccc;
				border-radius: 5px;
				padding: 10px;
				margin-top: 10px;
			}
			button.delete {
				background-color: #ff4500;
				color: #fff;
				border: none;
				border-radius: 5px;
				padding: 5px 10px;
				font-size: 14px;
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<h1>To-Do List</h1>
			<div class="input-container">
				<input type="text" id="task" placeholder="Add a new task" />
				<button id="addTask">Add</button>
			</div>
			<ul id="taskList">
				<!-- 🟨Tasks🟨 -->
			</ul>
		</div>

		<script>
			//🟨 Get elements from the DOM

			const taskInput = document.getElementById("task")
			const addTaskButton = document.getElementById("addTask")
			const taskList = document.getElementById("taskList")

			//🟨 Add task to the list

			//🟨Add a task to the list
			function addTask() {
				const taskText = taskInput.value.trim()
				if (taskText !== "") {
					//🟨Create a new list ittem
					const listItem = document.createElement("li")
					listItem.innerHTML = `
                        <span>${taskText}</span>
                        <button class="delete">Delete</button>
                    `

					//🟨Add the list item to the task list
					taskList.appendChild(listItem)

					//🟨Clear the input field
					taskInput.value = ""

					//🟨Add event listener to the delete button
					const deleteButton = listItem.querySelector(".delete")
					deleteButton.addEventListener("click", function () {
						listItem.remove()
					})
				}
			}

			//🟨Add event listener to the "Add" button
			addTaskButton.addEventListener("click", addTask)

			//🟨Handle Enter key press in the input
			taskInput.addEventListener("keydown", function (event) {
				if (event.key === "Enter") {
					addTask()
				}
			})
		</script>
	</body>
</html>