flo

src/App.jsx

@@ -1,14 +1,32 @@
-import React from "react";
+import React, {useEffect, useState}from "react";
+import axios from "axios";
 import { createRoot } from "react-dom/client";
 // import axios from "axios"; // Maybe we'll need axios? 🤔
 import "./style.css";
+import SearchField from "./SearchField";
+import GifCard from "./GifCard";
 
-// const GIPHY_API_KEY = "YOUR_API_KEY";
+const GIPHY_API_KEY = "3uPYTPfMF80n8U1q1PLoIu75lKpbeFzk";
 
 const App = () => {
+  const [data, setData] = useState([]);
+
+  const fetchData = async (searchValue) => {
+    const response = await axios.get(`http://api.giphy.com/v1/gifs/search?q=${searchValue}&api_key=${GIPHY_API_KEY}`)
+    setData(response.data.data);
+    // console.log("This is data-->", response.data)
+    // console.log("This is Search Value-->", searchValue)
+  };
+  // console.log("this is Data-->", data)
+
+  useEffect(() => {
+    fetchData();
+  }, [])
   return (
     <div className="app">
       <h1 className="title">Let's Make Some API Requests!</h1>
+      <SearchField fetchData = {fetchData}/>
+      <GifCard data = {data}/>
     </div>
   );
 };

src/GifCard.css

@@ -0,0 +1,10 @@
+.gif-card-container {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    background-color: white;
+}
+
+.cards {
+    border: solid;
+    border-color: black;
+}

src/GifCard.jsx

@@ -1,7 +1,25 @@
 import React from "react";
+import './GifCard.css'
 
-const GifCard = () => {
-  return <div className="gif-card"></div>;
+const GifCard = ({data}) => {
+  console.log("this is data-->", data[0]?.title)
+  return (
+    <div className="gif-card-container">
+      <div className="cards">{}</div>
+      <div className="cards">ghdgh</div>
+      <div className="cards">dfghdh</div>
+      <div className="cards">dfghd</div>
+      <div className="cards"></div>
+      <div className="cards"></div>
+      <div className="cards"></div>
+      <div className="cards"></div>
+      <div className="cards"></div>
+      <div className="cards">hdgh</div>
+      <div className="cards"></div>
+      <div className="cards"></div>
+
+    </div>
+  )
 };
 
 export default GifCard;

src/SearchField.css

@@ -0,0 +1,5 @@
+.search-box {
+    width: 400px;
+    height: 50px;
+    text-align: center;
+}

src/SearchField.jsx

@@ -1,7 +1,30 @@
-import React from "react";
+import React ,{useState}from "react";
+import './SearchField.css'
 
-const SearchField = () => {
-  return <div></div>;
+const SearchField = ({fetchData}) => {
+  const [searchValue, setSearchValue] = useState()
+
+  const handleInput = (event) => {
+    setSearchValue(event.target.value)
+  }
+
+  const handleSubmit = () => {
+    fetchData(searchValue)
+  }
+  return (
+    <main>
+      <form>
+        <input
+        className="search-box"
+        type='text'
+        placeholder="What kind of GIFs are you looking for?"
+        value={searchValue}
+        onChange={handleInput}/>
+      </form>
+      <button onClick={handleSubmit}>Submit</button>
+    </main>
+  );
 };
 
+// 3uPYTPfMF80n8U1q1PLoIu75lKpbeFzk
 export default SearchField;