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

HTML, CSS3, JavaScript
GIF API key
little knowledge of html events and Ajax will be preferred
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

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

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

Grab the input form the user
Get data using the GIF API
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 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

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

Building a GIF search Engine in just 10 mins