function init() {
const modal = document.querySelector(".book__modal");
let myLibrary = [];
const pageTitle = document.querySelector('.container__header h1');
pageTitle.addEventListener('click', () => {
console.log(myLibrary);
});
class Book {
constructor(title, author, nbOfPages, read) {
this.title = title;
this.author = author;
this.nbOfPages = nbOfPages;
this.read = read;
}
}
function submitForm() {
const submit = document.querySelector(".button__addButton");
submit.addEventListener('click', () => {
const title = document.getElementById("row__title").value;
const author = document.getElementById("row__author").value;
const nbOfPages = document.getElementById("row__pages").value;
const read = document.getElementById("row__read").checked;
if (title !== "" && author !== "" && nbOfPages !== "") {
addBookToLibrary(title, author, nbOfPages, read);
displayBook();
hideModal();
} else {
return alert("Please fill the inputs");
}
});
}
function addBookToLibrary(title, author, nbOfPages, read) {
myLibrary.push(new Book(title, author, nbOfPages, read));
}
function displayBook() {
addBookToDOM();
setBookAttribute();
deleteBook();
switchBookReadStatus();
const title = document.querySelector(".header__title");
const author = document.querySelector(".header__author");
const nbOfPages = document.querySelector(".footer__numberOfPages");
const read = document.querySelector(".checkbox__switch input");
const currentBook = myLibrary[myLibrary.length - 1];
title.textContent = currentBook.title;
author.textContent = currentBook.author;
nbOfPages.textContent = currentBook.nbOfPages;
read.checked = currentBook.read;
}
function addBookToDOM() {
const library = document.querySelector(".library__book--add");
library.insertAdjacentHTML("afterend", `
`);
}
// uuidv4 credit: https://stackoverflow.com/a/2117523
function generateRandomID() {
return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c =>
(c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
);
}
function setBookAttribute() {
const book = document.querySelector(".library__book:nth-child(2)");
const randomID = generateRandomID();
let currentBook = myLibrary[myLibrary.length - 1];
book.dataset.id = randomID;
currentBook["data-id"] = randomID;
}
function deleteBook() {
const deleteButton = document.querySelector(".header__delete svg");
const book = document.querySelector(".library__book[data-id]");
const bookObjectID = book.dataset.id;
deleteButton.addEventListener('click', () => {
book.remove();
for (let i = 0; i < myLibrary.length; i++) {
if (myLibrary[i]["data-id"] === bookObjectID) {
myLibrary.splice([i], 1);
}
}
});
}
function switchBookReadStatus() {
const switchButton = document.querySelector(".checkbox__switch input");
let currentBook = myLibrary[myLibrary.length - 1];
switchButton.addEventListener('click', () => {
currentBook.read = !currentBook.read;
});
}
function displayModal() {
const openModal = document.querySelector(`.library__book--add`);
const span = document.querySelector(".header__close");
openModal.addEventListener('click', () => {
modal.classList.remove('hidden');
bodyScrollLock.disableBodyScroll(modal);
});
span.addEventListener('click', () => {
hideModal();
});
window.addEventListener('click', (event) => {
if (event.target === modal) {
return hideModal();
}
});
}
function hideModal() {
const form = document.querySelectorAll(".content__body input")
modal.classList.add('hidden');
bodyScrollLock.enableBodyScroll(modal);
form.forEach(e => {
e.value = '';
e.checked = false;
});
}
displayModal();
submitForm();
}
init();