Created
January 11, 2024 12:49
-
-
Save cba85/a8cdded64950fa7060f11f8af5c5001a to your computer and use it in GitHub Desktop.
jQuery Giphy - IPI Toulouse TSTN2A 2023-2024
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const apiKey = "7DM9xWMcFqBNGWzapWk6d7e5FdsBkwe9"; | |
| const limit = 10; | |
| // Get results (gifs, stickers) from Giphy API | |
| function getGiphyResults(url) { | |
| $.get(url) | |
| .done((response) => { | |
| $.each(response.data, (index, value) => { | |
| $( | |
| `<img src="${value.images.fixed_height.webp}" alt="${value.title}" loading="lazy">` | |
| ).appendTo("#results"); | |
| }); | |
| }) | |
| .fail((error) => { | |
| $("#results").html( | |
| `<p style="color: red; font-weight: bold">Giphy API Error</p>` | |
| ); | |
| }); | |
| } | |
| $(document).ready(() => { | |
| // Get trending gifs from Giphy API on page load | |
| getGiphyResults( | |
| `https://api.giphy.com/v1/gifs/trending?api_key=${apiKey}&limit=${limit}` | |
| ); | |
| // Search gifs from Giphy API | |
| $("form").on("submit", (e) => { | |
| e.preventDefault(); | |
| // Get form values | |
| const q = $("#q").val(); | |
| const type = $("input[name='type']:checked").val(); | |
| // Validation: q is empty | |
| if (!q) { | |
| $("#results").html( | |
| `<p style="color: red; font-weight: bold">Please enter a keyword</p>` | |
| ); | |
| return; | |
| } | |
| // Validation: type is incorrect | |
| const allowedTypes = ["gif", "sticker"]; | |
| if (!allowedTypes.includes(type)) { | |
| $("#results").html( | |
| `<p style="color: red; font-weight: bold">Invalid type. Please choose gif or sticker.</p>` | |
| ); | |
| return; | |
| } | |
| // Get results from GIPHY API | |
| if (type == "gif") { | |
| $("#results").html(`<h2>${limit} gifs for "${q}"</h2>`); | |
| getGiphyResults( | |
| `https://api.giphy.com/v1/gifs/search?api_key=${apiKey}&limit=${limit}&q=${q}` | |
| ); | |
| } else { | |
| $("#results").html(`<h2>${limit} stickers for "${q}"</h2>`); | |
| getGiphyResults( | |
| `https://api.giphy.com/v1/stickers/search?api_key=${apiKey}&limit=${limit}&q=${q}` | |
| ); | |
| } | |
| }); | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>GIPHY search</title> | |
| <meta name="description" content="Search gifs and stickers using GIPHY" /> | |
| <link | |
| rel="stylesheet" | |
| href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css" | |
| /> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> | |
| <script src="app.js"></script> | |
| </head> | |
| <body> | |
| <h1>GIPHY search</h1> | |
| <p>🕵️♂️ Search gifs and stickers using GIPHY.</p> | |
| <form> | |
| <p> | |
| <label for="q">Keyword</label> | |
| <input type="text" id="q" autofocus /> | |
| </p> | |
| <p> | |
| <input type="radio" name="type" id="gif" value="gif" checked /> | |
| <label for="gif">Gifs</label> | |
| <input type="radio" name="type" id="sticker" value="sticker" /> | |
| <label for="sticker">Stickers</label> | |
| </p> | |
| <p> | |
| <button type="submit">Search</button> | |
| </p> | |
| </form> | |
| <div id="results"> | |
| <h2>Trending gifs</h2> | |
| </div> | |
| <footer> | |
| <p>Powered by Giphy</p> | |
| </footer> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment