136 lines
4.0 KiB
JavaScript
136 lines
4.0 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(title, author, pages, read) {
|
|
let bookObject = new Book(title, author, pages, read);
|
|
library.push(bookObject);
|
|
displayBooks();
|
|
}
|
|
|
|
|
|
function removeBookFromLibrary(dataId) {
|
|
library.splice(dataId, 1);
|
|
displayBooks();
|
|
}
|
|
|
|
let books = [
|
|
["The Hobbit", "J.R.R. Tolkien", 295, false],
|
|
["Jessica's Guide to Dating on the Dark Side", "Natalie M. Pete-Clarkson Jr.", 295, false],
|
|
|
|
]
|
|
|
|
if (books.length) {
|
|
books.forEach(book => {
|
|
addBookToLibrary(book[0], book[1], book[2], book[3]);
|
|
})
|
|
} else {
|
|
displayBooks();
|
|
}
|
|
|
|
|
|
function displayBooks() {
|
|
bookGrid.querySelectorAll("& > *").forEach(book => {
|
|
book.remove();
|
|
})
|
|
let dataId = 0;
|
|
if (library.length) {
|
|
library.forEach(book => {
|
|
let bookDiv = document.createElement("div");
|
|
bookDiv.classList.add("book");
|
|
bookDiv.setAttribute("data-id", dataId)
|
|
|
|
let bookDetails = document.createElement("div");
|
|
bookDetails.classList.add("book-details");
|
|
|
|
let allDetails = {
|
|
"title": `${book.title}`,
|
|
"author": `${book.author}`,
|
|
"pages": `${book.pages}`,
|
|
"status": `${book.read ? "read" : "not read yet"}`,
|
|
};
|
|
|
|
for (detail in allDetails) {
|
|
let detailNameContain = document.createElement("div");
|
|
detailNameContain.classList.add("detail-name");
|
|
|
|
let detailName = document.createElement("span");
|
|
detailName.textContent = `${detail}: `;
|
|
detailNameContain.append(detailName);
|
|
|
|
let detailContent = document.createElement("span");
|
|
detailContent.textContent = allDetails[detail];
|
|
detailContent.classList.add("detail-content");
|
|
|
|
bookDetails.append(detailNameContain, detailContent);
|
|
};
|
|
|
|
bookDiv.append(bookDetails);
|
|
|
|
let bookActions = document.createElement("div");
|
|
bookActions.classList.add("book-actions");
|
|
|
|
let toggleRead = document.createElement("i");
|
|
toggleRead.classList.add("fa-solid", "fa-book");
|
|
toggleRead.addEventListener("click", function() {
|
|
library[this.parentNode.parentNode.getAttribute("data-id")].read = !library[this.parentNode.parentNode.getAttribute("data-id")].read;
|
|
displayBooks();
|
|
});
|
|
bookActions.append(toggleRead);
|
|
|
|
// let edit = document.createElement("i");
|
|
// edit.classList.add("fa-solid", "fa-edit");
|
|
// edit.addEventListener("click", function() {
|
|
// removeBookFromLibrary(this.parentNode.parentNode.getAttribute("data-id"));
|
|
// });
|
|
// bookActions.append(edit);
|
|
|
|
let removeBtn = document.createElement("i");
|
|
removeBtn.classList.add("fa-solid", "fa-trash");
|
|
removeBtn.addEventListener("click", function() {
|
|
removeBookFromLibrary(this.parentNode.parentNode.getAttribute("data-id"));
|
|
});
|
|
bookActions.append(removeBtn);
|
|
|
|
bookDiv.append(bookActions);
|
|
|
|
bookGrid.append(bookDiv);
|
|
|
|
dataId++;
|
|
})
|
|
} else {
|
|
let info = document.createElement("span");
|
|
info.classList.add("no-books");
|
|
info.textContent = "No books to list. Add some!";
|
|
bookGrid.append(info);
|
|
}
|
|
}
|
|
|
|
const newBookBtn = document.querySelector("button#new-book");
|
|
const newBookDialog = document.querySelector("dialog");
|
|
newBookBtn.addEventListener("click", () => {
|
|
newBookDialog.showModal();
|
|
})
|
|
|
|
newBookDialog.querySelector("form").addEventListener("submit", (event) => {
|
|
let formData = new FormData(document.querySelector("form"));
|
|
let bookVals = []
|
|
for (let [key, value] of formData.entries()) {
|
|
bookVals.push(value);
|
|
}
|
|
addBookToLibrary(bookVals[0], bookVals[1], bookVals[2], bookVals[3]);
|
|
});
|
|
|
|
newBookDialog.addEventListener("close", (event) => {
|
|
newBookDialog.querySelectorAll("input").forEach(input => {
|
|
input.value = null;
|
|
})
|
|
newBookDialog.querySelector("input[type='radio']").checked = true;
|
|
}); |