Instructor Carlos, TA Chuma: Project 1

zip-search/src/App.css

@@ -1,6 +1,47 @@
 .App-header {
-  background-color: #222;
+  background-color: #6457A6;
   padding: 20px;
   color: white;
   text-align: center;
 }
+
+.App-Search{
+  text-align: center;
+  padding-top: 1em;
+}
+
+.Round-Search{
+  border-radius: 15px;
+  background-color:#9dacff79;
+  border-color: transparent;
+  outline: none;
+}
+
+.info-header{
+  font-weight: bold;
+  width:100%;
+  padding-top: 0.5em;
+  text-align: center;
+}
+
+.App-Info-Container{
+  list-style-position: inside;
+  display: flex;
+  justify-content: center;
+  padding:1em;
+}
+
+.Spacious{
+  padding-top: 10px;
+}
+.content{
+  padding:0.5em;
+  text-align: left;
+  padding-right: 3em;
+}
+
+.cities{
+  text-align: left;
+  border-radius: 10px;
+  box-shadow: 0 0px 2px 0 rgba(0, 0, 0, 0.274);
+}

zip-search/src/App.js

@@ -3,25 +3,90 @@ import './App.css';
 
 
 function City(props) {
-  return (<div>This is the City component</div>);
+  return (
+    <div className="Spacious">
+      <div className="cities">
+        <div className="content">
+        <div className="info-header">{props.locationText}</div>
+        <hr/>
+          <ul>
+            <li>State: {props.stateName}</li>
+            <li>Location: {props.location}</li>
+            <li>Population (estimated): {props.population}</li>
+            <li>Total Wages: {props.wages}</li>
+          </ul>
+        </div>
+      </div>
+      </div>);
 }
 
 function ZipSearchField(props) {
-  return (<div>This is the ZipSearchField component</div>);
+
+  return (
+    <div className="zip-input">
+      <b>Zip Code:  </b>
+      <input type="text" class="Round-Search" onChange= {props.changeHandler}
+      />
+    </div>);
+
 }
 
 
 class App extends Component {
+
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      zipCode: "",
+      cities: [],
+    };
+
+  }
+  saveCities = (cities) => {
+    this.setState({cities})
+  }
+
+  zipSearchCheck = (event) => {
+
+    this.setState( {zipCode: event.target.value} )
+
+    if(event.target.value.length == 5) {
+      fetch("http://ctp-zip-api.herokuapp.com/zip/" + event.target.value)
+      .then((response) => response.json())
+      .then(this.saveCities)
+    }
+    else {
+      this.saveCities([]);
+    }
+
+  }
+
+
   render() {
     return (
+
       <div className="App">
         <div className="App-header">
           <h2>Zip Code Search</h2>
         </div>
-        <ZipSearchField />
-        <div>
-          <City />
-          <City />
+        <div className="App-Search">
+          <ZipSearchField zipCode = { this.state.zipCode } 
+            changeHandler = { this.zipSearchCheck }/>
+          <div>Current Zip is {this.state.zipCode} </div>
+        </div>
+
+
+        <div className="App-Info-Container">
+
+          <div className="Info">
+            { this.state.cities.map((city) => 
+              <City stateName = {city.State} 
+              locationText = {city.LocationText} 
+              location = {"("+ city.Lat + "," + city.Long + ")"}
+              population = {city.EstimatedPopulation} wages = {city.TotalWages}
+              />) }
+          </div>
         </div>
       </div>
     );