tod
/
odin-library
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Display, remove books, toggling read status

This commit is contained in:
NetMan 2024-01-27 23:07:15 +01:00
parent 6aaad4d9f0
commit ce59d1b051
4 changed files with 203 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
bg-library-public-domain.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 MiB

6
index.html
View File

@ -7,8 +7,14 @@
<link rel="stylesheet" href="reset.css"> <link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<script src="script.js" defer></script> <script src="script.js" defer></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head> </head>
<body> <body>
<header>
<h1>boocks</h1>
</header>
<div id="books">
</div>
</body> </body>
</html> </html>

100
script.js
View File

@ -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 = "";
// })
// })

96
style.css
View File

@ -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";
}
}
}
}