使用 JavaScript 创建 Gif 搜索引擎(1)

📌 相关文章

📜 使用 JavaScript 创建 Gif 搜索引擎(1)

📅 最后修改于: 2023-12-03 14:49:40.925000 🧑 作者: Mango

使用 JavaScript 创建 Gif 搜索引擎

简介

随着 GIF 在社交网络和通讯应用程序中的使用日益增加，提供 GIF 搜索的应用程序和服务也变得越来越受欢迎。本文将探讨如何使用 JavaScript 构建用于搜索 GIF 的简单 Web 应用程序。

技术栈

HTML/CSS
JavaScript
Giphy API

步骤

首先，我们需要一个用户界面来接受用户输入的搜索词，并显示相应的搜索结果。我们可以使用 HTML 和 CSS 来创建这个用户界面。以下是一个简单的示例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Gif Search Engine</title>
    <style>
      #search-form {
        margin-bottom: 20px;
      }
      #gif-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
      }
      .gif {
        margin: 10px;
        max-width: 250px;
      }
    </style>
  </head>
  <body>
    <form id="search-form">
      <input type="text" id="search-input">
      <button type="submit">Search</button>
    </form>
    <div id="gif-container"></div>
    <script src="./app.js"></script>
  </body>
</html>

接下来，我们需要编写 JavaScript 代码来处理用户输入、调用 Giphy API 并显示搜索结果。以下是一个简单的示例：

const API_KEY = 'YOUR_API_KEY_HERE';
const searchForm = document.querySelector('#search-form');
const searchInput = document.querySelector('#search-input');
const gifContainer = document.querySelector('#gif-container');

searchForm.addEventListener('submit', async (event) => {
  event.preventDefault();
  const searchTerm = searchInput.value;
  const response = await fetch(`https://api.giphy.com/v1/gifs/search?api_key=${API_KEY}&q=${searchTerm}&limit=10`);
  const data = await response.json();
  gifContainer.innerHTML = '';
  data.data.forEach(gif => {
    const imageUrl = gif.images.fixed_width.url;
    const imageTitle = gif.title;
    const imageElement = document.createElement('img');
    imageElement.src = imageUrl;
    imageElement.alt = imageTitle;
    imageElement.classList.add('gif');
    gifContainer.appendChild(imageElement);
  });
});

最后，我们需要申请 Giphy API 密钥。您可以在 Giphy 网站上免费申请 API 密钥。

总结

本文介绍了如何使用 JavaScript 和 Giphy API 创建一个简单的 GIF 搜索引擎。我们讨论了 HTML/CSS、JavaScript 和 Giphy API 等技术，并提供了完整的示例代码。祝您创建愉快！