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

Question #169775

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.


1
Expert's answer
2021-03-13T04:42:35-0500
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

Need a fast expert's response?

Submit order

and get a quick answer at the best price

for any assignment or question with DETAILED EXPLANATIONS!

Comments

No comments. Be the first!

Leave a comment

LATEST TUTORIALS
New on Blog
APPROVED BY CLIENTS