Christopher Budhram - Fri 6:30 pm

notes.md

@@ -0,0 +1,8 @@
+I have to make 2 components, the 
+    - City Function
+    - ZipSearch Function
+
+Okay, so we are supposed to get the data from the api end point when you type in the information, so like
+https://ctp-zip-code-api.onrender.com/zip/11421 -- should give us all the information that we need to build the city function.
+
+But for now, my problem is how am I supposed to get that data from the api endpoint in the zipsearch function.

src/App.css

@@ -1,6 +1,69 @@
 .App-header {
-    background-color: #222;
-    padding: 20px;
-    color: white;
-    text-align: center;
+  background-color: #222;
+  padding: 20px;
+  color: white;
+  text-align: center;
+}
+
+.App-header h1 {
+  font-weight: 500;
+}
+
+.form-control {
+  display: block;
+  width: 100%;
+  padding: 0.5rem;
+  font-size: 1rem;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  font-weight: 400;
+  line-height: 1.5;
+  color: #212529;
+  background-color: #fff;
+  background-clip: padding-box;
+  border: 1px solid #ced4da;
+  border-radius: 0.375rem;
+  transition:
+    border-color 0.15s ease-in-out,
+    box-shadow 0.15s ease-in-out;
+  margin-bottom: 1rem;
+}
+
+/* Zip Code */
+
+.zip-code-label {
+  border-radius: 5rem;
+  font-weight: 400;
+  font-size: 1rem;
+}
+
+/* City Display */
+
+.city {
+  border: rgb(46, 45, 45) 1px solid;
+  margin-top: 1rem;
+  border-radius: 5px;
+  margin-bottom: 1rem;
+  overflow: hidden;
+}
+
+.city-header {
+  background-color: rgb(236, 234, 234);
+  padding: 0.5rem 1rem;
+  font-weight: 500;
+  border-bottom: 1px solid black;
+}
+
+.city-body {
+  padding: 1rem;
+}
+
+.city-body ul {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+}
+
+.city-body li {
+  margin-bottom: 0.5rem;
 }

src/App.jsx

@@ -1,12 +1,63 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import "./App.css";
 
-function City(props) {
-  return <div>This is the City component</div>;
+// API: https://ctp-zip-code-api.onrender.com/
+
+function City({ cityData }) {
+  return (
+    <div className="city">
+      <div className="city-header">
+        <p>{cityData.LocationText}</p>
+      </div>
+      <div className="city-body">
+        <ul>
+          <li>State: {cityData.State}</li>
+          <li>
+            Location: ({cityData.Lat}, {cityData.Long})
+          </li>
+          <li>Population (estimated): {cityData.EstimatedPopulation}</li>
+          <li>Total Wages: {cityData.TotalWages}</li>
+        </ul>
+      </div>
+    </div>
+  );
 }
 
-function ZipSearchField(props) {
-  return <div>This is the ZipSearchField component</div>;
+function ZipSearchField() {
+  const [data, setData] = useState([]);
+  const [zipCode, setZipCode] = useState("");
+
+  const handleInputChange = (event) => {
+    const newZipCode = event.target.value;
+    setZipCode(newZipCode);
+  };
+
+  useEffect(() => {
+    fetch(`https://ctp-zip-code-api.onrender.com/zip/${zipCode}`)
+      .then((response) => response.json())
+      .then((data) => {
+        setData(data);
+        console.log(data);
+      })
+      .catch((error) => console.error("Error:", error));
+  }, [zipCode]);
+
+  return (
+    <div className="zipcode">
+      <form>
+        <input
+          type="text"
+          className="form-control"
+          value={zipCode}
+          onChange={handleInputChange}
+          placeholder="Enter zip code"
+        />
+      </form>
+      {data.map((cityInfo, index) => (
+        <City key={index} cityData={cityInfo} />
+      ))}
+    </div>
+  );
 }
 
 function App() {
@@ -16,11 +67,8 @@ function App() {
         <h1>Zip Code Search</h1>
       </div>
       <div className="mx-auto" style={{ maxWidth: 400 }}>
+        <p className="zip-code-label">Zip Code: </p>
         <ZipSearchField />
-        <div>
-          <City />
-          <City />
-        </div>
       </div>
     </div>
   );