title: Input a search from the browser to an API get Request
body: <p>I am working on a homework project where I need to create a search, I need to take that search and plug it into an API request peram and have that API come back with a Gif URL relating to that search. I have the code for the search event listener, and I have the code for the API get request, where I am coming into trouble is getting them to work together. When I comment out one piece of code out the stand-alone works as intended.  I am trying to get the search URL to print to the console just to test to make sure I am receiving a URL. In the end, I will be appending it to the DOM but right now I am just focused on getting the URL back from the API.
  Any input is appreciated.</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
    &lt;head&gt;
      &lt;meta charset=&quot;UTF-8&quot; /&gt;
      &lt;title&gt;Giphy Party!&lt;/title&gt;
      &lt;link
        rel=&quot;stylesheet&quot;
        href=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css&quot;
      /&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
      &lt;div class=&quot;container text-center&quot;&gt;
        &lt;h1&gt;The Giphy Party!!!!!&lt;/h1&gt;
        &lt;h2&gt;It is Party Time!!!!!&lt;/h2&gt;
      &lt;/div&gt;
  
      &lt;form class=&quot;gform&quot;&gt;
        &lt;label for=&quot;search&quot;&gt;
          &lt;input id=&quot;searchInput&quot; type=&quot;text&quot; /&gt;
        &lt;/label&gt;
        &lt;button&gt;Search Gif&lt;/button&gt;
        &lt;button&gt;Remove Gifs&lt;/button&gt;
      &lt;/form&gt;
  
      &lt;div class=&quot;container&quot;&gt;&lt;img id=&quot;img&quot; src=&quot;&quot;&quot; alt=&quot;&quot; /&gt;&lt;/div&gt;
      &lt;script
        src=&quot;https://code.jquery.com/jquery-3.5.1.min.js&quot;
        integrity=&quot;sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=&quot;
        crossorigin=&quot;anonymous&quot;
      &gt;&lt;/script&gt;
      &lt;script src=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;https://code.jquery.com/jquery-3.2.1.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;https://unpkg.com/axios/dist/axios.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;app.js&quot;&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  
  
  '''let searchInput = document.getElementById(&quot;searchInput&quot;);
  document.querySelector(&quot;form.gform&quot;).addEventListener(&quot;submit&quot;, function (e) {
    e.preventDefault();
    console.log(searchInput.value);
  });
  
  
  let randomIndex = Math.floor(Math.random() * 10);
  
  
  async function getGif() {
    const res = await axios.get(&quot;https://api.giphy.com/v1/gifs/search&quot;, {
      params: {
        api_key: &quot;tGZu4GXgLVVp0VTINvh66xcmIfJBPqoP&quot;,
        q: searchInput,
      },
    });
    console.log(res.data.data[randomIndex].url);
  }
  getGif();'''
  </code></pre>