DEV Community

Cover image for Building a GIF search Engine in just 10 mins
Kumar Kalyan
Kumar Kalyan

Posted on

Building a GIF search Engine in just 10 mins

Hi everyone in this article I will explain about how you can build your own gif search engine using Html, CSS and JavaScript in just 10 mins and don't worry this is a beginner friendly tutorial.

Prerequisite

  1. HTML, CSS3, JavaScript
  2. GIF API key
  3. little knowledge of html events and Ajax will be preferred
  4. Your time and patience ((The most important)

The Html

Html or Hyper Text Markup Language which defines the structure of webpage, like headings, paragraphs, line breaks, etc. just like a skeleton in Human body. So, in our gif search engine we also need a structure like a placeholder which will let us know about which type of GIF's user wants to see and a button for submitting the input.

  • First, we need to create a file named index.html (let me tell you that we will be using internal CSS and JavaScript, i.e. we will have our CSS and JavaScript code within our index.html file using <style></style> and <script></script > tags)

  • Now let's add the boiler plate

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>GIF Search Engine</title>
    <style>
      /*this will contain our styles */
    </style>
  </head>
  <body>
    <script>
      /*this will contain our JavaScript code */
    </script>
  </body>
</html>

Enter fullscreen mode Exit fullscreen mode

here we have<style > & <script > where we will define CSS and JavaScript

Now let's add some HTML tags to structure our web page

 <div class="container">
      <h1>GIF Search engine</h1>
      <div class="inputfiled">
        <input
          type="text"
          class="input userinput"
          placeholder="enter something"
        />
        <button class="go">GO !</button>
      </div>

      <div class="output"></div>
    </div>
Enter fullscreen mode Exit fullscreen mode

add these in the body tag
html

As you can see that our structure is ready now let's add some styles to it

the CSS

CSS will bring styles to our webpage, just like adding taste to food

 .container {
        text-align: center;
        font-family: sans-serif;
      }
      .input {
        width: 50%;
        padding: 15px;
        margin: 2px;
        font-size: 16px;
        color: blueviolet;
        font-weight: 300;
        border: 2px solid rgb(233, 173, 173);
      }
      button {
        width: 10%;
        padding: 15px;
        margin: 2px;
        color: white;
        background-color: purple;
        border: 2px solid purple;
        cursor: pointer;
      }
      img {
        margin: 3px;
      }
      .inputfiled {
        padding: 20px;
      }
Enter fullscreen mode Exit fullscreen mode

add these within the style tag
added styles

the JavaScript

JavaScript brings dynamicity to a web page, like you may set some instructions on clicking a button or every time when the user requests for a new category of GIF we need to return a new output or as we are using the GIF API JavaScript will help us to get data form the GIF server.

todos

  1. Grab the input form the user
  2. Get data using the GIF API
  3. Display the data to the user

now let's add JavaScript

 /*this will contain our JavaScript code */
      /*Grab the input from teh user */
      var input = document.querySelector("input");
      document.querySelector("input").addEventListener("keyup", (e) => {
        /*only works when Enter key is clicked */
        clearOutput();
        if (e.which === 13) {
          getData(input.value);
        }
      });
      document.querySelector("button").addEventListener("click", (e) => {
        clearOutput();
        getData(input.value);
      });
      /*Get data from the API*/
      function getData(input) {
        var API_KEY = "Your api key ";
        var url =
          "https://api.giphy.com/v1/gifs/search?api_key=" +
          API_KEY +
          "&q=" +
          input +
          "&limit=25&offset=0&rating=g&lang=en"; /*this will only return maximum  25 gifs at a time*/
        fetch(url)
          .then((response) => response.json())
          .then((data) => showData(data.data))
          .catch((e) => {
            console.log(e);
          });
      }
      /*Display the output*/
      function showData(data) {
        data.forEach((element) => {
          var src = element.images.fixed_height.url;
          var output = document.querySelector(".output");
          output.innerHTML += "<img src=" + src + " >";
        });
      }
      /*clearing the ouptut*/
      function clearOutput() {
        var output = document.querySelector(".output");
        output.innerHTML = "";
      }
Enter fullscreen mode Exit fullscreen mode

Here you can see that I have added two event listeners to grab the input form the user and then I am passing the input to the getData()so that using the input we can fetch or bring required data from the GIF server the fetch() APIO returns a promise and we are resolving it via then() and catch () Now as we got the data form the API now I am passing it to showData() where I am looping through an array named data and then extracting the image url from an element and storing it to an variable named srcand at the end we are just dynamically adding an image tag to the output div.

Now you must be thinking about the clearOutput(). let me tell you if you enter "dog" in the input then you will get maximum 25 dog GIF images so basically we are adding img tags , now when you again enter another input like "cat " we need to clear everything from our output div or else the "cat" GIF's will be concatenated with the dog GIF's

gif serarch engine

put it together

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>GIF Search Engine</title>
    <style>
      /*this will contain our styles */
      .container {
        text-align: center;
        font-family: sans-serif;
      }
      .input {
        width: 50%;
        padding: 15px;
        margin: 2px;
        font-size: 16px;
        color: blueviolet;
        font-weight: 300;
        border: 2px solid rgb(233, 173, 173);
      }
      button {
        width: 10%;
        padding: 15px;
        margin: 2px;
        color: white;
        background-color: purple;
        border: 2px solid purple;
        cursor: pointer;
      }
      img {
        margin: 3px;
      }
      .inputfiled {
        padding: 20px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>GIF Search engine</h1>
      <div class="inputfiled">
        <input
          type="text"
          class="input userinput"
          placeholder="enter something"
        />
        <button class="go">GO !</button>
      </div>

      <div class="output"></div>
    </div>
    <script>
      /*this will contain our JavaScript code */
      /*Grab the input from teh user */
      var input = document.querySelector("input");
      document.querySelector("input").addEventListener("keyup", (e) => {
        /*only works when Enter key is clicked */
        clearOutput();
        if (e.which === 13) {
          getData(input.value);
        }
      });
      document.querySelector("button").addEventListener("click", (e) => {
        clearOutput();
        getData(input.value);
      });
      /*Get data from the API*/
      function getData(input) {
        var API_KEY = "your API key";
        var url =
          "https://api.giphy.com/v1/gifs/search?api_key=" +
          API_KEY +
          "&q=" +
          input +
          "&limit=25&offset=0&rating=g&lang=en"; /*this will only return maximum  25 gifs at a time*/
        fetch(url)
          .then((response) => response.json())
          .then((data) => showData(data.data))
          .catch((e) => {
            console.log(e);
          });
      }
      /*Display the output*/
      function showData(data) {
        data.forEach((element) => {
          let src = element.images.fixed_height.url;
          var output = document.querySelector(".output");
          output.innerHTML += "<img src=" + src + " >";
        });
      }
      /*clearing the ouptut*/
      function clearOutput() {
        var output = document.querySelector(".output");
        output.innerHTML = "";
      }
    </script>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

conclusion

Congrads yo just learned to create a GIF search engine. Feel free to ask me if you have any queries .. Stay happy Stay safe

Connect



Discussion (4)

Collapse
corentinbettiol profile image
Corentin Bettiol

This tutorial should be named "how to query an api in just 10 mins", because we don't handle gif search.

Collapse
kumarkalyan profile image
Kumar Kalyan Author

thanks for your comment

Collapse
jonrandy profile image
Jon Randy • Edited on

It would have been better to use a form - this way you would only need handle the submit event - rather than separate code for text field keypress and button click. Much simpler, probably more accessible too.

Also, in your code samples you can use syntax highlighting by writing html, js etc. after the opening three backticks of the code section 👍

Collapse
kumarkalyan profile image
Kumar Kalyan Author

well, that's a good idea , I will implement this in my next article