api project

src/App.css

@@ -4,3 +4,5 @@
     color: white;
     text-align: center;
 }
+
+

src/App.jsx

@@ -1,25 +1,48 @@
 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>

src/City.jsx

@@ -0,0 +1,20 @@
+function City({ cityData }) {
+    return (
+      <div className="card text-center my-4">
+        <div className="card-header">
+          <h2>{cityData.City}</h2>
+        </div>
+        <div className="card-body">
+          <ul className="list-unstyled">
+            <li><strong>State:</strong> {cityData.State}</li>
+            <li><strong>Location:</strong> ({cityData.Lat},{cityData.Long}) </li>
+            <li><strong>Total Wages:</strong> {cityData.TotalWages} </li>
+            <li><strong>Population (Estimated):</strong> {cityData.EstimatedPopulation}</li>
+          </ul>
+        </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;