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
Connect
Top comments (6)
This tutorial should be named "how to query an api in just 10 mins", because we don't handle gif search.
thanks for your comment
It would have been better to use a
form- this way you would only need handle thesubmitevent - 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,jsetc. after the opening three backticks of the code section 👍well, that's a good idea , I will implement this in my next article
In general, I used to think that GIFs were very difficult to make on my own, and if I needed any GIF image, I always looked for something suitable on the Internet. Now I prefer to make my own GIFs, and it doesn't even matter that some of the images I use may be in poor quality. I found article letsenhance.io/blog/all/tutorial-1..., which has tips not only on how to create GIF images, but also how to enlarge an image and improve its quality using let's enhance. If you work with images, then this will come in handy.
Thanks for the feed back I will definately work in this