odin-library/script.js

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(book) {
  library.push(book);
}

let books = [
  ["book", "author", 1, true],
  ["book", "author", 1, true],
  ["book", "author", 1, true],
  ["book", "author", 1, true],
  ["book", "author", 1, true],
  ["book", "author", 1, true],
  ["book", "author", 1, true],
  ["book", "author", 1, true],
  ["book", "author", 1, true],
  ["book", "author", 1, true],
  ["book", "author", 1, true],
]

books.forEach(book => {
  let aBook = new Book(book[0], book[1], book[2], book[3]);
  addBookToLibrary(aBook);
  displayBooks();
})

function displayBooks() {
  bookGrid.querySelectorAll("& > *").forEach(book => {
    book.remove();
  })
  let pos = 0;
  library.forEach(book => {
    bookDiv = document.createElement("div");
    bookDiv.classList.add("book");
    bookDiv.setAttribute("arrayPos", pos)

    bookDetails = document.createElement("div");
    bookDetails.classList.add("book-details");
    bookDetails.innerText = `${book.title}\n${book.author}\n${book.pages} pages\n${book.read ? "read" : "not read yet"}`;
    bookDiv.append(bookDetails);

    bookActions = document.createElement("div");
    bookActions.classList.add("book-actions");
    
    toggleRead = document.createElement("i");
    toggleRead.classList.add("fa-solid", "fa-book");
    toggleRead.addEventListener("click", function() {
      library[this.parentNode.parentNode.getAttribute("arrayPos")].read = !library[this.parentNode.parentNode.getAttribute("arrayPos")].read;
      displayBooks();
    });
    bookActions.append(toggleRead);

    edit = document.createElement("i");
    edit.classList.add("fa-solid", "fa-edit");
    edit.addEventListener("click", function() {
      library.splice(this.parentNode.parentNode.getAttribute("arrayPos"), 1);
      displayBooks();
    });
    bookActions.append(edit);

    removeBtn = document.createElement("i");
    removeBtn.classList.add("fa-solid", "fa-trash");
    removeBtn.addEventListener("click", function() {
      library.splice(this.parentNode.parentNode.getAttribute("arrayPos"), 1);
      displayBooks();
    });
    bookActions.append(removeBtn);

    bookDiv.append(bookActions);

    bookGrid.append(bookDiv);
    pos++;
  })
}

// const newBookBtn = document.querySelector("button#new-book");
// const newBookDialog = document.querySelector("dialog#new-book");
// newBookBtn.addEventListener("click", () => {
//   newBookDialog.showModal();
// })
// newBookDialog.querySelector("button[type='submit']").addEventListener("click", () => {
//   let names = [];
//   newBookDialog.querySelectorAll("form > input").forEach(input => {
//     if (!names.includes(input.name)) {
//       names.push(input.name);
//     }
//   });
//   names.forEach(one => {
//     document.getElementsByName(one).value = "";
//   })
// })