From 9d85b3f424ce690123ce4e69484c5729a385029c Mon Sep 17 00:00:00 2001
From: Chris <Djchris114211@gmail.com>
Date: Thu, 17 Oct 2024 13:20:21 -0400
Subject: [PATCH 1/2] it works I need to format it

---
 notes.md    |  8 +++++++
 src/App.css | 25 +++++++++++++++++----
 src/App.jsx | 65 +++++++++++++++++++++++++++++++++++++++++++++--------
 3 files changed, 85 insertions(+), 13 deletions(-)
 create mode 100644 notes.md

diff --git a/notes.md b/notes.md
new file mode 100644
index 0000000..99965dd
--- /dev/null
+++ b/notes.md
@@ -0,0 +1,8 @@
+I have to make 2 components, the 
+    - City Function
+    - ZipSearch Function
+
+Okay, so we are supposed to get the data from the api end point when you type in the information, so like
+https://ctp-zip-code-api.onrender.com/zip/11421 -- should give us all the information that we need to build the city function.
+
+But for now, my problem is how am I supposed to get that data from the api endpoint in the zipsearch function.
\ No newline at end of file
diff --git a/src/App.css b/src/App.css
index c7f4da8..264ac00 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,6 +1,23 @@
 .App-header {
-    background-color: #222;
-    padding: 20px;
-    color: white;
-    text-align: center;
+  background-color: #222;
+  padding: 20px;
+  color: white;
+  text-align: center;
+}
+
+.form-control {
+  display: block;
+  width: 100%;
+  padding: 0.375rem 0.75rem;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5;
+  color: #212529;
+  background-color: #fff;
+  background-clip: padding-box;
+  border: 1px solid #ced4da;
+  border-radius: 0.375rem;
+  transition:
+    border-color 0.15s ease-in-out,
+    box-shadow 0.15s ease-in-out;
 }
diff --git a/src/App.jsx b/src/App.jsx
index 6478b09..1169ed5 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,12 +1,62 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import "./App.css";
 
-function City(props) {
-  return <div>This is the City component</div>;
+// API: https://ctp-zip-code-api.onrender.com/
+
+function City({ cityData }) {
+  return (
+    <div>
+      <div>
+        <p>{cityData.LocationText}</p>
+      </div>
+      <div>
+        <ul>
+          <li>State: {cityData.State}</li>
+          <li>
+            Location: ({cityData.Lat}, {cityData.Long})
+          </li>
+          <li>Population (estimated): {cityData.EstimatedPopulation}</li>
+          <li>Total Wages: {cityData.TotalWages}</li>
+        </ul>
+      </div>
+    </div>
+  );
 }
 
-function ZipSearchField(props) {
-  return <div>This is the ZipSearchField component</div>;
+function ZipSearchField() {
+  const [data, setData] = useState([]);
+  const [zipCode, setZipCode] = useState("");
+
+  const handleInputChange = (event) => {
+    const newZipCode = event.target.value;
+    setZipCode(newZipCode);
+  };
+
+  useEffect(() => {
+    fetch(`https://ctp-zip-code-api.onrender.com/zip/${zipCode}`)
+      .then((response) => response.json())
+      .then((data) => {
+        setData(data);
+        console.log(data);
+      })
+      .catch((error) => console.error("Error:", error));
+  }, [zipCode]);
+
+  return (
+    <div>
+      <form>
+        <input
+          type="text"
+          value={zipCode}
+          onChange={handleInputChange}
+          placeholder="Enter zip code"
+        />
+      </form>
+      {data.map((cityInfo, index) => (
+        <City key={index} cityData={cityInfo} />
+      ))}
+    </div>
+  );
 }
 
 function App() {
@@ -16,11 +66,8 @@ function App() {
         <h1>Zip Code Search</h1>
       </div>
       <div className="mx-auto" style={{ maxWidth: 400 }}>
+        <p>Zip Code: </p>
         <ZipSearchField />
-        <div>
-          <City />
-          <City />
-        </div>
       </div>
     </div>
   );

From ce5044de2bbf200824bff54087990acf32d629bf Mon Sep 17 00:00:00 2001
From: Chris <Djchris114211@gmail.com>
Date: Sat, 19 Oct 2024 21:34:52 -0400
Subject: [PATCH 2/2] finished product

---
 src/App.css | 48 +++++++++++++++++++++++++++++++++++++++++++++++-
 src/App.jsx | 11 ++++++-----
 2 files changed, 53 insertions(+), 6 deletions(-)

diff --git a/src/App.css b/src/App.css
index 264ac00..6b75a4b 100644
--- a/src/App.css
+++ b/src/App.css
@@ -5,11 +5,17 @@
   text-align: center;
 }
 
+.App-header h1 {
+  font-weight: 500;
+}
+
 .form-control {
   display: block;
   width: 100%;
-  padding: 0.375rem 0.75rem;
+  padding: 0.5rem;
   font-size: 1rem;
+  border: 1px solid #ccc;
+  border-radius: 4px;
   font-weight: 400;
   line-height: 1.5;
   color: #212529;
@@ -20,4 +26,44 @@
   transition:
     border-color 0.15s ease-in-out,
     box-shadow 0.15s ease-in-out;
+  margin-bottom: 1rem;
+}
+
+/* Zip Code */
+
+.zip-code-label {
+  border-radius: 5rem;
+  font-weight: 400;
+  font-size: 1rem;
+}
+
+/* City Display */
+
+.city {
+  border: rgb(46, 45, 45) 1px solid;
+  margin-top: 1rem;
+  border-radius: 5px;
+  margin-bottom: 1rem;
+  overflow: hidden;
+}
+
+.city-header {
+  background-color: rgb(236, 234, 234);
+  padding: 0.5rem 1rem;
+  font-weight: 500;
+  border-bottom: 1px solid black;
+}
+
+.city-body {
+  padding: 1rem;
+}
+
+.city-body ul {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+}
+
+.city-body li {
+  margin-bottom: 0.5rem;
 }
diff --git a/src/App.jsx b/src/App.jsx
index 1169ed5..035507d 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -5,11 +5,11 @@ import "./App.css";
 
 function City({ cityData }) {
   return (
-    <div>
-      <div>
+    <div className="city">
+      <div className="city-header">
         <p>{cityData.LocationText}</p>
       </div>
-      <div>
+      <div className="city-body">
         <ul>
           <li>State: {cityData.State}</li>
           <li>
@@ -43,10 +43,11 @@ function ZipSearchField() {
   }, [zipCode]);
 
   return (
-    <div>
+    <div className="zipcode">
       <form>
         <input
           type="text"
+          className="form-control"
           value={zipCode}
           onChange={handleInputChange}
           placeholder="Enter zip code"
@@ -66,7 +67,7 @@ function App() {
         <h1>Zip Code Search</h1>
       </div>
       <div className="mx-auto" style={{ maxWidth: 400 }}>
-        <p>Zip Code: </p>
+        <p className="zip-code-label">Zip Code: </p>
         <ZipSearchField />
       </div>
     </div>