done

src/App.jsx

@@ -1,29 +1,52 @@
 import { useState } from "react";
 import "./App.css";
+import City from "./City";
+import ZipSearchField from "./ZipSearchField";
 
-function City(props) {
-  return <div>This is the City component</div>;
-}
-
-function ZipSearchField(props) {
-  return <div>This is the ZipSearchField component</div>;
-}
 
 function App() {
+  const [cities, setCities] = useState([]);
+  const [error, setError] = useState(null);
+
+
+  const fetchCitiesByZip = (zip) => {
+    if (zip.length === 5) {
+      fetch(`https://ctp-zip-code-api.onrender.com/zip/${zip}`)
+        .then((response) => {
+          if (!response.ok) {
+            throw new Error("No results found for this ZIP code.");
+          }
+          return response.json();
+        })
+        .then((data) => {
+          setCities(data);
+          setError(null); 
+        })
+        .catch((err) => {
+          setError(err.message);
+          setCities([]); 
+        });
+    } else {
+      setCities([]);
+    }
+  };
+
   return (
     <div className="App">
       <div className="App-header">
         <h1>Zip Code Search</h1>
       </div>
       <div className="mx-auto" style={{ maxWidth: 400 }}>
-        <ZipSearchField />
+        <ZipSearchField onZipChange={fetchCitiesByZip} />
         <div>
-          <City />
-          <City />
+          {error && <p>{error}</p>}
+          {cities.length > 0
+            ? cities.map((cityData, index) => <City key={index} cityData={cityData} />)
+            : !error && <p>No city data available. Please enter a valid ZIP code.</p>}
         </div>
       </div>
     </div>
   );
 }
 
-export default App;
+export default App;

src/City.jsx

@@ -0,0 +1,29 @@
+function City({ cityData }) {
+    return (
+        <div className="card my-4">
+            <div className="card-header text-center">
+                <h2>{cityData.City}</h2>
+            </div>
+            <div className="card-body">
+                <div className="row mb-3">
+                    <div className="col-md-6">
+                        <strong>State:</strong> {cityData.State}
+                    </div>
+                    <div className="col-md-6">
+                        <strong>Coordinates:</strong> ({cityData.Lat}, {cityData.Long})
+                    </div>
+                </div>
+                <div className="row mb-3">
+                    <div className="col-md-6">
+                        <strong>Total Wages:</strong> ${cityData.TotalWages.toLocaleString()}
+                    </div>
+                    <div className="col-md-6">
+                        <strong>Estimated Population:</strong> {cityData.EstimatedPopulation.toLocaleString()}
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export default City;

src/ZipSearchField.jsx

@@ -0,0 +1,25 @@
+import { useState } from "react";
+function ZipSearchField({ onZipChange }) {
+    const [zip, setZip] = useState("");
+
+
+    const handleInputChange = (e) => {
+      const newZip = e.target.value;
+      setZip(newZip);
+      onZipChange(newZip);
+    };
+
+    return (
+      <div>
+        <label htmlFor="zip">Enter ZIP Code: </label>
+        <input
+          type="text"
+          id="zip"
+          value={zip}
+          onChange={handleInputChange}
+          placeholder="e.g. 10016"
+        />
+      </div>
+    );
+  }
+  export default ZipSearchField;