Repository navigation
Expand file tree
/
Copy pathahmadk-simple-todolist.html
More file actions
79 lines (67 loc) · 1.65 KB
/
Copy pathahmadk-simple-todolist.html
File metadata and controls
79 lines (67 loc) · 1.65 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Simple To do List By AhmadK powered by JS</title>
<style>
table,
th,
td {
text-align: center;
border: 1px solid black;
}
th,
td {
padding: 10px;
}
</style>
</head>
<body>
<fieldset>
<legend>Add To Do</legend>
<input type="text" name="todo" />
<input type="button" onclick="addtodo()" value="Add" />
</fieldset>
<br />
<table id="list-todo">
</table>
<script>
let datatodo = [
"Coding",
"Drink Coffe",
"Sleep"
];
function showtodo() {
let listtodo = document.getElementById("list-todo");
listtodo.innerHTML = "<thead><tr><th>No</th><th>To Do List</th><th>Action</th></tr></thead>";
let no = 1;
for (let i = 0; i < datatodo.length; i++) {
let btnHapus = "<a href='#' onclick='deletetodo(" + i + ")'>Delete</a>";
listtodo.innerHTML += "<tr><td>" + no + "</td><td>" + datatodo[i] + "</td><td>[" + btnHapus + "]</td></tr>";
no++;
}
}
function addtodo() {
let input = document.querySelector("input[name=todo]");
if (input.value == "") {
window.alert("cannot add empty todo");
} else {
datatodo.push(input.value);
showtodo();
}
}
function deletetodo(id) {
let yakin = confirm("are you sure?");
if (yakin) {
datatodo.splice(id, 1);
showtodo();
} else {
showtodo();
}
}
showtodo();
</script>
</body>
</html>