title: Working with Input + keyup + value and then giphy
body: <p>I would like to get whatever user search via input after he will stop typing. Then i would like to pass it to giphy api but there i have a problem with passing variable/result. Here is my code :</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const mainInput = document.querySelector(".main-input");
  mainInput.addEventListener('keyup', getUserQuery);
  
  function getUserQuery(e) {
      let timeout = null;
      let userQuery;
      clearTimeout(timeout);
      timeout = setTimeout(function() {
          return userQuery = mainInput.value;
      },300)
      return userQuery;
  }
  
  //function makeUrlForSearch(getUserQuery) {
  //    let a = getUserQuery();
  //    console.log(a);
  //}</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
  }
  
  body {
      display: flex;
      flex-flow: column wrap;
      justify-content: center;
      align-items: center;
      font-size: 10px;
  }
  
  .header {
      padding: 1rem;
      margin: 1rem auto; 
  }
  
  .header-title {
      font-size: 2rem;
  }
  
  .main-input {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
      &lt;title&gt;Wyszkuj Gipha!&lt;/title&gt;
      &lt;link rel="stylesheet" href="style.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;header class="header"&gt;&lt;h1 class="header-title"&gt;Wyszukaj Gipha!&lt;/h1&gt;&lt;/header&gt;
      &lt;main class="main"&gt;
          &lt;form class="main-form"&gt;
              &lt;input type="text" placeholder="Wyszukaj Gipha!" class="main-input" id="main-input"&gt;
          &lt;/form&gt;
      &lt;/main&gt;
  &lt;script src="main.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>the makerUrlForSearch is not working and i've beend siting on it for a while but its not working.</p>
  
  <p>Can anyone help? So that i would get search made by user after 300ms after he stops typing and then use it in giphy api, but i cannot do it :(</p>