Completed City & Zip search

zip-search/src/App.css

@@ -4,3 +4,38 @@
   color: white;
   text-align: center;
 }
+#zip{
+  margin-left: 8px;
+  text-align: center;
+}
+.zip{
+  padding-top: 60px;
+  display: flex;
+  justify-content: center;
+  font-size: 20px;
+  font-weight: 500;
+}
+.city{
+  justify-content: center;
+  margin: 20px;
+  border: 2px solid #f3f3f3;
+  width: 400px;
+}
+.container{
+  width: 400px;
+}
+.city-name{
+  text-align: center;
+  background-color: #888;
+  color: white;
+  padding: 10px
+}
+.results{
+  padding-top: 30px ;
+  display: flex;
+  justify-content: center;
+}
+li{
+  margin: 2px;
+  padding: 5px
+}

zip-search/src/App.js

@@ -3,25 +3,69 @@ import './App.css';
 
 
 function City(props) {
-  return (<div>This is the City component</div>);
+  return (
+    <div class="city">
+      <div class="city-name">{props.name}</div>
+      <div class="container">
+        <ul>
+          <li>State: {props.state}</li>
+          <li>Location: ({props.lat}, {props.long})</li>
+          <li>Population: {props.population}</li>
+          <li>Total Wages: {props.wages}</li>
+        </ul>
+      </div>
+    </div>
+  );
 }
 
 function ZipSearchField(props) {
-  return (<div>This is the ZipSearchField component</div>);
+  return (
+    <div class="zip">
+      <label for="zip">Enter a zip-code:</label>
+      <input id="zip" name="zip" maxLength={5} type="text" placeholder="Enter a zip-code" onChange={props.changeHandler}/>
+    </div>
+  );
 }
 
-
 class App extends Component {
+  state = {
+    cities: [],
+    zip: '',
+    activateFetch: false
+  }
+  updateZip = async (e) => {
+    await this.setState({ zip: e.target.value });
+    if(this.state.zip.length - 1 === 4){
+      this.updateCities();
+      console.log(this.state.cities);
+    } else {
+      this.setState({ cities: [] }); //resets state once character is less than 5
+    }
+  }
+  updateCities = async () => {
+    await fetch(`http://ctp-zip-api.herokuapp.com/zip/${this.state.zip}`)
+      .then( res => res.json())
+      .then( data => this.setState({ cities: data }))
+      .catch( error => console.log(error));
+  }
   render() {
     return (
       <div className="App">
         <div className="App-header">
           <h2>Zip Code Search</h2>
         </div>
-        <ZipSearchField />
-        <div>
-          <City />
-          <City />
+        <ZipSearchField zip={this.state.zip} changeHandler={this.updateZip} />
+        <div class="results">
+          {
+            this.state.cities.length === 0 ?
+              <div><p>No Results</p></div>
+                :
+              <div>
+                {
+                  this.state.cities.map(city => <City name={city.LocationText} state={city.State} lat={city.Lat} long={city.Long} wages={city.TotalWages} population={city.EstimatedPopulation} />)
+                }
+              </div>
+          }
         </div>
       </div>
     );

zip-search/src/index.css

@@ -0,0 +1,3 @@
+#none {
+    padding-top: 200px;
+}