Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- const STORAGE_KEY = "BOOK_APPS";
- var books = [];
- function generateId() {
- return +new Date();
- }
- function generateBookObject(id, title, author, year, isCompleted) {
- return {
- id, title, author, year, isCompleted
- }
- }
- function isStorageExist() {
- if (typeof (Storage) === undefined) {
- alert('Browser kamu tidak mendukung local storage');
- return false;
- }
- return true;
- }
- function saveData() {
- if (isStorageExist()) {
- const parsed = JSON.stringify(books);
- localStorage.setItem(STORAGE_KEY, parsed);
- document.dispatchEvent(new Event(SAVED_EVENT));
- }
- }
- document.addEventListener(SAVED_EVENT, function () {
- console.log(localStorage.getItem(STORAGE_KEY));
- });
- function loadDataFromStorage() {
- const serializedData = localStorage.getItem(STORAGE_KEY);
- let data = JSON.parse(serializedData);
- if (data !== null) {
- for (const book of data) {
- books.push(book);
- }
- }
- function updateDataToStorage() {
- if (isStorageExist()) saveData();
- }
- document.dispatchEvent(new Event(RENDER_EVENT));
- }
- function addBook() {
- const bookTitle = document.getElementById('inputBookTitle').value;
- const bookAuthor = document.getElementById('inputBookAuthor').value;
- const bookYear = document.getElementById('inputBookYear').value;
- const bookIsCompleted = document.getElementById('inputBookIsComplete').checked;
- const generatedID = generateId();
- const bookObject = generateBookObject(generatedID, bookTitle, bookAuthor, bookYear, bookIsCompleted);
- books.push(bookObject);
- document.dispatchEvent(new Event(RENDER_EVENT));
- saveData();
- }
- function editBook(bookId) {
- const bookTarget = findBook(Number(bookId));
- if (bookTarget == null) return;
- const editTitle = document.getElementById('editBookTitle').value;
- const editAuthor = document.getElementById('editBookAuthor').value;
- const editYear = document.getElementById('editBookYear').value;
- const isCompleted = document.getElementById('editBookIsComplete').checked;
- bookTarget.title = editTitle;
- bookTarget.author = editAuthor;
- bookTarget.year = editYear;
- bookTarget.isCompleted = isCompleted;
- document.dispatchEvent(new Event(RENDER_EVENT));
- saveData();
- }
- const search = document.getElementById("searchBook");
- search.addEventListener("keyup",searchBook);
- function searchBook(element) {
- const cari = element.target.value.toLowerCase();
- let itemList = document.querySelectorAll(".book_item");
- itemList.forEach((item) => {
- const isi = item.firstChild.textContent.toLowerCase();
- if(isi.indexOf(cari) != -1) {
- item.setAttribute("style", "display: block;");
- } else {
- item.setAttribute("style", "display: none !important;");
- }
- });
- }
- function findBook(bookId) {
- for (const bookItem of books) {
- if (bookItem.id === bookId) {
- return bookItem;
- }
- }
- return null;
- }
- function finishedRead(bookId) {
- const bookTarget = findBook(bookId);
- if (bookTarget == null) return;
- bookTarget.isCompleted = true;
- document.dispatchEvent(new Event(RENDER_EVENT));
- saveData();
- }
- function unfinishedRead(bookId) {
- const bookTarget = findBook(bookId);
- if (bookTarget == null) return;
- bookTarget.isCompleted = false;
- document.dispatchEvent(new Event(RENDER_EVENT));
- saveData();
- }
- function findBookIndex(bookId) {
- for (const index in books) {
- if (books[index].id === bookId) {
- return index;
- }
- }
- return -1;
- }
- function deleteBook(bookId) {
- const bookTarget = findBookIndex(bookId);
- if (bookTarget === -1) return;
- books.splice(bookTarget, 1);
- document.dispatchEvent(new Event(RENDER_EVENT));
- saveData();
- }
- const RENDER_EVENT = 'render-book';
- const SAVED_EVENT = 'saved_book';
- function saveBook (bookObject) {
- const bookTitle = document.createElement('h3');
- bookTitle.innerText = bookObject.title;
- const bookAuthor = document.createElement('p');
- bookAuthor.innerText = 'Penulis : ' + bookObject.author;
- const bookYear = document.createElement('p');
- bookYear.innerText = 'Tahun : ' + bookObject.year;
- const buttonContainer = document.createElement('div');
- buttonContainer.classList.add('action');
- if (bookObject.isCompleted) {
- const greenButton = document.createElement('button');
- greenButton.classList.add('green');
- greenButton.innerText = 'Belum Selesai Dibaca';
- greenButton.addEventListener('click', function () {
- unfinishedRead(bookObject.id);
- });
- const redButton = document.createElement('button');
- redButton.classList.add('red');
- redButton.innerText = 'Hapus Buku';
- redButton.addEventListener('click', function () {
- deleteBook(bookObject.id);
- });
- buttonContainer.append(greenButton, redButton);
- } else {
- const greenButton = document.createElement('button');
- greenButton.classList.add('green');
- greenButton.innerText = 'Selesai Dibaca';
- greenButton.addEventListener('click', function () {
- finishedRead(bookObject.id);
- })
- const redButton = document.createElement('button');
- redButton.classList.add('red');
- redButton.innerText = 'Hapus Buku';
- redButton.addEventListener('click', function () {
- deleteBook(bookObject.id);
- });
- buttonContainer.append(greenButton, redButton);
- }
- const editButton = document.createElement('button');
- editButton.classList.add('blue');
- editButton.innerText = 'Edit Buku';
- editButton.addEventListener('click', function () {
- const editForm = document.getElementById('editBook');
- const bookId = this.closest('.book_item').id;
- const bookTarget = findBook(Number(bookId));
- const bookTitle = document.getElementById('editBookTitle');
- const bookAuthor = document.getElementById('editBookAuthor');
- const bookYear = document.getElementById('editBookYear');
- const bookIsCompleted = document.getElementById('editBookIsComplete');
- const bookSubmit = document.getElementById('bookSubmit');
- bookId == bookTarget.id;
- bookTitle.value = bookTarget.title;
- bookAuthor.value = bookTarget.author;
- bookYear.value = bookTarget.year;
- bookIsCompleted.checked = bookTarget.isCompleted;
- editForm.addEventListener('submit', function (event) {
- event.preventDefault();
- editBook(bookId);
- editForm.reset();
- bookTitle.setAttribute('disabled', 'disabled');
- bookAuthor.setAttribute('disabled', 'disabled');
- bookYear.setAttribute('disabled', 'disabled');
- bookIsCompleted.setAttribute('disabled', 'disabled');
- bookSubmit.setAttribute('disabled', 'disabled');
- })
- bookTitle.removeAttribute('disabled')
- bookAuthor.removeAttribute('disabled');
- bookYear.removeAttribute('disabled');
- bookIsCompleted.removeAttribute('disabled');
- bookSubmit.removeAttribute('disabled');
- })
- buttonContainer.append(editButton);
- const container = document.createElement('article');
- container.classList.add('book_item');
- container.append(bookTitle, bookAuthor, bookYear, buttonContainer);
- container.setAttribute('id', `${bookObject.id}`);
- return container;
- }
- document.addEventListener(RENDER_EVENT, function () {
- const incompletedBooks = document.getElementById('incompleteBookshelfList');
- incompletedBooks.innerHTML = '';
- const completedBooks = document.getElementById('completeBookshelfList');
- completedBooks.innerHTML = '';
- for (const bookItem of books) {
- const bookElement = saveBook(bookItem);
- if (bookItem.isCompleted) {
- completedBooks.append(bookElement);
- } else {
- incompletedBooks.append(bookElement);
- }
- }
- });
- document.addEventListener('DOMContentLoaded', function () {
- const submitForm = document.getElementById('inputBook');
- const searchForm = document.getElementById('searchBook')
- submitForm.addEventListener('submit', function (event) {
- event.preventDefault();
- addBook();
- submitForm.reset();
- });
- searchForm.addEventListener('submit', function (event) {
- event.preventDefault();
- searchBook();
- });
- if (isStorageExist()) {
- loadDataFromStorage();
- }
- });
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement