Instructor: Edgardo Molina TA: Akbar Mirza

src/App.css

@@ -4,3 +4,26 @@
     color: white;
     text-align: center;
 }
+
+.form-control {
+    display: block;
+    width: 100%;
+    padding: .375rem .75rem;
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: 1.5;
+    color: #212529;
+    background-color: #fff;
+    background-clip: padding-box;
+    border: 1px solid #ced4da;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    border-radius: .375rem;
+    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
+}
+
+.my-5 {
+    margin-top: 3rem!important;
+    margin-bottom: 3rem!important;
+}

src/App.js

@@ -1,13 +1,7 @@
 import React from "react";
 import "./App.css";
-
-function City(props) {
-  return <div>This is the City component</div>;
-}
-
-function ZipSearchField(props) {
-  return <div>This is the ZipSearchField component</div>;
-}
+import City from "./City"
+import ZipSearchField from "./ZipSearchField";
 
 function App() {
   return (
@@ -17,10 +11,6 @@ function App() {
       </div>
       <div className="mx-auto" style={{ maxWidth: 400 }}>
         <ZipSearchField />
-        <div>
-          <City />
-          <City />
-        </div>
       </div>
     </div>
   );

src/City.js

@@ -0,0 +1,17 @@
+import React from "react";
+
+export default function City({city}) {
+    return (
+        <div className="card mb-5">
+            <div className="card-header">{city.City}, {city.State}</div>
+            <div className="card-body">
+                <ul>
+                    <li>State: {city.State}</li>
+                    <li>Location: ({city.Lat}, {city.Long})</li>
+                    <li>Population (estimated): {city.EstimatedPopulation}</li>
+                    <li>Total Wages: {city.TotalWages}</li>
+                </ul>
+            </div>
+        </div>
+    );
+}

src/ZipSearchField.js

@@ -0,0 +1,53 @@
+import React, { useState } from "react";
+import City from "./City";
+
+export default function ZipSearchField(props) {
+    const [inputValue, setInputValue] = useState('');
+    const [errorMessage, setErrorMessage] = useState("No results found");
+    const [cityData, setCityData] = useState([]);
+
+    const handleInputChange = (event) => {
+    const zipCode = event.target.value;
+    setInputValue(zipCode);
+
+    if (zipCode.length === 5) {
+    fetch(`https://ctp-zip-code-api.onrender.com/zip/${zipCode}`)
+        .then((response) => {
+        if (!response.ok) {
+            throw new Error("Invalid response from server");
+        }
+        return response.json();
+        })
+        .then((data) => {
+            if (data.length > 0) {
+                setCityData(data);
+                setErrorMessage("");
+            } else {
+                setCityData([]);
+                setErrorMessage("No results found");
+            }
+        })
+        .catch((error) => {
+        console.error("Error fetching data:", error);
+        setCityData([]);
+        setErrorMessage("No results found");
+        });
+    } else {
+        setCityData([]);
+        setErrorMessage("No results found");
+        }
+    };
+    return (
+        <div>
+            <div className="my-5">
+                <label className="zip-code">Zip Code: </label>
+                <input className="form-control" id="zip-code" type="text" value={inputValue} onChange={handleInputChange}></input>
+            </div>
+
+            {errorMessage && <strong>{errorMessage}</strong>}
+            {cityData.map((city, index) => (
+                <City key={index} city={city} />
+            ))}
+        </div>
+    );
+}