Create GIF Images Using HTML JQuery

February 17, 2024

Create GIF images using HTML JQuery

To Create GIF images using HTML JQuery, First create one HTML DIV. After you can be Heading TAG, Add one Input field add attributes type, id, and placeholder ETC. After you can add one button to fetch GIF data.

In the Input fields you can search anything GIF images, GIF images will appear in the list format. You can see all the GIF images that you searched in the search fields. Add a div tag to show all GIF images in the list format.

To perform this action need to add Jquery Libaray.

In the Search Filed When we search any in the search field, After the search remove the search text in the field.

How To Download GIF images:

If you are using a Laptop click the right button just click the “save image as” GIF download on your local laptop.

If you are using mobiles or Tablets press the long button on the GIF pop-up that will open and just click the “Download image” The GIF image will be stored on your Mobiles and Tables.

To Create GIF images using HTML JQuery Need GIF API key.

How do we get the API key? Go to https://developers.giphy.com Create your account get Giphy API KEY and add in the script tag.

Demo

Video Link: https://youtu.be/12BX93vYWXk

HTML Code of Create GIF images using HTML jQuery :

<h1>GIF Search App</h1>

<button type="submit" onclick="search()">Search GIF</button>

</div>

Script Code of Create GIF images using HTML jQuery :

const API_KEY = 'YOUR_API_KEY';

const div = document.getElementById('divs');

function search(){

const searchTerm = document.getElementById ('searchField').value.trim();

div.innerHTML = "";

fetch(`https://api.giphy.com/v1/gifs/search?api_key=${API_KEY}&q=${searchTerm}&limit=10`)

.then(response => {

return response.json();

})

.then(data => {

console.log(data)

data.data.forEach(gif => {

const d = document.createElement('div');

d.classList.add('item');

const img = document.createElement ('img');

img.src = gif.images.downsized.url;

d.appendChild(img);

div.appendChild(d);

});

})

$('#searchField').val(' ');

}

</script>

CSS code is Here:

<style>

.item {

margin-bottom: 10px;

}

div#divs {

width: 100%;

display: flow;

min-width: 500px;

max-width: 500px;

margin: 0 auto;

}

div#divs img {

width: 100%;

aspect-ratio: 1/1;

max-width: 500px;

min-width: 500px;

margin: 0 auto;

display: block;

}

.div__center {

width: 100%;

min-width: 500px;

max-width: 500px;

margin: 0 auto;

margin-bottom: 20px;

text-align: center;

}

</style>

Jquery Library:

Create GIF Images Using HTML JQuery