<header>
  <h1>Giphy Search</h1>
  
  <form action="" method="post" autocomplete="off">
    <label for="" style="display: none;">Search</label>
    <input class="search" type="text" name="search" placeholder="Search" required>
    <input class="btn" type="submit" value="OK">
    <input class="btn clear" value="Clear" readonly>
  </form>
</header>

<section>
  <div class="giphy">
    <a href="https://giphy.com/" target="_blank">
      <img src="https://res.cloudinary.com/beumsk/image/upload/v1520544016/giphy-logo-6611-s-_vme7aa.png" alt="giphy">
    </a>
  </div>
</section>

<footer>
  <p>Created by <a href="https://remybeumier.be" target="_blank">Rémy Beumier</a> with <a href="https://developers.giphy.com/docs/" target="_blank">Giphy API</a></p>
</footer>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-family: Arial;
  text-align: center;
  min-height: 100vh;
  min-width: 370px;
  background-image: linear-gradient(135deg,#00ccff,#9933ff 31%,#e646b6 52%,#fff9aa 77%,#00ff99,#00ccff);
  background-size: 200%;
}

header h1 {
  padding: 20px 10px;
  letter-spacing: 0.2em;
  color: white;
}

form * {
  background: rgba(256,256,256, 0.3);
  color: white;
}

form .search, form .btn {
  padding: 10px;
  border-radius: 2px;
  font-size: 16px;
  border: 1px solid white;
}

::placeholder {
  color: #f5f5f5;
}

form .search {
  width: 40%;
  min-width: 200px;
  max-width: 600px; 
}
form .search:focus {
  outline: 0;
  color: #333;
  background: white;
  box-shadow: 0 0 1px 1px rgba(0,0,0,0.3);
}

form .btn {
  cursor: pointer;
  width: 60px;
}
form .btn[type="submit"] {
  -webkit-appearance: button;
}
form .btn:hover {
  color: #333;
  background: white;
}
form .clear:hover {
  background: ;
}

.giphy {
  padding: 20px 0 15px 0;
}

.giphy img {
  width: 200px;
  max-width: 800px;
  margin: auto;
  display: block;
}

.giphy img.gif {
  width: 50%;
  max-width: 600px;
  box-shadow: 0 0 2px 2px rgba(256,256,256,0.3);
}

footer {
  padding: 5px;
  font-size: 14px;
  color: white;
}

footer a {
  color: #333;
  text-decoration: none;
}
footer a:hover {
  color: white;
  text-decoration: underline;
}

// check other info returned by the API ???

var $form = $("form");
var $search = $(".search");
var $clear = $(".clear");
var $giphy = $(".giphy img");
var $giphyLink = $(".giphy a");

// launch function on form submit
$form.on("submit", function(e) {
  e.preventDefault();
  goGiphy();
});

// clear input on click
$clear.on("click", function() {
  $search.val("");
})

function goGiphy() {
  var input = $search.val();
  // Ajax call to giphy API  
  $.getJSON("https://api.giphy.com/v1/gifs/translate?api_key=bb2006d9d3454578be1a99cfad65913d&s=" + input, function(json) {
    data = JSON.parse(JSON.stringify(json));
    imgSrc = data.data.images.original.url;
    $giphy.fadeOut(1000);
    setTimeout( function() {
      $giphy.attr("src", imgSrc);
      $giphyLink.attr("href", imgSrc);
      setTimeout( function() {
        $giphy.addClass("gif");
        $giphy.fadeIn(1000);
      }, 800);
    }, 800);
  })
}