-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
62 lines (48 loc) · 1.7 KB
/
index.html
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
<html>
<head>
<title>web journey with usirin</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1 style="color: blue">Todos.app</h1>
<p style="color: blue">usirin's todo page</p>
<hr />
<form id="add-todo-form" class="bg-orange">
<label for="add-todo-input-id">Add todo</label>
<input id="add-todo-input-id" type="text" name="q" />
<button id="add-todo-button" type="submit">Submit</button>
</form>
<h2>todos</h2>
<ul id="todo-list"></ul>
<script type="text/javascript">
const addTodoForm = document.getElementById("add-todo-form");
const addTodoInput = document.getElementById("add-todo-input-id");
const addTodoButton = document.getElementById("add-todo-button");
function clickEventListener(event) {
console.log("click", event);
}
addTodoButton.addEventListener("click", clickEventListener);
function changeFormBackground(bgColor) {
addTodoForm.style.backgroundColor = bgColor;
}
addTodoForm.addEventListener("submit", formEventListener);
const todoList = document.getElementById("todo-list");
console.log(todoList);
function formEventListener(event) {
event.preventDefault();
console.log("form", event);
const li = document.createElement("li");
const button = document.createElement("button");
button.append("X");
const removeLi = function () {
li.remove();
};
button.addEventListener("click", removeLi);
li.append(addTodoInput.value);
li.appendChild(button);
todoList.appendChild(li);
addTodoInput.value = "";
}
</script>
</body>
</html>