-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathcrud_app.html
105 lines (93 loc) · 3.74 KB
/
crud_app.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
<!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>Todo App with CRUD functionality</title>
<style>
ul { padding: 0; }
li { display: flex; }
li span { width: 150px; word-break: break-all; }
img { height: 20px; margin-left: 8px; cursor: pointer; }
input { width: 150px; margin-right: 8px; }
input[type='checkbox'] { width: auto; }
</style>
</head>
<body>
<h1>Todos</h1>
<ul></ul>
<form><input><button>Add</button></form>
<!-- Load Gun, jQuery -->
<script src="https://cdn.jsdelivr.net/npm/gun/gun.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
// initialize 'todos' key in Gun db (Table)
var todos = Gun().get('todos')
// ------ Save a Todo to DB on form submit
$('form').on('submit', function (event) {
// get input value (Todo text)
var input = $('form').find('input')
// add new item to 'todos' where 'item' = input value (an 'id' is auto generated)
todos.set({title: input.val()})
// clear input
input.val('')
// stop page relaod
event.preventDefault()
})
// ------ Show Todos and listen for DB changes (add/edit/delete)
todos.map().on(function (todo, id) { // function is called 'ForEach' (todo, id) in DB
// check if there is already a 'li' with that id on page
var li = $('#' + id)
// if it doesn't exist, appen a new 'li' with that id to 'ul'
if (!li.get(0)) {
li = $('<li>').attr('id', id).appendTo('ul')
}
// add todo title to 'li' if any. trigger edit function on click
if (todo) {
// create a clickable span for editting text
var html = '<span onclick="clickTitle(this)">' + todo.title + '</span>'
// prepend a checkbox for setting the state
html = '<input type="checkbox" onclick="clickCheck(this)" ' + (todo.done ? 'checked' : '') + '>' + html
// append clickable img for deletion
html += '<img onclick="clickDelete(this)" src="https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/svgs/fi-x.svg"/>'
// add html to 'li'
li.html(html)
} else {
// remove 'li' from page
li.remove()
}
})
// ------ Enable Todo edit on Todo click
function clickTitle (element) { // element = <span>
// get the Todo <span> clicked
element = $(element)
// turn text into input for text edit, if not already an input (already clicked)
if (!element.find('input').get(0)) {
element.html('<input value="' + element.html() + '" onkeyup="keypressTitle(this)">')
}
}
// ------ Save Todo edit on 'Enter' release
function keypressTitle (element) { // element = <input>
// check if key released in 'Enter'
if (event.keyCode === 13) {
// in 'todos' where 'id' update 'title' to input value
// todos.get(id).put({title:text})
todos.get($(element).parent().parent().attr('id')).put({title: $(element).val()})
}
}
// ------ Enable Todo done state
function clickCheck (element) { // element = checkbox input
// in 'todos' where 'id' create/update 'done' to input checked value
// todos.get(id).put({done:true/false})
todos.get($(element).parent().attr('id')).put({done: $(element).prop('checked')})
}
// ------ Enable Todo deletion
function clickDelete (element) { // element = delete img
// in 'todos' where 'id' set 'null' (deletion in Gun db)
// todos.get(id).put({done:true/false})
todos.get($(element).parent().attr('id')).put(null)
}
</script>
</body>
</html>