From 7a77b05b39ebc09a630a265e6649a7c36e511dbc Mon Sep 17 00:00:00 2001
From: Dagostocsc <Deborahagosto19@gmail.com>
Date: Tue, 24 Jun 2025 11:48:23 -0700
Subject: [PATCH 1/2] Debbie in the house

---
 src/GifCard.jsx                | 27 +++++++++++++++++++++---
 src/components/Gifcard.jsx     | 38 ++++++++++++++++++++++++++++++++++
 src/components/Searchfield.jsx |  6 ++++++
 3 files changed, 68 insertions(+), 3 deletions(-)
 create mode 100644 src/components/Gifcard.jsx
 create mode 100644 src/components/Searchfield.jsx

diff --git a/src/GifCard.jsx b/src/GifCard.jsx
index 24d000d..b08ca44 100644
--- a/src/GifCard.jsx
+++ b/src/GifCard.jsx
@@ -1,7 +1,28 @@
-import React from "react";
+import React, { useEffect, useState } from 'react';
 
-const GifCard = () => {
-  return <div className="gif-card"></div>;
+const GetGif = async () => {
+  const GIFAPIKEY = "https://api.giphy.com/v1/gifs/random?api_key=3Xt6KP7aUbnzyRIIlngcOzpV95VCfD0L&tag=&rating=g";
+
+  try {
+    const response = await fetch(GIFAPIKEY);
+    if (!response.ok) {
+      throw new Error(`Error: ${response.status}`);
+    }
+    const json = await response.json();
+  } catch (error) {
+    console.error(error.message);
+    return "we dont know yet"
+  }
+
+  function useEffect() =>
+  {
+    fetch(GIFAPIKEY)
+  }
 };
 
+const GifCard = () =>
+  {
+    
+  };
+
 export default GifCard;
diff --git a/src/components/Gifcard.jsx b/src/components/Gifcard.jsx
new file mode 100644
index 0000000..8724c64
--- /dev/null
+++ b/src/components/Gifcard.jsx
@@ -0,0 +1,38 @@
+async function getGif() 
+{
+  {
+    const url = "3Xt6KP7aUbnzyRIIlngcOzpV95VCfD0L"; 
+    try
+    {
+      const responce = await fetch(url)
+      if (responce != "something we dont yet")
+        {
+          throw new Error(`Error: ${response.status}`)
+        }
+    }
+    
+    catch {
+    const json = await responce.json();
+    console.log(json);
+    if (responce != "We still dont know")
+    {
+      throw new Error(error)
+      console.error(error.message);
+    }
+  }
+}
+}
+
+export const Gif = () => {
+  return (
+    responce
+  )
+};
+
+
+
+//fetch() funtion returns a promise which is fulfilled with a responce object
+
+
+
+
diff --git a/src/components/Searchfield.jsx b/src/components/Searchfield.jsx
new file mode 100644
index 0000000..6dc8cfb
--- /dev/null
+++ b/src/components/Searchfield.jsx
@@ -0,0 +1,6 @@
+import React from 'react'
+
+export const Searchfield = () => {
+  const regSearchurl = "http://api.giphy.com/v1/gifs/search?q=SEARCH+TERM+GOES+HERE&api_key=YOUR_API_KEY"
+  const responce = 
+}

From 9386e17d4a9235f5ba0082dc96d615138557eb23 Mon Sep 17 00:00:00 2001
From: Mohammed Islam <saeedaj357@gmail.com>
Date: Tue, 24 Jun 2025 16:04:14 -0400
Subject: [PATCH 2/2] SearchField

---
 src/GifCard.jsx     | 42 +++++++++++++++++++-----------------------
 src/SearchField.jsx | 21 +++++++++++++++++++--
 2 files changed, 38 insertions(+), 25 deletions(-)

diff --git a/src/GifCard.jsx b/src/GifCard.jsx
index b08ca44..bc61e7c 100644
--- a/src/GifCard.jsx
+++ b/src/GifCard.jsx
@@ -1,28 +1,24 @@
-import React, { useEffect, useState } from 'react';
+import React from "react";
 
-const GetGif = async () => {
-  const GIFAPIKEY = "https://api.giphy.com/v1/gifs/random?api_key=3Xt6KP7aUbnzyRIIlngcOzpV95VCfD0L&tag=&rating=g";
-
-  try {
-    const response = await fetch(GIFAPIKEY);
-    if (!response.ok) {
-      throw new Error(`Error: ${response.status}`);
+const SearchField = ({ query, setQuery, onSearch }) => {
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter") {
+      onSearch();
     }
-    const json = await response.json();
-  } catch (error) {
-    console.error(error.message);
-    return "we dont know yet"
-  }
+  };
 
-  function useEffect() =>
-  {
-    fetch(GIFAPIKEY)
-  }
+  return (
+    <div>
+      <input
+        type="text"
+        value={query}
+        onChange={(e) => setQuery(e.target.value)}
+        onKeyDown={handleKeyDown}
+        placeholder="Search GIFs"
+      />
+      <button onClick={onSearch}>Search</button>
+    </div>
+  );
 };
 
-const GifCard = () =>
-  {
-    
-  };
-
-export default GifCard;
+export default SearchField;
diff --git a/src/SearchField.jsx b/src/SearchField.jsx
index 3afa0a7..bc61e7c 100644
--- a/src/SearchField.jsx
+++ b/src/SearchField.jsx
@@ -1,7 +1,24 @@
 import React from "react";
 
-const SearchField = () => {
-  return <div></div>;
+const SearchField = ({ query, setQuery, onSearch }) => {
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter") {
+      onSearch();
+    }
+  };
+
+  return (
+    <div>
+      <input
+        type="text"
+        value={query}
+        onChange={(e) => setQuery(e.target.value)}
+        onKeyDown={handleKeyDown}
+        placeholder="Search GIFs"
+      />
+      <button onClick={onSearch}>Search</button>
+    </div>
+  );
 };
 
 export default SearchField;