Question

Question #211484

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

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

Expert's answer

<!DOCTYPE html>
<html>


<head>
  <title>Giphy Search Engine</title>
  <style>
    body {
      width: 80%;
      max-width: 1024px;
      margin: 0 auto;
    }


    .header {
      padding: 100px 50px 50px 40px;
      position: relative;
      top: 50px;
    }


    h1 {
      font-weight: bold;
      font-style: normal;
      font-family: "Times New Roman";
      font-size: 72px;
      color: #090;
      text-align: center;
    }


    .container-padding50 {
      padding: 80px 0px 0px 30px;
    }


    .container-textinput {
      width: 70%;
      display: inline-block;
      padding: 16px;
      font-size: 20px;
      font-family: Helvetica, sans-serif;
    }


    .container-button {
      width: 20%;
      display: inline-block;
      padding: 16px;
      background-color: green;
      color: white;
      font-size: 20px;
      font-family: Helvetica, sans-serif;


      border: 1px solid green;
      border-radius: 5px;
    }


    .container-image {
      width: 30%;
      display: block;
      float: left;
      margin-right: 3%;
    }
  </style>
</head>


<body>
  <div class="header">
    <h1>Gif Search Engine</h1>
  </div>
  <div class="container container-padding50">
    <input type="text" class="js-userinput container-textinput" />
    <button class="js-go container-button">Search!</button>
  </div>
  <div class="container container-padding50 js-container"></div>


  <!-- Link to JavaScript File here-->
  <script>
    document.querySelector(".js-go").addEventListener("click", function () {
      var inputValue = document.querySelector(".js-userinput").value;
      var userInput = getUserInput();
      searchGiphy(userInput);
    });


    document
      .querySelector(".js-userinput").addEventListener("keyup", function (data) {
        if (data.which === 13) {
          var userInput = getUserInput();
          searchGiphy(userInput);
        }
      });


    function getUserInput() {
      var inputValue = document.querySelector(".js-userinput").value;


      return inputValue;
    }


    function searchGiphy(searchQuery) {
      var url =
        "https://api.giphy.com/v1/gifs/search?api_key=dc6zaTOxFJmzC&q=" + searchQuery;
      // AJAX Request
      var GiphyAJAXCall = new XMLHttpRequest();
      GiphyAJAXCall.open("GET", url);
      GiphyAJAXCall.send();


      GiphyAJAXCall.addEventListener("load", function (data) {
        var actualData = data.target.response;
        pushToDOM(actualData);
        console.log(actualData);
      });
    }


    function pushToDOM(response) {
      // turn response into real javascript object
      response = JSON.parse(response);
      // drill down to the data array
      var images = response.data;


      // find the container to hold this stuff in DOM
      var container = document.querySelector(".js-container");
      // clear it of old content since this function will be used on every search
      // we want to reset the div
      container.innerHTML = "";


      // loop through data array and add IMG html
      images.forEach(function (image) {
        // find img src
        var src = image.images.fixed_height.url;


        // concatenate a new IMG tag
        container.innerHTML += "<img src='" + src + "' class='container-image' />";
      });
    }


  </script>
</body>


</html>

Learn more about our help with Assignments: Programming & Computer Science

Comments

No comments. Be the first!