-
Notifications
You must be signed in to change notification settings - Fork 1
/
app.js
145 lines (123 loc) · 3.57 KB
/
app.js
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
137
138
139
140
141
142
143
144
145
// membuat book class: merepesantasikan sebuah buku
class Book {
// init
constructor(title, author, isbn)
{
this.title = title;
this.author = author;
this.isbn = isbn;
}
}
// UI class: menangani tugas UI
class UI {
static displayBooks()
{
const books = Store.getBooks();
// looping data lalu memanggil method ini kedalam UI class
// untuk menampilkan data-nya dihalaman web.
books.map((book) => UI.addBookToList(book));
}
static addBookToList(book) {
// ketika method ini dipanggil. lalu akan memanipulasi table
// yang sudah dibuat
const list = document.querySelector('#book-list');
// membuat row table
const row = document.createElement('tr');
// membuat kolom dan menampilkan data
row.innerHTML = `
<td>${book.title}</td>
<td>${book.author}</td>
<td>${book.isbn}</td>
<td><a href='#' class="btn btn-danger btn-sm delete">X</a></td>
`;
list.appendChild(row);
}
static showAlert(message, className)
{
const div = document.createElement('div');
div.className = `alert alert-${className}`;
div.appendChild(document.createTextNode(message));
const container = document.querySelector('.container');
const form = document.querySelector('#book-form');
container.insertBefore(div, form);
setTimeout(() => document.querySelector('.alert').remove(), 1500);
}
static removeBook(el) {
if(el.classList.contains('delete'))
{
el.parentElement.parentElement.remove();
}
}
static clearFields() {
document.querySelector('#title').value = '';
document.querySelector('#author').value = '';
document.querySelector('#isbn').value = '';
}
}
// Store class: menangani Penyimpanan
class Store {
static getBooks() {
let books;
if(localStorage.getItem('books') === null)
{
books = [];
} else
{
books = JSON.parse(localStorage.getItem('books'));
}
return books;
}
static addBook(book) {
const books = Store.getBooks();
books.push(book);
localStorage.setItem('books', JSON.stringify(books));
}
static removeBook(isbn) {
const books = Store.getBooks();
books.map((book, index) => {
if(book.isbn === isbn)
{
books.splice(index, 1);
}
});
localStorage.setItem('books', JSON.stringify(books));
}
}
// Event: menampilkan daftar buku
document.addEventListener('DOMContentLoaded', UI.displayBooks);
// Event: menambah sebuah daftar buku
document.querySelector('#book-form')
.addEventListener('submit', (e) => {
// Prevent actual submit
e.preventDefault();
// mengambil nilai di form
const title = document.querySelector('#title').value;
const author = document.querySelector('#author').value;
const isbn = document.querySelector('#isbn').value;
// validasi
if (title === '' || author === '' || isbn === '')
{
UI.showAlert('Mohon bidang form harap diisi!', 'danger');
} else
{
// instatiate class of Book
const book = new Book(title, author, isbn);
// add Book to UI
UI.addBookToList(book);
// add Book to store
Store.addBook(book);
// show succes message
UI.showAlert('Daftar buku berhasil ditambahkan', 'success');
// clear fields
UI.clearFields(book);
}
});
// Event: menghapus daftar buku
document.querySelector('#book-list')
.addEventListener('click', (e) => {
UI.removeBook(e.target)
Store.removeBook(
e.target.parentElement.previousElementSibling.textContent
);
UI.showAlert('Daftar buku berhasil dihapus', 'success')
})