script.js

const newBook = document.querySelector(".btn-newBook");
const gridShelf = document.querySelector(".grid-shelf");
const templateBookDelete = document.querySelector("#book-delete");
const templateBookStatusOn = document.querySelector("#toogle-status-on");
const templateBookStatusOff = document.querySelector("#toogle-status-off");
const dialog = document.querySelector("#main-dialog");
const dialogClose = document.querySelector(".dialog-close");
const form = document.querySelector("#dialog-form");
const checkStatus = document.querySelector("#status");
const readStatus = document.querySelector(".readstatus");
const dialogCoverImage = document.querySelector("#dialog-cover-image");
const coverImg = document.querySelector(".cover-img");
const dialogCoverImageClose = document.querySelector(".cover-image-close");
    
let myLibrary = [];

function Book(title, author, pages, status, coverImage) {
    this.id = crypto.randomUUID();
    this.title = title;
    this.author = author;
    this.pages = pages;
    this.status = status;
    this.coverImage = coverImage;
};

newBook.addEventListener("click", () => {
    dialog.showModal();
})

checkStatus.addEventListener("change", () => {
    readStatus.textContent = checkStatus.checked ? "(Read)" : "(Not Read)";
})

dialogClose.addEventListener("click", () => {
    dialog.close();
})

form.addEventListener("submit", (e) => {
    e.preventDefault();
    
    const formData = new FormData(form);
    
    const book = new Book(
        formData.get("title"),
        formData.get("author"),
        formData.get("pages"),
        formData.has("status"),
        formData.get("coverImage"),
    );
    
    addBookToLibrary(book);
    
    dialog.close();
    form.reset();
})

function addBookToLibrary(book) {
    myLibrary.push(book);
    gridShelf.append(createBookCard(book));
}

function createBookCard(book) {
    const gridBook = document.createElement("div");
    gridBook.classList.add("grid-book");
    gridBook.dataset.id = book.id;
    
    const bookHead = document.createElement("div");
    bookHead.classList.add("book-head");
    const bookTitle = document.createElement("h2");
    bookTitle.classList.add("book-title");
    const btnBookDelete = document.createElement("button");
    btnBookDelete.classList.add("btn-bookDelete");
    const bookDelete = templateBookDelete.content.cloneNode(true);
    const svgBookDelete = bookDelete.querySelector("svg");
    
    const bookInfo = document.createElement("div");
    bookInfo.classList.add("book-info")
    const bookAuthor = document.createElement("p");
    const bookPages = document.createElement("p");

    const bookStatus = document.createElement("div");
    bookStatus.classList.add("bookStatus");
    const btnBookStatus = document.createElement("button");
    btnBookStatus.classList.add("btn-bookStatus");
    const bookStatusOn = templateBookStatusOn.content.cloneNode(true);
    const bookStatusOff = templateBookStatusOff.content.cloneNode(true);
    const svgBookStatus = book.status ? bookStatusOn.querySelector(".status-on") : bookStatusOff.querySelector(".status-off");
    const paraBookStatus = document.createElement("p");
    paraBookStatus.classList.add("para-bookStatus")
    
    const btnBook = document.createElement("button");
    btnBook.classList.add("btn-bookView");
    
    bookTitle.textContent = book.title;
    bookAuthor.textContent = `Author: ${book.author}`
    bookPages.textContent = `Pages: ${book.pages}`
    paraBookStatus.textContent = `${book.status ? "Already read" : "Not read yet"}`
    btnBook.textContent = "View Cover";
    
    btnBookDelete.appendChild(bookDelete);

    bookStatus.appendChild(paraBookStatus);
    btnBookStatus.appendChild(svgBookStatus);
    bookStatus.appendChild(btnBookStatus);
    
    bookInfo.appendChild(bookAuthor);
    bookInfo.appendChild(bookPages);
    bookInfo.appendChild(bookStatus);
    
    bookHead.appendChild(bookTitle);
    bookHead.appendChild(btnBookDelete)
    gridBook.appendChild(bookHead);
    gridBook.appendChild(bookInfo);
    gridBook.appendChild(btnBook);
    
    return gridBook;
}

gridShelf.addEventListener("click", (e) => {
    const btnBookDelete = e.target.closest(".btn-bookDelete");
    const btnBookStatus = e.target.closest(".btn-bookStatus");
    const btnBookView = e.target.closest(".btn-bookView");
    
    if(!btnBookDelete && !btnBookStatus && !btnBookView) return;

    if(btnBookStatus) {
        const bookCard = btnBookStatus.closest(".grid-book");
        const book = findBook(bookCard);

        book.toggleStatus(bookCard);
    }
    else if(btnBookDelete){
        const bookCard = btnBookDelete.closest(".grid-book");
        const book = findBook(bookCard);

        book.removeBookFromLibrary(bookCard);
    }
    else if(btnBookView){
        const bookCard = btnBookView.closest(".grid-book");
        const book = findBook(bookCard);

        book.viewCoverImage(bookCard);
    }
})

function findBook(bookCard) {
    const id = bookCard.dataset.id;
    return myLibrary.find(book => book.id === id);
}

Book.prototype.toggleStatus = function(bookCard) {
    this.status = !this.status;
   
    const paraBookStatus = bookCard.querySelector(".para-bookStatus");
    const btnBookStatus = bookCard.querySelector(".btn-bookStatus");

    btnBookStatus.replaceChildren(
        this.status ? templateBookStatusOn.content.cloneNode(true) : templateBookStatusOff.content.cloneNode(true)
    );

    paraBookStatus.textContent = this.status ? "Already read" : "Not read yet";
}

Book.prototype.removeBookFromLibrary = function(bookCard) {
    myLibrary = myLibrary.filter(book => book !== this);
    bookCard.remove();
}

Book.prototype.viewCoverImage = function(bookCard) {
    if(this.coverImage.name){
        coverImg.src = URL.createObjectURL(this.coverImage);
    }
    else{
        coverImg.src = "assets/images/noCoverImage.png";
    }
    dialogCoverImage.showModal();
}

dialogCoverImageClose.addEventListener("click", () => {
    dialogCoverImage.close();
})