libscript.js

// array to store books
const myLibrary = [];

// refactored book constructor using class
class Book {
  constructor(title, author, pages, published, stats, adaptation, cover) {
    this.title = title;
    this.author = author;
    this.pages = pages;
    this.published = published;
    this.stats = stats;
    this.adaptation = adaptation;
    this.cover = cover || "images/placeholdercover.png";
    this.id = self.crypto.randomUUID(); // random uuid for each book
  }
  // methods here
  info() {
    return `<div style="text-align: center;">
    <img src="${this.cover}" alt="${this.title}" class="stamp" style="width: 103px; height: 155px; margin-bottom: 20px; margin-top: -15px">
    <div>${this.title} by ${this.author}<br>${this.pages} pages<br>Published on ${this.published}<br>${this.stats}<br>Has ${this.adaptation} adaptation</div>
    </div>`;
  }

  toggle() {
    // function to toggle book's read/unread status
    if (this.stats === "Read") {
      this.stats = "Unread";
      console.log("read --> unread");
    } else if (this.stats === "Unread") {
      this.stats = "Read";
      console.log("unread --> read");
    } else {
      console.log("Error");
    }
    // displayBooks();
    return this.stats;
  }
}

// add books to library array
function addBookToLibrary(
  title,
  author,
  pages,
  published,
  stats,
  adaptation,
  cover
) {
  // take params, create a book then store it in the array
  myLibrary.push(
    new Book(title, author, pages, published, stats, adaptation, cover)
  );
}

// manually add a few books to the array so the display can be seen
// test book 1
addBookToLibrary(
  "Fight Club",
  "Chuck Palahniuk",
  "208",
  "1996-08-17",
  "Read",
  "a movie",
  "images/fightclubcover.jpg"
);
// test book 2
addBookToLibrary(
  "American Gods",
  "Neil Gaiman",
  "465",
  "2001-06-19",
  "Read",
  "a TV show",
  "images/americangodscover.jpg"
);
// test book 3
addBookToLibrary(
  "La Belle Sauvage",
  "Philip Pullman",
  "560",
  "2017-10-19",
  "Unread",
  "no",
  "images/labellecover.jpg"
);

// wait for DOM to be fully loaded before displaying books
document.addEventListener("DOMContentLoaded", function () {
  // get the book container element
  const bookContainer = document.getElementById("bookContainer");
  if (!bookContainer) {
    console.error("bookContainer element not found!");
    return;
  }

  // get other necessary elements
  const showButton = document.getElementById("addBook");
  const bookInput = document.getElementById("bookInput");
  const outputBox = document.querySelector("output");
  const confirmBtn = document.querySelector("#confirmBtn");
  // store the form reference once
  const userInputForm = document.getElementById("userInput");

  // get form fields for validation
  const titleField = document.getElementById("title");
  const authorField = document.getElementById("author");
  const pagesField = document.getElementById("pages");
  const publishedField = document.getElementById("published");

  // check if all elements exist
  if (!showButton) console.error("addBook button not found!");
  if (!bookInput) console.error("bookInput dialog not found!");
  if (!outputBox) console.error("output element not found!");
  if (!confirmBtn) console.error("confirmBtn button not found!");
  if (!userInputForm) console.error("userInput form not found!");

  // set up realtime validation for each field
  function setupFieldValidation() {
    // title validation
    if (titleField) {
      titleField.addEventListener("input", () => {
        if (titleField.validity.valueMissing) {
          titleField.setCustomValidity("Title is required");
        } else if (titleField.validity.tooShort) {
          titleField.setCustomValidity(
            "Title must be at least 1 character long"
          );
        } else {
          titleField.setCustomValidity("");
        }
        titleField.reportValidity();
      });

      titleField.addEventListener("blur", () => {
        titleField.reportValidity();
      });
    }

    // author validation
    if (authorField) {
      authorField.addEventListener("input", () => {
        if (authorField.validity.valueMissing) {
          authorField.setCustomValidity("Author is required");
        } else if (authorField.validity.tooShort) {
          authorField.setCustomValidity(
            "Author must be at least 1 character long"
          );
        } else {
          authorField.setCustomValidity("");
        }
        authorField.reportValidity();
      });

      authorField.addEventListener("blur", () => {
        authorField.reportValidity();
      });
    }

    // pages validation
    if (pagesField) {
      pagesField.addEventListener("input", () => {
        if (pagesField.validity.valueMissing) {
          pagesField.setCustomValidity("Number of pages is required");
        } else if (pagesField.validity.rangeUnderflow) {
          pagesField.setCustomValidity("Number of pages must be at least 1");
        } else if (pagesField.validity.badInput) {
          pagesField.setCustomValidity("Please enter a valid number");
        } else {
          pagesField.setCustomValidity("");
        }
        pagesField.reportValidity();
      });

      pagesField.addEventListener("blur", () => {
        pagesField.reportValidity();
      });
    }

    // publication date validation
    if (publishedField) {
      publishedField.addEventListener("input", () => {
        if (publishedField.validity.valueMissing) {
          publishedField.setCustomValidity("Publication date is required");
        } else {
          publishedField.setCustomValidity("");
        }
        publishedField.reportValidity();
      });

      publishedField.addEventListener("blur", () => {
        publishedField.reportValidity();
      });
    }
  }

  // validate all fields before submission
  function validateAllFields() {
    let isValid = true;
    const fields = [titleField, authorField, pagesField, publishedField];

    fields.forEach((field) => {
      if (field && !field.checkValidity()) {
        field.reportValidity();
        isValid = false;
      }
    });

    return isValid;
  }

  // loop through array to display library
  function displayBooks() {
    // clear existing books first to avoid duplicates
    bookContainer.innerHTML = "";

    // add each book to the container on its own card
    for (const book of myLibrary) {
      const bookCard = document.createElement("div");
      bookCard.classList.add("bookCard");
      bookCard.dataset.id = book.id;

      // create icon bar
      const iconBar = document.createElement("div");
      iconBar.classList.add("icon-bar");

      // book icons
      const bookIcon = document.createElement("span");
      bookIcon.title = "toggle read/unread";
      bookIcon.style.cursor = "pointer";
      bookIcon.innerHTML = `<img src="${
        book.stats === "Read"
          ? "images/book-open-variant.svg"
          : "images/book-open-variant-outline.svg"
      }" class="${book.stats === "Read" ? "book-bold" : "book-outline"}">`;
      bookIcon.classList.add("book-icon-left");
      // toggle read/unread status
      bookIcon.addEventListener("click", function () {
        book.toggle();
        displayBooks();
      });

      // ❌ icon
      const crossIcon = document.createElement("span");
      crossIcon.title = "delete book";
      crossIcon.style.cursor = "pointer";
      crossIcon.innerHTML = `<img src="images/alpha-x-box-outline.svg" class="cross">`;
      // remove book
      crossIcon.addEventListener("click", function () {
        const idToDelete = bookCard.dataset.id;
        const index = myLibrary.findIndex((book) => book.id === idToDelete);
        if (index !== -1) {
          myLibrary.splice(index, 1);
        }
        bookCard.remove();
      });

      // vertical line
      const verticalLine = document.createElement("div");
      verticalLine.classList.add("verticalLine");

      // vertical dots
      const holePunch1 = document.createElement("span");
      holePunch1.classList.add("holePunch1");
      const holePunch2 = document.createElement("span");
      holePunch2.classList.add("holePunch2");
      const holePunch3 = document.createElement("span");
      holePunch3.classList.add("holePunch3");

      // appending elements to book card
      iconBar.appendChild(bookIcon);
      iconBar.appendChild(crossIcon);
      bookCard.appendChild(verticalLine);
      bookCard.appendChild(holePunch1);
      bookCard.appendChild(holePunch2);
      bookCard.appendChild(holePunch3);
      bookCard.appendChild(iconBar);

      // book info
      bookCard.insertAdjacentHTML("beforeend", `<p>${book.info()}</p>`);
      bookContainer.appendChild(bookCard);
    }

    console.log("Books displayed:", myLibrary.length); // debugging
  }

  // display initial books
  displayBooks();

  // set up validation when DOM is ready
  setupFieldValidation();

  // bookInput opens modal
  showButton.addEventListener("click", () => {
    bookInput.showModal();
  });

  // cancel closes dialog without submitting
  bookInput.addEventListener("close", (e) => {
    // make sure form exists before resetting
    if (userInputForm) {
      // clear form input
      userInputForm.reset();
      // clear any custom validation messages
      const fields = [titleField, authorField, pagesField, publishedField];
      fields.forEach((field) => {
        if (field) {
          field.setCustomValidity("");
        }
      });
    } else {
      console.error("Cannot reset form - userInput form not found!");
    }
  });

  // handle form submission
  confirmBtn.addEventListener("click", (event) => {
    event.preventDefault(); // don't submit to server

    // validate all fields first
    if (!validateAllFields()) {
      console.log("Form validation failed");
      // stop here if validation fails
      return;
    }

    // collect form data if validation passes
    const title = document.getElementById("title")?.value;
    const author = document.getElementById("author")?.value;
    const pages = document.getElementById("pages")?.value;
    const published = document.getElementById("published")?.value;
    const stats = document.getElementById("stats")?.value;
    const adaptation = document.getElementById("adaptation")?.value;
    const coverInput = document.getElementById("cover");
    let coverPath = "images/placeholdercover.png"; // default cover

    console.log("Form data collected:", {
      title,
      author,
      pages,
      published,
      stats,
      adaptation,
    });

    // cover file upload
    if (coverInput && coverInput.files && coverInput.files[0]) {
      coverPath = URL.createObjectURL(coverInput.files[0]);
    }

    // add book with the collected data
    addBookToLibrary(
      title,
      author,
      pages,
      published,
      stats,
      adaptation,
      coverPath
    );

    console.log("Book added to library, new count:", myLibrary.length);

    // redisplay all books
    displayBooks();

    // close dialog
    bookInput.close("default");
  });
});

console.table(myLibrary);