From 8255ae81be3dc9f7fc1be7076cc924aada583808 Mon Sep 17 00:00:00 2001 From: Icha Cahya Wulan Date: Thu, 25 Aug 2022 12:41:08 +0700 Subject: [PATCH] Add files via upload --- css/style.css | 240 ++++++++++++++++++++++++++++++++++++ index.html | 88 +++++++++++++ js/script.js | 336 ++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 664 insertions(+) create mode 100644 css/style.css create mode 100644 index.html create mode 100644 js/script.js diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..97d8d46 --- /dev/null +++ b/css/style.css @@ -0,0 +1,240 @@ +* { + padding: 0; + margin: 0; + box-sizing: border-box; +} + +body, input, button { + font-family: 'Open Sans', sans-serif; +} + +input, button { + font-size: 16px; +} + +.head_bar { + padding: 12px; + display: flex; + align-items: center; + justify-content: center; + background-color: #2a9d8f; + color: white; +} + +main { + max-width: 800px; + width: 80%; + margin: 0 auto; + padding: 16px; +} + +.shadow { + box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px !important; +} + +.input_section { + display: flex; + flex-direction: column; + padding: 16px; + border-radius: 10px; +} + +.edit_section, .remove_section, .alert_section { + padding: 16px; + margin: auto; + border-radius: 10px; + background-color: white !important; + width: 40%; +} + +.dialog { + display: none; + position: fixed; + z-index: 1; + padding-top: 100px; + left: 0; + top: 0; + width: 100%; + height: 100%; + overflow: auto; + background-color: rgba(0,0,0,0.4); +} + +.input_section > h2, +.edit_section > h2 { + text-align: center; + color: #2a9d8f; +} + +.input_section > form > .input, +.edit_section > form > .input { + margin: 8px 0; +} + +.input_section > form > button { + background-color: #2a9d8f; + color: white; + border: 0; + border-radius: 5px; + display: block; + width: 100%; + padding: 8px; + cursor: pointer; +} + +.edit_section > form > .edit_action, +.remove_section > .remove_action, +.alert_section > .alert_action { + display: flex; + justify-content: center; + align-items: center; +} + +.edit_section > form > .edit_action > button, +.remove_section > .remove_action > button, +.alert_section > .alert_action > button { + border: 0; + padding: 8px; + margin: 5px; + border-radius: 5px; + cursor: pointer; + width: 20%; +} + +.edit_section > form > .edit_action > #editSubmit, +.remove_section > .remove_action > #removeSubmit, +.alert_section > .alert_action > #alertOk { + background-color: #2a9d8f; + color: white; +} + +.edit_section > form > .edit_action > #editCancel, +.remove_section > .remove_action > #removeCancel { + background-color: #e76f51; + color: white; +} + +.input_section > form > button > span { + font-weight: bold; +} + +.input_section > form > .input > input, +.edit_section > form > .input > input { + display: block; + width: 100%; + padding: 8px; + border-radius: 5px; +} + + +.input_section > form > .input > label, +.edit_section > form > .input > label { + color: #2a9d8f; + font-weight: bold; +} + +.input_section > form > .input_inline { + margin: 12px 0; + display: flex; + align-items: center; +} + +.input_section > form > .input_inline > label { + color: #2a9d8f; + font-weight: bold; + margin-right: 10px; +} + +.search_section { + margin: 16px 0; + display: flex; + flex-direction: column; + align-items: center; + padding: 16px; + border-radius: 10px; +} + +.search_section > h2 { + color: #2a9d8f; +} + +.search_section > form { + padding: 16px; + width: 100%; + display: grid; + grid-template-columns: auto 1fr 0.3fr 0.3fr; + grid-gap: 10px; +} + +.search_section > form > label { + display: flex; + align-items: center; +} + +.search_section > form > input { + padding: 5px; + border-radius: 5px; +} + +.search_section > form > button { + border: 0; + border-radius: 5px; + cursor: pointer; +} + +.search_section > form > #searchSubmit { + background-color: #2a9d8f; + color: white; +} + +.search_section > form > #searchClear { + background-color: #e76f51; + color: white; +} + +.book_shelf { + margin: 16px 0 0 0; + padding: 16px; + border-radius: 10px; +} + +.book_shelf > h2 { + color: #2a9d8f; +} + +.book_shelf > .book_list { + padding: 16px; +} + +.book_shelf > .book_list > .book_item { + padding: 8px 16px 16px 16px; + border-radius: 5px; + margin: 10px 0; +} + +.book_shelf > .book_list > .book_item > h3, p { + margin: 8px 0; +} + +.book_shelf > .book_list > .book_item > .action > button { + border: 0; + padding: 5px; + margin: 0 5px 0 0; + border-radius: 5px; + cursor: pointer; +} + +.book_shelf > .book_list > .book_item > .action > .green { + background-color: darkgreen; + color: white; +} + +.book_shelf > .book_list > .book_item > .action > .red { + background-color: darkred; + color: white; +} + +.book_shelf > .book_list > .book_item > .action > .blue { + background-color: blue; + color: white; +} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..afb6b5c --- /dev/null +++ b/index.html @@ -0,0 +1,88 @@ + + + + + + + Bookshelf Apps + + + + + +
+

Bookshelf Apps

+
+
+
+

Masukkan Buku Baru

+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ +
+
+ +
+

Cari Buku (Opsional)

+
+ + + + +
+
+ +
+

Belum selesai dibaca

+ +
+
+
+ +
+

Selesai dibaca

+ +
+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + + + + diff --git a/js/script.js b/js/script.js new file mode 100644 index 0000000..74d9b74 --- /dev/null +++ b/js/script.js @@ -0,0 +1,336 @@ +const STORAGE_KEY = 'BOOKSHELF_APPS'; + +const title = document.getElementById("inputBookTitle"); +const author = document.getElementById("inputBookAuthor"); +const year = document.getElementById("inputBookYear"); +const read = document.getElementById("inputBookIsComplete"); + +const searchTitle = document.getElementById("searchBookTitle"); +const btnSearch = document.getElementById("searchSubmit"); +const btnClear = document.getElementById("searchClear"); + +function isStorageExist() { + if (typeof (Storage) === undefined) { + alert('Browser kamu tidak mendukung local storage'); + return false; + } + return true; +} + +document.addEventListener('DOMContentLoaded', function () { + const submitForm = document.getElementById('inputBook'); + submitForm.addEventListener('submit', function (event) { + event.preventDefault(); + addBook(); + }); + if (isStorageExist()) { + let books = getBookData(); + renderBookList(books); + } +}); + +read.addEventListener('change', function () { + const isCompleteCheck = read.checked; + + if (isCompleteCheck) { + document.getElementById("isCompleted").style.display = "inline-block"; + document.getElementById("isNotCompleted").style.display = "none"; + } else { + document.getElementById("isNotCompleted").style.display = "inline-block"; + document.getElementById("isCompleted").style.display = "none"; + } +}); + +function getBookData() { + if (localStorage.getItem(STORAGE_KEY) === null) { + return []; + } else { + return JSON.parse(localStorage.getItem(STORAGE_KEY)); + } +} + +function addBook() { + const bookTitle = title.value; + const bookAuthor = author.value; + const bookYear = year.value; + const isComplete = read.checked; + + const generatedID = generateId(); + const booksObject = generateBookObject(generatedID, bookTitle, bookAuthor, bookYear, isComplete); + + let books = getBookData(); + + if (isStorageExist()) { + books.push(booksObject); + localStorage.setItem(STORAGE_KEY, JSON.stringify(books)); + renderBookList(books); + clearForm(); + + alertDialog('Data berhasil disimpan!'); + } +} + +function generateId() { + return +new Date(); +} + +function generateBookObject(id, title, author, year, isComplete) { + return { + id, + title, + author, + year, + isComplete + }; +} + +function clearForm() { + title.value = ""; + author.value = ""; + year.value = ""; + read.checked = false; +} + +btnSearch.addEventListener('click', function() { + let books = getBookData(); + const bookSearchList = []; + + for (let i = 0; i < books.length; i++) { + const bookTitle = books[i].title.toLowerCase(); + const searchBookTitle = searchTitle.value.toLowerCase(); + if (bookTitle.includes(searchBookTitle)) { + bookSearchList.push(books[i]); + } + } + + renderBookList(bookSearchList); +}); + +btnClear.addEventListener('click', function() { + searchTitle.value = ""; + renderBookList(getBookData()); +}); + +function renderBookList(books) { + const uncompletedBookList = document.getElementById('incompleteBookshelfList'); + uncompletedBookList.innerHTML = ''; + + const completedBookList = document.getElementById('completeBookshelfList'); + completedBookList.innerHTML = ''; + + if (books.length === 0) { + let bookElement = `

Data buku tidak ada

` + uncompletedBookList.innerHTML += bookElement + completedBookList.innerHTML += bookElement + } + + for (const bookItem of books) { + if (!bookItem.isComplete) { + let bookElement = ` +
+

${bookItem.title}

+

Penulis: ${bookItem.author}

+

Tahun: ${bookItem.year}

+ +
+ + + +
+
+ `; + uncompletedBookList.innerHTML += bookElement; + } else { + let bookElement = ` +
+

${bookItem.title}

+

Penulis: ${bookItem.author}

+

Tahun: ${bookItem.year}

+ +
+ + + +
+
+ `; + completedBookList.innerHTML += bookElement; + } + } +} + +function editBook(id) { + const editDialog = document.querySelector('.dialog'); + editDialog.innerHTML = ''; + + document.querySelector('.dialog').style.display = 'block' + + const bookTarget = findBook(id); + + let editForm = ` +
+

Edit Data Buku

+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+ ` + editDialog.innerHTML += editForm +} + +function closeDialog() { + document.querySelector('.dialog').style.display = 'none' +} + +function saveEditDialog(id) { + let book = findBook(id); + const editTitle = document.getElementById("editBookTitle").value; + const editAuthor = document.getElementById("editBookAuthor").value; + const editYear = document.getElementById("editBookYear").value; + const booksObject = generateBookObject(id, editTitle, editAuthor, editYear, book.isComplete); + + const bookUpdated = findBookIndex(id); + + if (bookUpdated === -1) return; + + let books = getBookData(); + books.splice(bookUpdated, 1); + + books.push(booksObject) + + localStorage.setItem(STORAGE_KEY, JSON.stringify(books)); + closeDialog() + + renderBookList(books); +} + +function readBookFinished(id) { + const bookTarget = findBook(id); + + if (bookTarget == null) return; + + bookTarget.isComplete = true; + + let books = getBookData().filter((a) => a.id != id); + books.push(bookTarget); + + localStorage.setItem(STORAGE_KEY, JSON.stringify(books)); + renderBookList(books); + + alertDialog('Buku berhasil dipindahkan ke rak Selesai dibaca!'); +} + +function readBookUnfinished(id) { + const bookTarget = findBook(id); + + if (bookTarget == null) return; + + bookTarget.isComplete = false; + + let books = getBookData().filter((a) => a.id != id); + books.push(bookTarget); + + localStorage.setItem(STORAGE_KEY, JSON.stringify(books)); + renderBookList(books); + + alertDialog('Buku berhasil dipindahkan ke rak Belum selesai dibaca!'); +} + +function findBook(id) { + let books = getBookData(); + for (const bookItem of books) { + if (bookItem.id == id) { + return bookItem; + } + } + return null; +} + +function removeBook(id) { + const confirmDialog = document.querySelector('.dialog'); + confirmDialog.innerHTML = ''; + + document.querySelector('.dialog').style.display = 'block' + + const bookTarget = findBook(id); + + let confirmSection = ` +
+

Apakah Anda yakin akan menghapus buku "${bookTarget.title}"?

+
+ + +
+
+ ` + confirmDialog.innerHTML += confirmSection + + document.getElementById("removeSubmit").addEventListener('click', function () { + const bookTarget = findBookIndex(id); + + if (bookTarget === -1) return; + + let books = getBookData(); + books.splice(bookTarget, 1); + + localStorage.setItem(STORAGE_KEY, JSON.stringify(books)); + closeDialog() + renderBookList(books); + }) +} + +function findBookIndex(id) { + let books = getBookData(); + for (const index in books) { + if (books[index].id == id) { + return index; + } + } + return -1; +} + +function alertDialog(text) { + const alDialog = document.querySelector('.dialog'); + alDialog.innerHTML = ''; + + document.querySelector('.dialog').style.display = 'block' + + let alertSection = ` +
+

${text}

+
+ +
+
+ ` + alDialog.innerHTML += alertSection + + document.getElementById("alertOk").addEventListener('click', function () { + closeDialog() + }) +} \ No newline at end of file