cba85/app.js

## app.js
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}`
      );
    }
  });
});

## index.html
<!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>
	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}`
	);
	}
	});
	});
	<!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>