Carlo Ace Sagad - Wed 6:30pm to 9:00pm - lab-react-zip-search

src/App.css

@@ -1,6 +1,35 @@
 .App-header {
-    background-color: #222;
-    padding: 20px;
-    color: white;
-    text-align: center;
+  background-color: #222;
+  padding: 20px;
+  color: white;
+  text-align: center;
+}
+
+.city-box {
+  border: 1px solid #ccc;
+  padding: 15px;
+  margin-top: 10px;
+  background-color: #f9f9f9;
+  border-radius: 8px;
+  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
+}
+
+.city-box h3 {
+  margin-bottom: 5px;
+}
+
+.city-box p {
+  margin: 5px 0;
+}
+
+.App-header {
+  text-align: center;
+  margin-bottom: 20px;
+}
+
+input {
+  width: 100%;
+  padding: 10px;
+  margin: 10px 0;
+  box-sizing: border-box;
 }

src/App.jsx

@@ -1,26 +1,97 @@
 import { useState } from "react";
 import "./App.css";
 
-function City(props) {
-  return <div>This is the City component</div>;
+function City({ cityData }) {
+  return (
+    <div className="city-box">
+      <h3>
+        {cityData.City}, {cityData.State}
+      </h3>
+      <p>State: {cityData.State}</p>
+      <p>
+        Location: ({cityData.Lat}, {cityData.Long})
+      </p>
+      <p>Population (estimated): {cityData.EstimatedPopulation}</p>
+      <p>Total Wages: {cityData.TotalWages}</p>
+    </div>
+  );
 }
 
-function ZipSearchField(props) {
-  return <div>This is the ZipSearchField component</div>;
+function ZipSearchField({ zipCode, setZipCode, onSearch }) {
+  return (
+    <div style={{ marginBottom: "20px" }}>
+      <label style={{ fontSize: "1.2em" }}>Zip Code:</label>
+      <input
+        type="text"
+        value={zipCode}
+        onChange={(e) => setZipCode(e.target.value)}
+        placeholder="Enter Zip Code"
+        style={{ padding: "10px", fontSize: "1.2em", marginRight: "10px" }}
+      />
+      <button onClick={onSearch} style={{ padding: "10px", fontSize: "1.2em" }}>
+        Show Results
+      </button>
+    </div>
+  );
 }
 
 function App() {
+  const [zipCode, setZipCode] = useState("");
+  const [cities, setCities] = useState([]);
+  const [error, setError] = useState(false);
+
+  const fetchCityData = async () => {
+    if (zipCode.length !== 5) {
+      setCities([]);
+      setError(true);
+      return;
+    }
+
+    try {
+      const response = await fetch(
+        `https://ctp-zip-code-api.onrender.com/zip/${zipCode}`
+      );
+      if (!response.ok) throw new Error("No results found");
+
+      const data = await response.json();
+      setCities(data);
+      setError(false);
+    } catch {
+      setCities([]);
+      setError(true);
+    }
+  };
+
+  const handleSearch = () => {
+    fetchCityData();
+  };
+
   return (
-    <div className="App">
-      <div className="App-header">
+    <div className="App" style={{ fontSize: "1.5em", padding: "20px" }}>
+      <div
+        className="App-header"
+        style={{ fontSize: "2em", marginBottom: "20px" }}
+      >
         <h1>Zip Code Search</h1>
       </div>
-      <div className="mx-auto" style={{ maxWidth: 400 }}>
-        <ZipSearchField />
-        <div>
-          <City />
-          <City />
-        </div>
+      <div
+        className="mx-auto"
+        style={{ maxWidth: "600px", textAlign: "center" }}
+      >
+        <ZipSearchField
+          zipCode={zipCode}
+          setZipCode={setZipCode}
+          onSearch={handleSearch}
+        />
+        {error ? (
+          <div>No results found</div>
+        ) : (
+          <div>
+            {cities.map((city) => (
+              <City key={city.RecordNumber} cityData={city} />
+            ))}
+          </div>
+        )}
       </div>
     </div>
   );

vite.config.js

@@ -4,5 +4,5 @@ import react from "@vitejs/plugin-react";
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
-  base: "/lab-react-zip-search/",
+  // base: "/lab-react-zip-search/", // Remove this line for Netlify/Vercel
 });