JSFiddle - React, Tailwind, and code Playground

by Ford Heacock

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<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');

press.addEventListener('click',function(){

  var request = new XMLHttpRequest();
  request.open('GET', `https://api.giphy.com/v1/gifs/translate?s=${search.value}&api_key=dc6zaTOxFJmzC`, true);

  request.onload = function() {
    if (request.status >= 200 && request.status < 400) {
      callBack(JSON.parse(request.responseText));
    } else {
			console.log('apollo anton oh no');
    }
  };
  request.send();
});

function callBack(result) {
	thing.innerHTML = '';
  thing.innerHTML = `<img src="${result.data.images.downsized.url}">`
}