Я пытаюсь создать поисковую систему GIF в JavaScript, используя Giphy API, и сейчас я застрял на последнем шаге, где мне нужно соединить строку поиска и вывод. Мне нужно получить входные данные из панели поиска и объединить их с URL-адресом, который выбирает данные из API, и мне нужно отобразить вывод. Помоги мне с твоими идеями друзья.

//1.grabing the input first document.querySelector(".js-find").addEventListener('click',function(e){ var input = document.querySelector("input").value; pushtopage(input); }); document.querySelector(".js-userinput").addEventListener('keyup',function(e){ var input = document.querySelector("input").value; if(e.which === 13){ pushtopage(input); } }); //2.Fetching data from API var url = "http://api.giphy.com/v1/gifs/search?q=Good Morning{amp}amp;api_key=5rCzgA1boJzu13W1iU36cyoAMaqVDz0u"; // AJAX Request var GiphyAJAXCall = new XMLHttpRequest(); GiphyAJAXCall.open( 'GET', url ); GiphyAJAXCall.send(); GiphyAJAXCall.addEventListener('load',function(e){ var data = e.target.response; pushtopage(data); }); //displaying the GIFs function pushtopage(input){ var response = JSON.parse(input); var imageUrls = response.data; imageUrls.forEach(function(image){ var src = image.images.fixed_height.url; console.log(src); var container = document.querySelector(".js-container"); container.innerHTML  = "{amp}lt;img src=" "   src   " " class="container-image"{amp}gt;"; }); } 
 body { width: 80%; max-width: 1024px; margin: 0 auto; } .container-padding50 { padding-top: 50px; } .container-textinput { width: 80%; display: inline-block; padding: 20px; font-size: 16px; font-family: Helvetica, sans-serif; } .container-button { width: 10%; display: inline-block; padding: 20px; background-color: skyblue; color: white; font-size: 16px; font-family: Helvetica, sans-serif; border: 1px solid white; border-radius: 5px; } .container-image { width: 20%; display: block; float: left; margin-right:3%; } 
 {amp}lt;!doctype html{amp}gt; {amp}lt;html{amp}gt; {amp}lt;head{amp}gt; {amp}lt;title{amp}gt;Giphy Search Engine{amp}lt;/title{amp}gt; {amp}lt;link rel="stylesheet" href="css/main.css"{amp}gt; {amp}lt;/head{amp}gt; {amp}lt;body{amp}gt; {amp}lt;div class="container container-padding50"{amp}gt; {amp}lt;input type="text" class="js-userinput container-textinput" placeholder="what you want enter here!" /{amp}gt; {amp}lt;button class="js-find container-button"{amp}gt;Find gif!{amp}lt;/button{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="container container-padding50 js-container"{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;script src="javascript/main.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;/body{amp}gt; {amp}lt;/html{amp}gt;