Building a GIF search Engine in just 10 mins
Tags: javascript, webdev, tutorial, beginners
Published: 2022-01-19 16:10:15

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>

```
 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>
```
add these in the body tag 
![html](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/reaj1c9g74iwtqiq1tqs.png)
 
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;
      }
```
add these within the `style` tag 
![added styles](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xv75m0w7ww1ps3v95ko9.png)

##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 = "";
      }
```
 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 `src `and 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 ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bexv73lc7hixk56e6p6w.png)
 
##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>
```
##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
 <a href="https://twitter.com/kumarkalyan_">
  <img align="left" width="100px" src="https://cdn.jsdelivr.net/npm/simple-icons@v3/icons/twitter.svg" />
</a>