Wyszukiwarka gifów na stronę

Giphy.com to platforma internetowa, która umożliwia użytkownikom przeglądanie, udostępnianie i pobieranie GIF-ów. Serwis został założony w 2013 roku przez Alexandra Chunga, Jaceka Cooke’a i Davida McIntosha. W 2020 roku serwis został przejęty przez Facebooka.

Giphy.com oferuje szeroki wybór GIF-ów, które można przeglądać według kategorii, tematu lub popularności. Użytkownicy mogą również tworzyć własne animacje GIF i udostępniać je na platformie. Serwis jest dostępny w wielu językach, w tym w języku polskim.

Poniżej znajdziecie kody i opis jak wstawić wyszukiwarkę na własną stronę www.

Szukaj Gif-ów

Jak wstawić wyszukiwarkę gifów na własną stronę?

Należy się zarejestrować na stronie giphy.com i wygenerować własny api-key.

I tworzymy odpowiednie pliki:

index.html
style.css
script.js
api-key.js

W stworzonym pliku api-key.js wklejamy wygenerowany klucz ze strony giphy.com:

//Wklej własny api-key
let apiKey = "TU WPISZ API-KEY Z GIPHY.COM";

Bez tego wyszukiwarka nie zadziała. I to wszystko w tym pliku. Następnie tworzymy pozostałe pliki.

index.html

<!DOCTYPE html>
<html lang="pl">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Apka do szukania gifów</title>
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap" rel="stylesheet" />
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="box">
  <div class="search-container">
    <input type="text" id="search-box" value="yes" />
    <button id="submit-btn">Szukaj</button>
  </div>
  <div class="loader"></div>
  <div class="wrapper"></div>
</div>
<div class="home"><a href="https://skrip.pl/" title="Strona domowa" target="_parent">Home</a></div>
    
<!-- API Key --> 
<script src="api-key.js"></script> 
<!-- Script --> 
<script src="script.js"></script>
</body>
</html>

style.css

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body {
  background-color: #fff;
}
button {
  border: none;
  outline: none;
  cursor: pointer;
  background-color: #2196f3;
  color: #fcfcfc;
  border-radius: 0.5em;
  font-weight: 500;
}
.search-container {
  display: grid;
  grid-template-columns: 9fr 3fr;
  gap: 1em;
  width: 100%;
  max-width: 50em;
  margin: 1em auto;
  padding: 0.5em;
}
.search-container input {
  padding: 1em;
  border-radius: 0.5em;
  font-weight: 400;
}
.wrapper {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
.container {
  background-color: #fafafa;
  display: flex;
  padding: 1em;
  flex-direction: column;
  justify-content: space-between;
  margin: 1.5em;
  border-radius: 0.5em;
  border: solid 1px #CCC;
}
.container img {
  width: 100%;
}
.container button {
  margin-top: 1em;
  padding: 1em 0;
}
.home a{
  padding: 10px;
  color: #2196f3;  
  font-size: 0.6rem;
  text-decoration: none;
}
.loader {
  display: none;
  height: 15em;
  width: 15em;
  border: 3em solid #2b304d;
  border-radius: 50%;
  border-top-color: #2196f3;
  position: absolute;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
  animation: spin 3s infinite;
}
@keyframes spin {
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
@media screen and (max-width: 768px) {
  .wrapper {
    grid-template-columns: repeat(2, 1fr);
  }
  .container {
    margin: 0.7em;
  }
}
@media screen and (max-width: 576px) {
  .wrapper {
    grid-template-columns: 1fr;
  }
}

script.js

// JavaScript Document
// www.skrip.pl
let submitBtn = document.getElementById("submit-btn");

let generateGif = () => {
  //display loader until gif load
  let loader = document.querySelector(".loader");
  loader.style.display = "block";
  document.querySelector(".wrapper").style.display = "none";

  //Get search value (default => laugh)
  let q = document.getElementById("search-box").value;
  //We need 10 gifs to be displayed in result
  let gifCount = 10;
  //API URL =
  let finalURL = `https://api.giphy.com/v1/gifs/search?api_key=${apiKey}&q=${q}&limit=${gifCount}&offset=0&rating=g&lang=en`;
  document.querySelector(".wrapper").innerHTML = "";

  //Make a call to API
  fetch(finalURL)
    .then((resp) => resp.json())
    .then((info) => {
      console.log(info.data);
      //All gifs
      let gifsData = info.data;
      gifsData.forEach((gif) => {
        //Generate cards for every gif
        let container = document.createElement("div");
        container.classList.add("container");
        let iframe = document.createElement("img");
        console.log(gif);
        iframe.setAttribute("src", gif.images.downsized_medium.url);
        iframe.onload = () => {
          //if iframes has loaded correctly reduce the count when each gif loads
          gifCount--;
          if (gifCount == 0) {
            //If all gifs have loaded then hide loader and display gifs UI
            loader.style.display = "none";
            document.querySelector(".wrapper").style.display = "grid";
          }
        };
        container.append(iframe);

        //Copy link button
        let copyBtn = document.createElement("button");
        copyBtn.innerText = "Kopiuj Link";
        copyBtn.onclick = () => {
          //Append the obtained ID to default URL
          let copyLink = `https://media4.giphy.com/media/${gif.id}/giphy.mp4`;
          //Copy text inside the text field
          navigator.clipboard
            .writeText(copyLink)
            .then(() => {
              alert("GIF copied to clipboard");
            })
            .catch(() => {
              //if navigator is not supported
              alert("GIF copied to clipboard");
              //create temporary input
              let hiddenInput = document.createElement("input");
              hiddenInput.setAttribute("type", "text");
              document.body.appendChild(hiddenInput);
              hiddenInput.value = copyLink;
              //Select input
              hiddenInput.select();
              //Copy the value
              document.execCommand("copy");
              //remove the input
              document.body.removeChild(hiddenInput);
            });
        };
        container.append(copyBtn);
        document.querySelector(".wrapper").append(container);
      });
    });
};

//Generate Gifs on screen load or when user clicks on submit
submitBtn.addEventListener("click", generateGif);
window.addEventListener("load", generateGif);

Lub pobierz gotowe pliki oprócz klucza api-key. Który musisz wygenerować na stronie giphy.com.

Top Stories

Budda – suche fakty z jego biznesów

Dark Reign: The Future of War – gra przeglądarkowa

Emulator gier DOSBox v0.74 – old schoolowe gry online

Wyszukiwarka gifów na Giphy

Poniżej znajdziecie kody i opis jak wstawić wyszukiwarkę na własną stronę www.

Wyszukiwarka gifów na stronę

Szukaj Gif-ów

Jak wstawić wyszukiwarkę gifów na własną stronę?

index.html

style.css

script.js

Chmurka tagów

Zaprzyjaźniona strona

Archiwa

Tu jesteśmy

Kup i zapłać później