0

These were the instructions:

  1. Add a button on each book’s display to remove the book from the library. You will need to associate your DOM elements with the actual book objects in some way. One easy solution is giving them a data-attribute that corresponds to the index of the library array.

  2. Add a button on each book’s display to change its read status. To facilitate this you will want to create the function that toggles a book’s read status on your Book prototype instance.

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <style>

  </style>
</head>

<body>
  <div id="enter">
    <!-- Add a modal when Add book button is clicked -->
    <label for="bookInfo"> Enter book info </label></br>
    <input type="text" id="inputTitle" placeholder="Title"></br>
    <input type="text" id="inputAuthor" placeholder="Author"></br>
    <input type="text" id="inputPages" placeholder="Pages"></br>
    <select id="readingProgress">
      <option disabled>--Select--</option>
      <option>Read</option>
      <option>In Progress</option>
      <option>Not Read</option>
    </select>
    <div id=submit>
      <button id="submit">Submit</button>
    </div>
    <table>
      <thead>
        <tr>
          <!--Try to make this hidden until after the first book is added, but remain viewed after first book-->
          <th>Title</th>
          <th>Author</th>
          <th>Pages</th>
          <th>Reading Status</th>
        </tr>
        <thead>
          <tbody id="bookList">

          </tbody>
    </table>
    <script>
      let myLibrary = []
      const submit = document.querySelector('#submit')
      //const tableHeading = document.querySelector('th')
      //const table = document.querySelector('table')
      const list = document.querySelector("#bookList")
      const bookTitle = document.querySelector('#inputTitle')
      const bookAuthor = document.querySelector('#inputAuthor')
      const bookPages = document.querySelector('#inputPages')
      const readOptions = document.querySelector('select')

      //Constructor to create book objects:
      function Book(title, author, pages, read) {
        this.title = title
        this.author = author
        this.pages = pages
        this.read = read
      }
      //New book objects are stored in an array:
      function addBookToLibrary() {
        if (bookTitle.value && bookAuthor.value && bookPages.value && readOptions.value) {
          myLibrary.push(new Book(bookTitle.value, bookAuthor.value, bookPages.value, readOptions.value))
        } else {
          alert("Please enter all information")
        }
        console.log(myLibrary)
      }

      //Display book:
      function displayBooks(book) {
        const row = document.createElement('tr')
        const createTitle = document.createElement('td')
        const createAuthor = document.createElement('td')
        const createPages = document.createElement('td')
        const createStatus = document.createElement('td')
        createTitle.innerHTML = book.title
        createAuthor.innerHTML = book.author
        createPages.innerHTML = book.pages
        createStatus.innerHTML = book.read
        //row.innerHTML = `<td>${book.author}<td><td>${book.pages}<td><td>${book.read}<td>`
        //above code I formatting was weird, will try back using this code
        row.appendChild(createTitle)
        row.appendChild(createAuthor)
        row.appendChild(createPages)
        row.appendChild(createStatus)
        list.appendChild(row)

        createTitle.classList.add('deleteRow')
      }

      //Remove books:
      list.addEventListener('click', function removeBook(e) {
        if (e.target.classList.contains('deleteRow')) {
          let eachIndex = e.target.parentElement.rowIndex - 1
          console.log(eachIndex)
          e.target.parentElement.remove()
          //displayBooks(myLibrary[myLibrary.length-1])

          myLibrary.forEach((book, index) => {
            if (index === eachIndex) {
              myLibrary.splice[eachIndex, 1]
            }
          })
        }
        console.log(myLibrary)
      })

      //Event Listeners:
      submit.addEventListener('click', (e) => {
        addBookToLibrary()
        displayBooks(myLibrary[myLibrary.length - 1])
      })
    </script>
</body>

</html>
biberman
  • 5,606
  • 4
  • 11
  • 35
Kristy L
  • 3
  • 1
  • 4
  • You should omit the `if(myLibrary.length === 1){` distinction. Both sides do the same thing. At most, use `if(myLibrary.length > 0)` to wrap the entire thing. – Bergi Jun 16 '20 at 12:29
  • I think your instructor imagined a solution where the `render()` call would first clear all rows, then re-render the entire table. Only then it makes sense to add the array index as a data attribute, and it would allow you to attach the same event handler function to every button (having the handler check the data attribute of the event target). In your approach, with the handlers that are closures over a book, you don't need that - you'd instead use `myLibrary.indexOf(myBook)` to find the book. – Bergi Jun 16 '20 at 12:38
  • Btw, I'd suggest you rename your `createTable` function to `createRow` (as that is what it does), and give it a parameter `function createRow(myBook) { … }` instead of always accessing the last book in the global `myLibrary` array. – Bergi Jun 16 '20 at 12:39
  • @Bergi is there a sample code you can provide to convey the deletion? – Kristy L Jun 16 '20 at 13:49
  • See [here](https://stackoverflow.com/q/3955229/1048572) for examples. You might want to separate the table rows into `` and `` so that you'd clear only the latter. – Bergi Jun 16 '20 at 13:54
  • @Bergi Could you provide a sample code in this case to show how to update the data attribute value of the row every time the row is deleted since I'd like to use it as an array index to delete the object? – Kristy L Jun 16 '20 at 14:08
  • I didn't mean to *update* it. I was suggesting to clear the entire table, then in your `render()` function do an actual loop over all books and create a new row for each book. – Bergi Jun 16 '20 at 14:18

0 Answers0