GIF Search Tool Script in HTML CSS Js

Hello dosto aaj me aapke liye ek tool ki script lekar aane wala hu jise aap use App ya fir Website me use kar sakte hai isme is tool me aapko ye dekhne ko milega, isme aap GIF download kar sakte hai or apne dosto ke saath chat me bhi send kr sakte hai isme aapko Search karne ka option milta hai Search bar me aapko type karna hai or aapko sirf likhna hai or aap jo type karenege wo aapne samne usse related aapke samne kuch gif file show hone lagenge isme aapko na kisi search button par click karna hai or na hi baaar baar Enter button press karne ki jarurat padegi sirf aapko type karte jana hai or aapke samne ussse milte julte photos show hone lagenge. Agar aapko hmari ye post acchi lagi ho to iske liye aapka dhanywaad or agar aapko koi galti lg rahi ho to hame Comment box me bta sakte hai. or aisi hi or Script pane ke liye hmare website ke saath Jude rahe ham aisi posts laate rahete hai .

What is GIF

GIF का मतलब "ग्राफिक्स इंटरचेंज फॉर्मेट" है। यह एक बिटमैप छवि प्रारूप है जिसे 1987 में CompuServe द्वारा बनाया गया था। इस लोकप्रिय छवि प्रारूप का इंटरनेट पर व्यापक समर्थन आधार है। GIF फ़ाइलें विभिन्न प्लेटफ़ॉर्म और एप्लिकेशन पर पोर्टेबल होती हैं। ज्यादातर लोगो और शार्प छवियों के लिए उपयोग की जाने वाली GIF फ़ाइलें एनिमेटेड छवि डेटा रखने में भी सक्षम हैं। यह प्रारूप छवियों में प्रति पिक्सेल 8 बिट्स का समर्थन करता है। जिसके लिए एक एकल GIF छवि में 24-बिट RGB रेंज से 256 अलग-अलग रंग शामिल हो सकते हैं। जीआईएफ छवियों को दोषरहित संपीड़न के साथ संपीड़ित किया जाता है लेकिन फ़ाइलों का आकार काफी छोटा होता है। यह CorelDRAW पर सबसे व्यापक रूप से उपयोग किए जाने वाले छवि प्रारूपों में से एक है।

  <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GIPHY Tool</title>
<style>
  body {
    font-family: Arial, sans-serif;
    background: radial-gradient(circle, rgba(0,236,229,0.8715861344537815) 0%, rgba(30,187,209,0.8267682072829132) 91%);
    margin: 0;
    padding: 0;
  }
  #container {
    max-width: 80%;
    margin: 20px auto;
    padding: 20px;
    text-align: center;
    background-color: #fff;
    border-radius: 10px;
	box-shadow: 5px 5px 15px 5px #000000;
  }
  #search-input {
    width: 75%;
    padding: 10px;
    margin-bottom: 20px;
    background: #ccc;
    color: black;
    font-size: 16px;
    border: 1px solid #000;
    border-radius: 5px;
  }
  #gifsearchinp {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .gif-item {
    margin: 10px;
    position: relative;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-in-out;
  }
  .gif-item:hover {
    border: 1px solid black; 
	box-shadow: 5px 5px 15px 5px #000000;
    transform: translateY(-5px);
    -moz-transform: scale(1.3);
	-webkit-transform: scale(1.3);
	-o-transform: scale(1.3);
	-ms-transform: scale(1.3);
	transform: scale(1.3);
  }
  .gif-item img {
    max-width: 200px;
    max-height: 200px;
    object-fit: cover;
  }
  .download-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    background-color: #f000;
    color: #fff;
    border: 0px solid #000000;
    border-radius: 5px;
    padding: 5px 10px;
    cursor: pointer;
    font-size: 10px;
  }
  .loading {
    display: none;
    margin-top: 20px;
  }
  .loading.show {
    display: block;
  }
  #pomsdloader {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  border: 4px solid #0000;
  border-right-color: #766DF497; /* Change border color here */
  position: relative;
  animation: s4 0.5s infinite linear; /* Animation properties */
}

#pomsdloader:before,
#pomsdloader:after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: inherit;
  animation: inherit;
  animation-duration: 1s;
}

#pomsdloader:after {
  animation-duration: 2s;
}

@keyframes s4 {
  100% { transform: rotate(1turn); }
}

</style>
</head>
<body>
<div id="container">
  <h1>GIF Search Tool</h1>
  <input type="text" id="search-input" placeholder="Search for GIFs...">
  <center><div class="loading" id="loading"><div id="pomsdloader"></div></div> </center>
  <div id="gifsearchinp"></div>
</div>

<script>
const apiKey = 'Your_api_key_here'; // Replace with your GIPHY API key
const searchInput = document.getElementById('search-input');
const gifContainer = document.getElementById('gifsearchinp'); // Updated ID here
const loadingIndicator = document.getElementById('loading');

searchInput.addEventListener('input', function() {
  const searchTerm = this.value.trim();
  if (searchTerm !== '') {
    showLoading();
    searchGifs(searchTerm);
  } else {
    gifContainer.innerHTML = '';
  }
});

async function searchGifs(searchTerm) {
  const endpoint = `https://api.giphy.com/v1/gifs/search?api_key=${apiKey}&q=${encodeURIComponent(searchTerm)}&limit=10`;

  try {
    const response = await fetch(endpoint);
    const data = await response.json();

    if (response.ok) {
      hideLoading();
      displayGifs(data.data);
    } else {
      console.error('Error:', data.meta.msg);
    }
  } catch (error) {
    console.error('Error:', error);
  }
}

function displayGifs(gifs) {
  gifContainer.innerHTML = '';

  gifs.forEach(gif => {
    const gifItem = document.createElement('div');
    gifItem.classList.add('gif-item');

    const img = document.createElement('img');
    img.src = gif.images.original.url;
    img.alt = gif.title;

    const downloadBtn = document.createElement('button');
    downloadBtn.classList.add('download-btn');
    downloadBtn.textContent = '⬇️';
    downloadBtn.onclick = function() {
      downloadGif(gif.images.original.url, gif.title);
    };

    gifItem.appendChild(img);
    gifItem.appendChild(downloadBtn);
    gifContainer.appendChild(gifItem);
  });
}

function downloadGif(url, filename) {
  const a = document.createElement('a');
  a.href = url;
  a.download = filename;
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
}

function showLoading() {
  loadingIndicator.classList.add('show');
}

function hideLoading() {
  loadingIndicator.classList.remove('show');
}


  // Function to generate random hex color
  function getRandomColor() {
    return '#' + Math.floor(Math.random() * 16777215).toString(16);
  }

  // Function to set random gradient background and button color
  function setRandomColors() {
    var color1 = getRandomColor();
    var color2 = getRandomColor();
    var buttonColor = getRandomColor();
    document.body.style.background = 'linear-gradient(to right, ' + color1 + ', ' + color2 + ')';
    document.querySelector('.btn').style.backgroundColor = buttonColor;
  }

  // Change background and button color every 3 seconds
  setInterval(setRandomColors, 3000);

</script>

</body>
</html>