100 lines
2.9 KiB
JavaScript
100 lines
2.9 KiB
JavaScript
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 = "";
|
|
// })
|
|
// })
|