JSFiddle - React, Tailwind, and code Playground

by Ford Heacock

HTML

<input type="text" id="search"><button id="press">search bro</button>

<div class="wrapper">
  <div id="result"></div>
</div>

CSS

.wrapper {
  position: relative;
}

#result {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 50%);
}

#search, #press {
  margin: 0 auto;
  display: block;
  border-radius: 10px;
}

JavaScript

const search = document.querySelector('#search');
const press = document.querySelector('#press');
const thing = document.querySelector('#result');



function ajax(url){
  return new Promise(function(resolve,reject){
        var request = new XMLHttpRequest();
        request.open('GET', url);
        request.onload = function() {
          resolve(this.responseText);
        };
        request.onerror = reject;
        request.send();
      });
  }


press.addEventListener('click',function(){
    ajax("https://api.giphy.com/v1/gifs/translate?s=hey&api_key=dc6zaTOxFJmzC").then(function(result) {
			result = JSON.parse(result);
      thing.innerHTML = '';
  		thing.innerHTML = `<img src="${result.data.images.downsized.url}">`
    });
});