function renderBook(data) {
  const book = document.createElement("div");
  const title = document.createElement("h3");
  const author = document.createElement("span");
  const pages = document.createElement("span");
  const readContainer = document.createElement("div");
  const readInformation = document.createElement("span");
  const read = document.createElement("input");
  const removeButton = document.createElement("button");

  book.classList.add("book");

  if (data.src) {
    const image = document.createElement("img");
    image.setAttribute("src", data.src);
    image.setAttribute("alt", "book-cover");
    image.classList.add("img");
    book.appendChild(image);
  }

  title.textContent = data.title;
  author.textContent = `Author: ${data.author}`;
  pages.textContent = `Pages: ${data.pages}`;

  read.type = "checkbox";
  read.classList.add("switch");

  if (data.read) {
    readInformation.textContent = "Mark as unread: ";
    read.checked = true;
  } else {
    readInformation.textContent = "Mark as read: ";
    read.checked = false;
  }

  read.addEventListener("change", updateReadStatus);

  removeButton.textContent = "Remove";
  removeButton.classList.add("remove-button");
  removeButton.addEventListener("click", updateBooks);

  book.appendChild(title);
  book.appendChild(author);
  book.appendChild(pages);
  readContainer.appendChild(readInformation);
  readContainer.appendChild(read);
  book.appendChild(readContainer);
  book.appendChild(removeButton);

  shelf.appendChild(book);
}
// function that creates book card and appends it to shelf
function that creates book card and appends it to shelf
function that creates book card and appends it to shelf
function renderBook(data) {
  const book = document.createElement("div");
  const title = document.createElement("h3");
  const author = document.createElement("span");
  const pages = document.createElement("span");
  const readContainer = document.createElement("div");
  const readInformation = document.createElement("span");
  const read = document.createElement("input");
  const removeButton = document.createElement("button");
  book.classList.add("book");
  if (data.src) {
    const image = document.createElement("img");
    image.setAttribute("src", data.src);
    image.setAttribute("alt", "book-cover");
    image.classList.add("img");
    book.appendChild(image);
  }
  title.textContent = data.title;
  author.textContent = `Author: ${data.author}`;
  pages.textContent = `Pages: ${data.pages}`;
  read.type = "checkbox";
  read.classList.add("switch");
  if (data.read) {
    readInformation.textContent = "Mark as unread: ";
    read.checked = true;
  } else {
    readInformation.textContent = "Mark as read: ";
    read.checked = false;
  }
  read.addEventListener("change", updateReadStatus);
  removeButton.textContent = "Remove";
  removeButton.classList.add("remove-button");
  removeButton.addEventListener("click", updateBooks);
  book.appendChild(title);
  book.appendChild(author);
  book.appendChild(pages);
  readContainer.appendChild(readInformation);
  readContainer.appendChild(read);
  book.appendChild(readContainer);
  book.appendChild(removeButton);
  shelf.appendChild(book);
}
function renderBook ( data ) { const book = document . createElement ( "div" ) ; const title = document . createElement ( "h3" ) ; const author = document . createElement ( "span" ) ; const pages = document . createElement ( "span" ) ; const readContainer = document . createElement ( "div" ) ; const readInformation = document . createElement ( "span" ) ; const read = document . createElement ( "input" ) ; const removeButton = document . createElement ( "button" ) ; book . classList . add ( "book" ) ; if ( data . src ) { const image = document . createElement ( "img" ) ; image . setAttribute ( "src" , data . src ) ; image . setAttribute ( "alt" , "book-cover" ) ; image . classList . add ( "img" ) ; book . appendChild ( image ) ; } title . textContent = data . title ; author . textContent = ` ${ data . author } ` ; pages . textContent = ` ${ data . pages } ` ; read . type = "checkbox" ; read . classList . add ( "switch" ) ; if ( data . read ) { readInformation . textContent = "Mark as unread: " ; read . checked = true ; } else { readInformation . textContent = "Mark as read: " ; read . checked = false ; } read . addEventListener ( "change" , updateReadStatus ) ; removeButton . textContent = "Remove" ; removeButton . classList . add ( "remove-button" ) ; removeButton . addEventListener ( "click" , updateBooks ) ; book . appendChild ( title ) ; book . appendChild ( author ) ; book . appendChild ( pages ) ; readContainer . appendChild ( readInformation ) ; readContainer . appendChild ( read ) ; book . appendChild ( readContainer ) ; book . appendChild ( removeButton ) ; shelf . appendChild ( book ) ; }
function that creates book card and appends it to shelf
function that creates book card and appends it to shelf