title: Bookmark Program using JavaScript
body: <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css&quot; integrity=&quot;sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z&quot; crossorigin=&quot;anonymous&quot; /&gt;
      &lt;script src=&quot;https://code.jquery.com/jquery-3.5.1.slim.min.js&quot; integrity=&quot;sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js&quot; integrity=&quot;sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js&quot; integrity=&quot;sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div class=&quot;container&quot;&gt;
          &lt;h1 class=&quot;heading&quot;&gt;Book Search&lt;/h1&gt;
          &lt;input placeholder=&quot;Type Book name&quot; class=&quot;searchBar&quot; id=&quot;searchInput&quot; type=&quot;search&quot;&gt;
          &lt;br&gt;
          &lt;select id=&quot;selectDisplayCount&quot; class=&quot;options&quot;&gt;
              &lt;option selected value=&quot;10&quot;&gt;10 Books&lt;/option&gt;
              &lt;option value=&quot;20&quot;&gt;20 Books&lt;/option&gt;
              &lt;option value=&quot;30&quot;&gt;30 Books&lt;/option&gt;
          &lt;/select&gt;
      &lt;/div&gt;
      &lt;div id=&quot;searchResults&quot;&gt;
          &lt;div class=&quot;col-12 d-none mt-5&quot; id=&quot;spinner&quot;&gt;
              &lt;div class=&quot;d-flex flex-row justify-content-center&quot;&gt;
                  &lt;div class=&quot;spinner-border&quot; role=&quot;status&quot;&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  
  </code></pre>
  <pre><code>let searchInputEl = document.getElementById(&quot;searchInput&quot;);
  let spinnerEl = document.getElementById(&quot;spinner&quot;);
  let searchresultsEl = document.getElementById(&quot;searchResults&quot;)
  let selectDisplayCountEl = document.getElementById(&quot;selectDisplayCount&quot;);
  let bookcount = selectDisplayCountEl.value;
  
  let formData = {
      count: &quot;10 Books&quot;,
  }
  
  function createAndAppendSearchResult(result) {
      let {
          title,
          imageLink,
          author
      } = result;
      let resultItemEl = document.createElement(&quot;div&quot;);
      resultItemEl.classList.add(&quot;country-card&quot;, &quot;col-6&quot;, &quot;mr-auto&quot;, &quot;ml-auto&quot;, &quot;d-flex&quot;, &quot;flex-column&quot;)
      searchresultsEl.appendChild(resultItemEl);
  
      let imageEl = document.createElement(&quot;img&quot;);
      imageEl.classList.add(&quot;image&quot;, &quot;mt-auto&quot;, &quot;mb-auto&quot;)
      imageEl.src = imageLink;
      resultItemEl.appendChild(imageEl);
  
      let authorEl = document.createElement(&quot;p&quot;);
      authorEl.classList.add(&quot;author-name&quot;)
      authorEl.textContent = author;
      resultItemEl.appendChild(authorEl);
  }
  
  function displaySearchResults(searchresult) {
      for (let result of searchresult) {
          let titleName = result.title
          if (titleName.includes(searchInputEl.value)) {
              createAndAppendSearchResult(result);
          } else {
              searchInputEl.textontent = &quot;No reuslts found&quot;;
          }
      }
  }
  
  function searchBook(event) {
      if (event.key === &quot;Enter&quot;) {
          let url = &quot;https://apis.ccbp.in/book-store?title=kalam&amp;maxResults=30&quot; + searchInput;
          let options = {
              method: &quot;GET&quot;
          }
          spinnerEl.classList.remove(&quot;d-none&quot;);
          searchresultsEl.classList.add(&quot;d-none&quot;);
          fetch(url, options)
              .then(function(response) {
                  return response.json();
              })
              .then(function(jsonData) {
                  searchresultsEl.classList.remove(&quot;d-none&quot;);
                  spinnerEl.classList.add(&quot;d-none&quot;);
                  console.log(jsonData)
                  let {
                      search_results
                  } = jsonData;
                  console.log(JSON.stringify(jsonData))
                  displaySearchResults(search_results);
              })
      }
  }
  
  
  selectDisplayCountEl.addEventListener(&quot;change&quot;, function(event) {
      formData.count = event.target.value;
      console.log(formData.count)
  });
  searchInputEl.addEventListener(&quot;keydown&quot;, searchBook);
  </code></pre>
  <p>errors I am getting</p>
  <p>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</p>
  <p>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</p>
  <p>how exactly it should work is:</p>
  <p><a href="https://assets.ccbp.in/frontend/content/dynamic-webapps/book_search_output.gif" rel="nofollow noreferrer">https://assets.ccbp.in/frontend/content/dynamic-webapps/book_search_output.gif</a></p>
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>let searchInputEl = document.getElementById("searchInput");
  let spinnerEl = document.getElementById("spinner");
  let searchresultsEl = document.getElementById("searchResults")
  let selectDisplayCountEl = document.getElementById("selectDisplayCount");
  let bookcount = selectDisplayCountEl.value;
  
  let formData = {
      count: "10 Books",
  }
  
  function createAndAppendSearchResult(result) {
      let {
          title,
          imageLink,
          author
      } = result;
      let resultItemEl = document.createElement("div");
      resultItemEl.classList.add("country-card", "col-6", "mr-auto", "ml-auto", "d-flex", "flex-column")
      searchresultsEl.appendChild(resultItemEl);
  
      let imageEl = document.createElement("img");
      imageEl.classList.add("image", "mt-auto", "mb-auto")
      imageEl.src = imageLink;
      resultItemEl.appendChild(imageEl);
  
      let authorEl = document.createElement("p");
      authorEl.classList.add("author-name")
      authorEl.textContent = author;
      resultItemEl.appendChild(authorEl);
  }
  
  function displaySearchResults(searchresult) {
      for (let result of searchresult) {
          let titleName = result.title
          if (titleName.includes(searchInputEl.value)) {
              createAndAppendSearchResult(result);
          } else {
              searchInputEl.textontent = "No reuslts found";
          }
      }
  }
  
  function searchBook(event) {
      if (event.key === "Enter") {
          let url = "https://apis.ccbp.in/book-store?title=kalam&amp;maxResults=30" + searchInput;
          let options = {
              method: "GET"
          }
          spinnerEl.classList.remove("d-none");
          searchresultsEl.classList.add("d-none");
          fetch(url, options)
              .then(function(response) {
                  return response.json();
              })
              .then(function(jsonData) {
                  searchresultsEl.classList.remove("d-none");
                  spinnerEl.classList.add("d-none");
                  console.log(jsonData)
                  let {
                      search_results
                  } = jsonData;
                  console.log(JSON.stringify(jsonData))
                  displaySearchResults(search_results);
              })
      }
  }
  
  
  selectDisplayCountEl.addEventListener("change", function(event) {
      formData.count = event.target.value;
      console.log(formData.count)
  });
  searchInputEl.addEventListener("keydown", searchBook);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel='stylesheet' href='//stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css' integrity='sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z' crossorigin='anonymous' /&gt;
  &lt;script src='//code.jquery.com/jquery-3.5.1.slim.min.js' integrity='sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj' crossorigin='anonymous'&gt;&lt;/script&gt;
  &lt;script src='//cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js' integrity='sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN' crossorigin='anonymous'&gt;&lt;/script&gt;
  &lt;script src='//stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js' integrity='sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV' crossorigin='anonymous'&gt;&lt;/script&gt;
  
  &lt;div class='container'&gt;
      &lt;h1 class='heading'&gt;Book Search&lt;/h1&gt;
      &lt;input placeholder='Type Book name' class='searchBar' id='searchInput' type='search'&gt;
      &lt;br&gt;
      &lt;select id='selectDisplayCount' class='options'&gt;
          &lt;option selected value='10'&gt;10 Books&lt;/option&gt;
          &lt;option value='20'&gt;20 Books&lt;/option&gt;
          &lt;option value='30'&gt;30 Books&lt;/option&gt;
      &lt;/select&gt;
  &lt;/div&gt;
  &lt;div id='searchResults'&gt;
      &lt;div class='col-12 d-none mt-5' id='spinner'&gt;
          &lt;div class='d-flex flex-row justify-content-center'&gt;
              &lt;div class='spinner-border' role='status'&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>