Answer to Question #169775 in HTML/JavaScript Web Application for Chandra sena reddy

Question

Book Search

In this assignment, let's build a Book Search page by applying the concepts we learned till now.

Refer to the below image.

https://assets.ccbp.in/frontend/content/dynamic-webapps/book_search_output.gif

Just for not having the image inserting option in this platform, I am giving the url of the image as that we have to generate.

Instructions:

• Add HTML input element with id searchInput inside an HTML container element
• Add HTML select element with id selectDisplayCount inside an HTML container element
• Add HTML container element with id searchResults

By following the above instructions, achieve the given functionality.

• When a value is entered in the HTML input element with id searchInput and press on Enter key
• Get title, imageLink, author (HTTP response with key search_results) by making HTTP request using fetch with URL https://apis.ccbp.in/book-store?title=kalam&maxResults=30
• Set imageLink in the HTML img element and set author in the HTML paragraph element
• When a value is entered in the HTML input element with id searchInput and an option is selected in the drop down
• Make a HTTP GET request to fetch the books based on the title entered and maximum number of results
• If search results not equal to zero, then append the search results to the HTML container element with id searchResults
• If search results equal to zero, then display "No results found"
• Add loading status with Bootstrap component spinner while making an HTTP request

Resources

Use this Background image:

https://assets.ccbp.in/frontend/dynamic-webapps/book-search-bg.png

CSS Colors used:

Text colors Hex code values used:

#323f4b

#ffffff

CSS Font families used:

• Roboto

Rules to be followed:-

• Page should consist of at least three HTML option elements inside an HTML select element with id selectDisplayCount

• Page should consist of HTML input element of type search with id searchInput inside an HTML container element

• Page should be using the Bootstrap component Spinner

• Page should consist of HTML main heading element

• Page should consist of HTML container element with id searchResults

• Page should consist of HTML container element with the CSS property background-image

• Page should consist of HTML select element with id selectDisplayCount inside an HTML container element

• When a value is entered in the HTML input element with id searchInput, x books option is selected in the HTML select element with id selectDisplayCount, an HTTP GET request with a valid url parameters title and maxResults should be made

• When a value is entered in the HTML input element with id searchInput, x books option is selected in the HTML select element with id selectDisplayCount, an HTTP GET request should be made to fetch and display x book items

• JS implementation should contain addEventListener for keydown event

please Help me.

Answer 1

Dear Chandra sena reddy, your question requires a lot of work, which neither of our experts is ready to perform for free. We advise you to convert it to a fully qualified order and we will try to help you. Please click the link below to proceed: Submit order