Question: In the HTML file, Add the provided HTML to the body tag, above the script tag: Using JavaScript, Using the provided categories array, create a

In the HTML file, Add the provided HTML to the body tag, above the script tag: Using JavaScript, Using the provided categories array, create a list of links based on "category". You should have category links for "business", "millionaire", and "leadership". Do not hardcode these links in HTML. These links should NOT have any href attributes. This will reduce the difficulty of the assignment to be reasonable. Display these links in the "categories" section.

categories = ["millionaire", "business", "leadership"];

When a user clicks on a category link, create a list of books from that category. Each list item will have a p tag for the name of the book and it's author. Each list item should also display an image. Set the image width to 100px.

Show the books in the "bookList" section.

Use the provided data for the book data:

[

{ bookName:"Total Money Makeover", category:"millionaire", image:"https://smallbiztrends.com/ezoimgfmt/media.smallbiztrends.com/2020/06/The-Total-Money-Makeover.png?ezimgfmt=rs:185x277/rscb12/ngcb12/notWebP", author:"Dave Ramsey" }, { bookName:"The 7 Habits of Highly Effective People", category:"leadership", image:"https://smallbiztrends.com/ezoimgfmt/media.smallbiztrends.com/2020/06/The-7-Habits-of-Highly-Effective-People.png?ezimgfmt=rs:185x277/rscb12/ng:webp/ngcb12", author:"Stephen R. Covey" }, { bookName:"Rich Dad Poor Dad", category:"millionaire", image:"https://smallbiztrends.com/ezoimgfmt/media.smallbiztrends.com/2020/06/Rich-Dad-Poor-Dad.png?ezimgfmt=rs:185x277/rscb12/ng:webp/ngcb12", author:"Dave Ramsey" }, { bookName:"Deep Work", category:"business", image:"https://m.media-amazon.com/images/I/51vmivI5KvL._SY346_.jpg", author:"Cal Newport" }, { bookName:"Everyday Millionaires", category:"millionaire", image:"https://smallbiztrends.com/ezoimgfmt/media.smallbiztrends.com/2020/06/Everyday-Millionaires.png?ezimgfmt=rs:185x277/rscb12/ng:webp/ngcb12", author:"Chris Hogan" }, { bookName:"The Innovators Dilemma", category:"business", image:"https://m.media-amazon.com/images/W/WEBP_402378-T2/images/I/51n5EwuYBwL.jpg", author:"Clayton M. Christensen" } ]

If a user clicks on a different category, remove the list of books and show only books related to the most recently clicked category.

Using JavaScript, Create a textfield and add it to the "search" section. When a user types in text that matches a book name, show that book's name in the searchResult section. The code should check for matches every time the user types in a character.

Step by Step Solution

There are 3 Steps involved in it

1 Expert Approved Answer
Step: 1 Unlock blur-text-image
Question Has Been Solved by an Expert!

Get step-by-step solutions from verified subject matter experts

Step: 2 Unlock
Step: 3 Unlock

Students Have Also Explored These Related Databases Questions!