-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
136 lines (112 loc) · 4.49 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
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
130
131
132
133
134
135
136
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta nnhbame="viewport" content="width=device-width, initial-scale=1.0" />
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.21.0/firebase-app.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/7.21.0/firebase-database.js"></script>
<style>
@media only screen and (max-width: 1080px) {
.container {
width: 100%;
}
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
}
</style>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous" />
<title>To Do List</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col mt-5">
<h2 class="text-center">My To Do List</h2>
<div class="row">
<div class="col mt-5 d-flex align-justify-center">
<div class="input-group input-group-lg">
<div class="input-group">
</div>
<input type="text" class="form-control" aria-label="Sizing example input"
aria-describedby="inputGroup-sizing-lg" id="todo_text" />
<button onclick="handleTambah()" class="btn btn-outline-primary" type="button" id="button-addon1">Add To
Do List</button>
</div>
</div>
</div>
<div class="row mt-5">
<div class="col">
<div class="list-todo-group">
<div class="row" id="todolist">
</div>
<!-- <button type="button" class="list-group-item list-group-item-action">Dapibus ac facilisis in</button> -->
</div>
</div>
</div>
</div>
</div>
</div>
<script>
var firebaseConfig = {
apiKey: process.env.apikey,
authDomain: process.env.authdom,
databaseURL: process.env.databaseurl,
projectId: process.env.projectid,
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
const db = firebase.database();
const todosRef = db.ref('todo');
function handleTambah() {
let text = document.getElementById('todo_text').value
if (text) {
todosRef.push({ "todo": text, "status": 0 })
document.getElementById('todo_text').value = ''
}
}
todosRef.on('value', showData, Err)
function showData(items) {
let _content = ""
items.forEach((element) => {
if (element.val().status === 0) {
_content += '<div class="col-10 d-flex align-justify-center"> <button type="button" onclick="completeTask()" class="list-group-item list-group-item-action" id="' + element.key + '">' + element.val().todo +
'</button></div>' + `<div class="col"> <button onclick="deleteData()" class="btn btn-outline-warning" type="button" id="${element.key}">Delete</button> </div>`
}
else {
_content += '<div class="col-10 d-flex align-justify-center"> <button type="button" onclick="completeTask()" class="list-group-item list-group-item-action list-group-item-success" id="' + element.key + '">' + element.val().todo +
'</button></div>' + `<div class="col"> <button onclick="deleteData()" class="btn btn-outline-warning" type="button" id="${element.key}">Delete</button> </div>`
}
});
document.getElementById('todolist').innerHTML = _content
}
function Err(error) {
console.log(error)
}
function deleteData() {
let i = event.srcElement.id
// console.log(i);
todosRef.child(i).remove()
}
function completeTask() {
let el = event.srcElement.className
let _idt = event.srcElement.id
let text = event.srcElement.innerHTML
let editRef = todosRef.child(_idt)
if (el == 'list-group-item list-group-item-action') {
event.srcElement.className = 'list-group-item list-group-item-action list-group-item-success'
editRef.update({ 'todo': text, 'status': 1 })
}
else {
event.srcElement.className = 'list-group-item list-group-item-action'
editRef.update({ 'todo': text, 'status': 0 })
}
}
</script>
</body>
</html>