Adjustments

docs/main.js.LICENSE.txt

@@ -0,0 +1,39 @@
+/**
+ * @license React
+ * react-dom-client.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * react-dom.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * react.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * scheduler.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */

src/App.jsx

@@ -1,18 +1,48 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import { createRoot } from "react-dom/client";
+
 // import axios from "axios"; // Maybe we'll need axios? 🤔
 import "./style.css";
+import "./GifCard";
+import GifCard from "./GifCard";
+import SearchField from "./SearchField";
+// import GifCard from "./GifCard";
 
-// const GIPHY_API_KEY = "YOUR_API_KEY";
+const GIPHY_API_KEY = "aAXJQI3cUJuaNhecvZC8rsL6p5jy1uPd";
 
 const App = () => {
+  const url = `https://api.giphy.com/v1/gifs/trending?api_key=${GIPHY_API_KEY}`;
+  const [gifs, setGifs] = useState([]);
+  const fetchGifData = async () => {
+    try {
+      const response = await fetch(url);
+      const data = await response.json();
+      console.log("data: ", data.data);
+      setGifs(data.data);
+    } catch (error) {
+      console.error("There was an error");
+    }
+  };
+  useEffect(() => {
+    fetchGifData();
+  }, []);
+
+  const Search = (desiredSearch) => {
+    const url = `http://api.giphy.com/v1/gifs/search?q=${desiredSearch}&api_key=${GIPHY_API_KEY}`;
+  };
   return (
     <div className="app">
       <h1 className="title">Let's Make Some API Requests!</h1>
+
+      <SearchField />
+      <div className="gif-grid">
+        {gifs.map((gif) => (
+          <GifCard key={gif.id} gif={gif} />
+        ))}
+      </div>
     </div>
   );
 };
-
 // The following lines initialize your React application and inject
 // it into the index.html
 const root = createRoot(document.getElementById("root"));

src/GifCard.jsx

@@ -1,7 +1,14 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
+import { createRoot } from "react-dom/client";
+import axios from "axios";
+import "./style.css";
 
-const GifCard = () => {
-  return <div className="gif-card"></div>;
+const GifCard = ({ gif }) => {
+  return (
+    <div className="gif-card">
+      <img src={gif.images.fixed_height.url} alt={gif.title} />
+    </div>
+  );
 };
 
 export default GifCard;

src/SearchField.jsx

@@ -1,7 +1,30 @@
 import React from "react";
+import { useState } from "react";
+const SearchField = ({ onSearch }) => {
+  const [searchInput, setSearchInput] = useState("");
 
-const SearchField = () => {
-  return <div></div>;
+  const handleChange = (e) => {
+    e.preventDefault();
+    setSearchInput(e.target.value);
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    onSearch(searchInput);
+  };
+
+  return (
+    <div>
+      <form onSubmit={handleSubmit}>
+        <input
+          type="text"
+          placeholder="search a gif"
+          value={searchInput}
+          onChange={handleChange}
+        />
+      </form>
+    </div>
+  );
 };
 
 export default SearchField;

src/style.css

@@ -36,3 +36,9 @@ body {
 .gif-card img {
   width: 100%;
 }
+
+.gif-grid {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+}