app.js

"use strict";

const grid = document.querySelector(".grid");
const modal = document.querySelector(".modal");

let myLibrary = [];

function elementFromHTML(html) {
  const template = document.createElement("template");
  template.innerHTML = html.trim();
  return template.content.firstElementChild;
}

function delegateEvent(type, selector, callback, parent = document) {
  parent.addEventListener(type, (e) => {
    if (e.target.closest(selector)) {
      callback(e);
    }
  });
}

class Book {
  constructor(title, author, pageQuantity, readStatus) {
    this.title = title;
    this.author = author;
    this.pageQuantity = pageQuantity;
    this.readStatus = readStatus;
    this.uuid = crypto.randomUUID();
  }
}

function addBookToLibrary(title, author, pageQuantity, readStatus) {
  const book = new Book(title, author, pageQuantity, readStatus);
  myLibrary.push(book);
}

function renderLibrary(book) {
  const bookCard = elementFromHTML(`
    <article class="book" id="${book.uuid}">
      <h3 class="book__title">${book.title}</h3>
      <p class="book__body">${book.author}</p>
      <p class="book__body">${book.pageQuantity} pages</p>
      <button type="button" id="toggle-read">${book.readStatus}</button>
      <button type="button" id="remove">Remove</button>
    </article>
  `);
  grid.appendChild(bookCard);
}

function clearForm() {
  const inputs = document.querySelectorAll("input");
  inputs.forEach((input) => {
    input.value = "";
    if (input.checked) input.checked = false;
  });
}

function submitBook() {
  const title = document.querySelector("#title").value;
  const author = document.querySelector("#author").value;
  const pageQuantity = document.querySelector("#page-quantity").value;
  const readStatus = document.querySelector("#read-status");

  if (readStatus.checked) readStatus.value = "Read";
  else readStatus.value = "Not read";

  addBookToLibrary(title, author, pageQuantity, readStatus.value);

  grid.innerHTML = "";
  myLibrary.forEach(renderLibrary);

  clearForm();
}

function removeBook(btn) {
  const bookUUID = btn.target.closest(".book").id;

  myLibrary = myLibrary.filter((book) => book.uuid !== bookUUID);

  grid.innerHTML = "";
  myLibrary.forEach(renderLibrary);
}

function toggleReadStatus(btn) {
  const bookUUID = btn.target.closest(".book").id;

  myLibrary.find((book) => {
    if (book.uuid === bookUUID) {
      if (book.readStatus === "Not read") {
        return (book.readStatus = "Read");
      } else {
        return (book.readStatus = "Not read");
      }
    }
  });

  grid.innerHTML = "";
  myLibrary.forEach(renderLibrary);
}

delegateEvent("click", "#add-book", () => modal.showModal());
delegateEvent("submit", "form", submitBook, modal);
delegateEvent("click", "#toggle-read", toggleReadStatus);
delegateEvent("click", "#remove", removeBook);