Advertisement
fikrii

Untitled

Aug 13th, 2022
68
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.40 KB | None | 0 0
  1. const STORAGE_KEY = "BOOK_APPS";
  2. var books = [];
  3.  
  4. function generateId() {
  5. return +new Date();
  6. }
  7.  
  8. function generateBookObject(id, title, author, year, isCompleted) {
  9. return {
  10. id, title, author, year, isCompleted
  11. }
  12. }
  13.  
  14. function isStorageExist() {
  15. if (typeof (Storage) === undefined) {
  16. alert('Browser kamu tidak mendukung local storage');
  17. return false;
  18. }
  19. return true;
  20. }
  21.  
  22. function saveData() {
  23. if (isStorageExist()) {
  24. const parsed = JSON.stringify(books);
  25. localStorage.setItem(STORAGE_KEY, parsed);
  26. document.dispatchEvent(new Event(SAVED_EVENT));
  27. }
  28. }
  29.  
  30. document.addEventListener(SAVED_EVENT, function () {
  31. console.log(localStorage.getItem(STORAGE_KEY));
  32. });
  33.  
  34. function loadDataFromStorage() {
  35. const serializedData = localStorage.getItem(STORAGE_KEY);
  36. let data = JSON.parse(serializedData);
  37.  
  38. if (data !== null) {
  39. for (const book of data) {
  40. books.push(book);
  41. }
  42. }
  43.  
  44. function updateDataToStorage() {
  45. if (isStorageExist()) saveData();
  46. }
  47.  
  48. document.dispatchEvent(new Event(RENDER_EVENT));
  49. }
  50.  
  51. function addBook() {
  52. const bookTitle = document.getElementById('inputBookTitle').value;
  53. const bookAuthor = document.getElementById('inputBookAuthor').value;
  54. const bookYear = document.getElementById('inputBookYear').value;
  55. const bookIsCompleted = document.getElementById('inputBookIsComplete').checked;
  56.  
  57. const generatedID = generateId();
  58. const bookObject = generateBookObject(generatedID, bookTitle, bookAuthor, bookYear, bookIsCompleted);
  59. books.push(bookObject);
  60.  
  61. document.dispatchEvent(new Event(RENDER_EVENT));
  62. saveData();
  63. }
  64.  
  65. function editBook(bookId) {
  66. const bookTarget = findBook(Number(bookId));
  67. if (bookTarget == null) return;
  68.  
  69. const editTitle = document.getElementById('editBookTitle').value;
  70. const editAuthor = document.getElementById('editBookAuthor').value;
  71. const editYear = document.getElementById('editBookYear').value;
  72. const isCompleted = document.getElementById('editBookIsComplete').checked;
  73.  
  74. bookTarget.title = editTitle;
  75. bookTarget.author = editAuthor;
  76. bookTarget.year = editYear;
  77. bookTarget.isCompleted = isCompleted;
  78.  
  79. document.dispatchEvent(new Event(RENDER_EVENT));
  80. saveData();
  81. }
  82.  
  83. const search = document.getElementById("searchBook");
  84. search.addEventListener("keyup",searchBook);
  85. function searchBook(element) {
  86. const cari = element.target.value.toLowerCase();
  87. let itemList = document.querySelectorAll(".book_item");
  88. itemList.forEach((item) => {
  89. const isi = item.firstChild.textContent.toLowerCase();
  90. if(isi.indexOf(cari) != -1) {
  91. item.setAttribute("style", "display: block;");
  92. } else {
  93. item.setAttribute("style", "display: none !important;");
  94. }
  95. });
  96. }
  97.  
  98. function findBook(bookId) {
  99. for (const bookItem of books) {
  100. if (bookItem.id === bookId) {
  101. return bookItem;
  102. }
  103. }
  104. return null;
  105. }
  106.  
  107. function finishedRead(bookId) {
  108. const bookTarget = findBook(bookId);
  109.  
  110. if (bookTarget == null) return;
  111.  
  112. bookTarget.isCompleted = true;
  113. document.dispatchEvent(new Event(RENDER_EVENT));
  114. saveData();
  115. }
  116.  
  117. function unfinishedRead(bookId) {
  118. const bookTarget = findBook(bookId);
  119.  
  120. if (bookTarget == null) return;
  121.  
  122. bookTarget.isCompleted = false;
  123. document.dispatchEvent(new Event(RENDER_EVENT));
  124. saveData();
  125. }
  126.  
  127. function findBookIndex(bookId) {
  128. for (const index in books) {
  129. if (books[index].id === bookId) {
  130. return index;
  131. }
  132. }
  133. return -1;
  134. }
  135.  
  136. function deleteBook(bookId) {
  137. const bookTarget = findBookIndex(bookId);
  138.  
  139. if (bookTarget === -1) return;
  140.  
  141. books.splice(bookTarget, 1);
  142. document.dispatchEvent(new Event(RENDER_EVENT));
  143. saveData();
  144. }
  145.  
  146. const RENDER_EVENT = 'render-book';
  147. const SAVED_EVENT = 'saved_book';
  148.  
  149. function saveBook (bookObject) {
  150. const bookTitle = document.createElement('h3');
  151. bookTitle.innerText = bookObject.title;
  152.  
  153. const bookAuthor = document.createElement('p');
  154. bookAuthor.innerText = 'Penulis : ' + bookObject.author;
  155.  
  156. const bookYear = document.createElement('p');
  157. bookYear.innerText = 'Tahun : ' + bookObject.year;
  158.  
  159. const buttonContainer = document.createElement('div');
  160. buttonContainer.classList.add('action');
  161.  
  162. if (bookObject.isCompleted) {
  163. const greenButton = document.createElement('button');
  164. greenButton.classList.add('green');
  165. greenButton.innerText = 'Belum Selesai Dibaca';
  166.  
  167. greenButton.addEventListener('click', function () {
  168. unfinishedRead(bookObject.id);
  169. });
  170.  
  171.  
  172. const redButton = document.createElement('button');
  173. redButton.classList.add('red');
  174. redButton.innerText = 'Hapus Buku';
  175.  
  176. redButton.addEventListener('click', function () {
  177. deleteBook(bookObject.id);
  178. });
  179.  
  180. buttonContainer.append(greenButton, redButton);
  181.  
  182. } else {
  183. const greenButton = document.createElement('button');
  184. greenButton.classList.add('green');
  185. greenButton.innerText = 'Selesai Dibaca';
  186.  
  187. greenButton.addEventListener('click', function () {
  188. finishedRead(bookObject.id);
  189. })
  190.  
  191. const redButton = document.createElement('button');
  192. redButton.classList.add('red');
  193. redButton.innerText = 'Hapus Buku';
  194.  
  195. redButton.addEventListener('click', function () {
  196. deleteBook(bookObject.id);
  197. });
  198.  
  199. buttonContainer.append(greenButton, redButton);
  200. }
  201.  
  202. const editButton = document.createElement('button');
  203. editButton.classList.add('blue');
  204. editButton.innerText = 'Edit Buku';
  205.  
  206. editButton.addEventListener('click', function () {
  207. const editForm = document.getElementById('editBook');
  208. const bookId = this.closest('.book_item').id;
  209. const bookTarget = findBook(Number(bookId));
  210.  
  211. const bookTitle = document.getElementById('editBookTitle');
  212. const bookAuthor = document.getElementById('editBookAuthor');
  213. const bookYear = document.getElementById('editBookYear');
  214. const bookIsCompleted = document.getElementById('editBookIsComplete');
  215. const bookSubmit = document.getElementById('bookSubmit');
  216.  
  217. bookId == bookTarget.id;
  218. bookTitle.value = bookTarget.title;
  219. bookAuthor.value = bookTarget.author;
  220. bookYear.value = bookTarget.year;
  221. bookIsCompleted.checked = bookTarget.isCompleted;
  222.  
  223. editForm.addEventListener('submit', function (event) {
  224. event.preventDefault();
  225. editBook(bookId);
  226. editForm.reset();
  227. bookTitle.setAttribute('disabled', 'disabled');
  228. bookAuthor.setAttribute('disabled', 'disabled');
  229. bookYear.setAttribute('disabled', 'disabled');
  230. bookIsCompleted.setAttribute('disabled', 'disabled');
  231. bookSubmit.setAttribute('disabled', 'disabled');
  232. })
  233.  
  234. bookTitle.removeAttribute('disabled')
  235. bookAuthor.removeAttribute('disabled');
  236. bookYear.removeAttribute('disabled');
  237. bookIsCompleted.removeAttribute('disabled');
  238. bookSubmit.removeAttribute('disabled');
  239. })
  240.  
  241. buttonContainer.append(editButton);
  242.  
  243. const container = document.createElement('article');
  244. container.classList.add('book_item');
  245. container.append(bookTitle, bookAuthor, bookYear, buttonContainer);
  246.  
  247. container.setAttribute('id', `${bookObject.id}`);
  248.  
  249. return container;
  250. }
  251.  
  252. document.addEventListener(RENDER_EVENT, function () {
  253. const incompletedBooks = document.getElementById('incompleteBookshelfList');
  254. incompletedBooks.innerHTML = '';
  255.  
  256. const completedBooks = document.getElementById('completeBookshelfList');
  257. completedBooks.innerHTML = '';
  258.  
  259. for (const bookItem of books) {
  260. const bookElement = saveBook(bookItem);
  261.  
  262. if (bookItem.isCompleted) {
  263. completedBooks.append(bookElement);
  264. } else {
  265. incompletedBooks.append(bookElement);
  266. }
  267. }
  268. });
  269.  
  270. document.addEventListener('DOMContentLoaded', function () {
  271. const submitForm = document.getElementById('inputBook');
  272. const searchForm = document.getElementById('searchBook')
  273. submitForm.addEventListener('submit', function (event) {
  274. event.preventDefault();
  275. addBook();
  276. submitForm.reset();
  277. });
  278. searchForm.addEventListener('submit', function (event) {
  279. event.preventDefault();
  280. searchBook();
  281. });
  282.  
  283. if (isStorageExist()) {
  284. loadDataFromStorage();
  285. }
  286. });
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement