Library Project

Getting Started

1. Open your command line and navigate to your repos directory (if you do not have a repos folder, then you can use mkdir repos to create one)
2. Use this template repository to start a new project in your repos folder: git clone <repo_name>
3. cd repo_name to navigate into your new repo directory
4. Start Visual Studio Code and select 'Open Folder'. Then select repo_name to open the folder in the editor (or just type code . in your terminal inside the repo directory)
5. Follow the instructions on the README.md file to complete exercises
6. Open the index.html file to get started

Instructions

• In your index.html

1. Add a label and input box for the title
2. Add a label and input box for the author
3. Add a label and checkbox for the read property
4. Add a submit button to add a new book

• In your app.js

git@github.com:FebaSox/Library_Project.git 2. Create a class Library that has the following properties and methods:

• Book count (number)
• Books (array of books)
• markRead method that will:
  • Take in a parameter checkbox and id
  • Loop through the library books
  • If the book id is the same as the param id, change the book read property to true, the checkbox checked attribute to true, and the checked disabled attribute to true
• addBook method that will:
  • Select the title input value, author input value, and read checkbox value
  • Use the book constructor to create a new book, passing in the input value, author value, and read checkbox value as params
  • Create a new table row
  • Create new table cells title, author and read properties of the newly added book
  • Append the new table cells to the newly created row
  • Select the table body
  • Append the new row to the table body
  • Increment library bookCount by one

3. Select the Add Book button from your index.html
4. Add an event listener to the button element that listens for a click event, and calls the library addBook

BONUS

• Add a method to the Library class that removes a book from the books array
• Update your UI on the index.html page to have a Remove button per book item, with an event listener for 'click' events to call the removeBook Library method
• Hint: Use the book id property to find, then remove the book