CUNYTechPrep · Ljupcho-Atanasov · Oct 11, 2024 · Oct 11, 2024
diff --git a/favicon-32x32.png b/favicon-32x32.png
diff --git a/index.html b/index.html
@@ -2,7 +2,8 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <!-- <link rel="icon" type="image/svg+xml" href="/vite.svg" /> -->
+    <link rel="shortcut icon" href="./statue-liberty_4856218.png">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link
       href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"

diff --git a/src/App.css b/src/App.css
@@ -1,6 +1,18 @@
 .App-header {
-    background-color: #222;
+    background-color: #0ba215;
     padding: 20px;
-    color: white;
+    color: whitesmoke;
     text-align: center;
 }
+
+.card-title{
+    background-color: rgb(35, 122, 74);
+    color: rgb(248, 247, 161);
+}
+.App {
+    background-color: rgb(195, 253, 157);
+    padding: 20px;
+  }
+.card {
+    background-color:rgb(239, 243, 223);
+}
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,25 +1,119 @@
 import { useState } from "react";
 import "./App.css";
 
+// City component that displays city info uppon entering existing Zip Code //
 function City(props) {
-  return <div>This is the City component</div>;
+  const { city, state, population, wages, lat, long } = props.data;
+
+  return (
+    <div className="card mb-2">
+      <div className="card-body">
+{/* 
+        <strong>Printing out all the properties for testring:</strong>
+        <pre>{JSON.stringify(props.data, null, 2)}</pre>
+        <pre>{JSON.stringify(props, null, 2)}</pre> */}
+
+        <h4 className="card-title text-center">
+          {city}, {state}
+        </h4>
+        <ul>
+          <li className="card-text">State: {state}</li>
+          <li className="card-text">Location: Latitude: {lat}, Longitude: {long}</li>
+          <li className="card-text">Population (estimated): {population}</li>
+          <li className="card-text">Total Wages: ${wages}</li>
+        </ul>
+      </div>
+    </div>
+  );
+
 }
 
+// ZipSearchField component handles user input
 function ZipSearchField(props) {
-  return <div>This is the ZipSearchField component</div>;
+  const { value, onChange } = props;
+
+  return (
+    <div className="form-group mb-4 mt-4">
+
+       {/* <strong>Printing out all the properties for testring:</strong>
+       <pre>{JSON.stringify(props, null, 2)}</pre> */}
+
+      <label htmlFor="zipCode"><strong><h5>Enter Zip Code:</h5></strong></label>
+      <input
+      style={{ marginLeft: '40px', fontWeight: 'bold' }}
+        type="text"
+        id="zipCode"
+        className="form-controll-lg text-center"
+        value={value}
+        onChange={onChange}
+        placeholder="in this field"
+      />
+    </div>
+  );
 }
 
 function App() {
+  const [zipCode, setZipCode] = useState("");
+  const [cityData, setCityData] = useState([]);
+  const [error, setError] = useState(null);
+
+  // Function to handle input changes
+  const handleZipCodeChange = async (event) => {
+    const newZipCode = event.target.value;
+    setZipCode(newZipCode);
+
+    // Avoid unnecessary API calls for incomplete zip codes
+    if (newZipCode.length === 5) {
+      try {
+        const response = await fetch(`https://ctp-zip-code-api.onrender.com/zip/${newZipCode}`);
+        // Both do the same thing //
+        // const response = await fetch("https://ctp-zip-code-api.onrender.com/zip/" + newZipCode);
+        if (response.ok) {
+          const data = await response.json();
+          // console.log(data);
+          setCityData(data);
+          setError(null); // Clear error if request is successful
+        } else {
+          setCityData([]);
+          setError("No results found");
+        }
+      } catch (error) {
+        setCityData([]);
+        setError("An error occurred while fetching data.");
+      }
+    } else {
+      setCityData([]); // Clear city data if input is cleared or incomplete
+      setError(null); // Clear error when resetting
+    }
+  };
+
   return (
     <div className="App">
       <div className="App-header">
-        <h1>Zip Code Search</h1>
+        <h1><strong>Zip Code Search</strong></h1>
       </div>
+
       <div className="mx-auto" style={{ maxWidth: 400 }}>
-        <ZipSearchField />
+        {/* ZipSearchField component */}
+        <ZipSearchField value={zipCode} onChange={handleZipCodeChange} />
+
+        {/* Show city information if available, otherwise show error */}
         <div>
-          <City />
-          <City />
+          {error && <p>{error}</p>}
+          {cityData.length > 0 &&
+            cityData.map((city, index) => (
+              <City
+                key={index}
+                data={{
+                  city: city.City,
+                  state: city.State,
+                  population: city.EstimatedPopulation,
+                  wages: city.TotalWages,
+                  lat: city.Lat,
+                  long: city.Long,
+                }}
+              />
+            ))}
         </div>
       </div>
     </div>

diff --git a/statue-liberty_4856218.png b/statue-liberty_4856218.png
diff --git a/statue-liberty_760051.png b/statue-liberty_760051.png