diff --git a/bg-library-public-domain.jpeg b/bg-library-public-domain.jpeg new file mode 100644 index 0000000..af55881 Binary files /dev/null and b/bg-library-public-domain.jpeg differ diff --git a/index.html b/index.html index 339a90c..87d1530 100644 --- a/index.html +++ b/index.html @@ -7,8 +7,14 @@ + - +
+

boocks

+
+
+ +
\ No newline at end of file diff --git a/script.js b/script.js index e69de29..5ac5bee 100644 --- a/script.js +++ b/script.js @@ -0,0 +1,100 @@ +const library = []; +const bookGrid = document.querySelector("div#books"); + + +function Book(title, author, pages, read) { + this.title = title; + this.author = author; + this.pages = pages; + this.read = read; +} + +function addBookToLibrary(book) { + library.push(book); +} + +let books = [ + ["book", "author", 1, true], + ["book", "author", 1, true], + ["book", "author", 1, true], + ["book", "author", 1, true], + ["book", "author", 1, true], + ["book", "author", 1, true], + ["book", "author", 1, true], + ["book", "author", 1, true], + ["book", "author", 1, true], + ["book", "author", 1, true], + ["book", "author", 1, true], +] + +books.forEach(book => { + let aBook = new Book(book[0], book[1], book[2], book[3]); + addBookToLibrary(aBook); + displayBooks(); +}) + +function displayBooks() { + bookGrid.querySelectorAll("& > *").forEach(book => { + book.remove(); + }) + let pos = 0; + library.forEach(book => { + bookDiv = document.createElement("div"); + bookDiv.classList.add("book"); + bookDiv.setAttribute("arrayPos", pos) + + bookDetails = document.createElement("div"); + bookDetails.classList.add("book-details"); + bookDetails.innerText = `${book.title}\n${book.author}\n${book.pages} pages\n${book.read ? "read" : "not read yet"}`; + bookDiv.append(bookDetails); + + bookActions = document.createElement("div"); + bookActions.classList.add("book-actions"); + + toggleRead = document.createElement("i"); + toggleRead.classList.add("fa-solid", "fa-book"); + toggleRead.addEventListener("click", function() { + library[this.parentNode.parentNode.getAttribute("arrayPos")].read = !library[this.parentNode.parentNode.getAttribute("arrayPos")].read; + displayBooks(); + }); + bookActions.append(toggleRead); + + edit = document.createElement("i"); + edit.classList.add("fa-solid", "fa-edit"); + edit.addEventListener("click", function() { + library.splice(this.parentNode.parentNode.getAttribute("arrayPos"), 1); + displayBooks(); + }); + bookActions.append(edit); + + removeBtn = document.createElement("i"); + removeBtn.classList.add("fa-solid", "fa-trash"); + removeBtn.addEventListener("click", function() { + library.splice(this.parentNode.parentNode.getAttribute("arrayPos"), 1); + displayBooks(); + }); + bookActions.append(removeBtn); + + bookDiv.append(bookActions); + + bookGrid.append(bookDiv); + pos++; + }) +} + +// const newBookBtn = document.querySelector("button#new-book"); +// const newBookDialog = document.querySelector("dialog#new-book"); +// newBookBtn.addEventListener("click", () => { +// newBookDialog.showModal(); +// }) +// newBookDialog.querySelector("button[type='submit']").addEventListener("click", () => { +// let names = []; +// newBookDialog.querySelectorAll("form > input").forEach(input => { +// if (!names.includes(input.name)) { +// names.push(input.name); +// } +// }); +// names.forEach(one => { +// document.getElementsByName(one).value = ""; +// }) +// }) \ No newline at end of file diff --git a/style.css b/style.css index e69de29..7ce19f1 100644 --- a/style.css +++ b/style.css @@ -0,0 +1,96 @@ +@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400;1,700&display=swap'); + +:root { + font-family: 'Roboto', sans-serif; +} + +html, body { + background-image: url("bg-library-public-domain.jpeg"); + background-size: cover; + background-repeat: no-repeat; + color: #fff; + min-height: 100dvh; +} + +header { + width: 100%; + background-color: #0a0a0ac0; + padding: 20px 40px; + box-sizing: border-box; + text-align: center; + h1 { + font-size: 2.5rem; + font-weight: bold; + } +} + +#books { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(max(20%, 270px), 1fr)); + gap: 20px; + padding: 20px; + + .book { + background-color: #1d1d1dcc; + padding: 30px; + border-radius: 20px; + font-size: 1.3rem; + text-align: center; + display: flex; + flex-direction: row; + + .book-details { + margin: auto; + } + .book-actions { + display: flex; + flex-direction: column; + gap: 8px; + justify-content: flex-end; + i { + display: block; + font-size: 1.2rem; + cursor: pointer; + transition: color ease-in-out 0.2s; + position: relative; + } + i::after { + position: absolute; + right: 25px; + opacity: 0; + font-family: "Roboto", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + font-weight: normal; + background-color: #00000090; + backdrop-filter: blur(8px); + top: -5px; + padding: 4px 8px; + border-radius: 10px; + transition: 0.2s opacity ease-in-out, 0.2s z-index ease-in-out; + width: max-content; + z-index: -2; + } + i:hover::after { + opacity: 1; + z-index: 2; + } + .fa-book:hover { + color: rgb(168, 221, 68); + } + .fa-book::after { + content: "toggle read"; + } + .fa-edit:hover { + color: rgb(219, 175, 30); + } + .fa-edit::after { + content: "edit"; + } + .fa-trash:hover { + color: rgb(220, 85, 85); + } + .fa-trash::after { + content: "remove"; + } + } + } +} \ No newline at end of file