From 162969b8bfe9331bbeacf03585c11005acfa85d4 Mon Sep 17 00:00:00 2001
From: ShaniyaS13 <57805735+ShaniyaS13@users.noreply.github.com>
Date: Sat, 16 Oct 2021 16:54:05 -0400
Subject: [PATCH] Add files via upload

---
 App.js | 75 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 75 insertions(+)
 create mode 100644 App.js

diff --git a/App.js b/App.js
new file mode 100644
index 0000000..d213980
--- /dev/null
+++ b/App.js
@@ -0,0 +1,75 @@
+import React, { Component } from 'react';
+import './App.css';
+
+
+function City({ data } ) {
+  return (
+    //<div>This is the City component</div>
+      <div>
+        City Name: {data.City}
+        State: {data.State}
+        <ul>
+          <li>State: {data.state}</li>
+          <li>Location: {data.lat}, {data.long} </li>
+          <li>Population (estimated): {data.population}</li>
+          <li>Total Wages: {data.wages}</li>
+        </ul>
+      </div>
+    );
+}
+
+function ZipSearchField(props) {
+  return (
+  <div>
+    Zip Code: 
+    <input 
+    type="text"  
+    onChange= { props.changeHandler } 
+    placeholder = "try 10016"
+    />
+    </div>);
+}
+
+
+class App extends Component {
+
+  state = {
+    zipCode: ' ',
+    cities: [],
+  }
+zipChanged = (event) => {
+  console.log(event.target.value);
+  this.setState({ zipCode: event.target.value })
+
+if(event.target.value.length ===5){
+  fetch('https://ctp-zip-api.herokuapp.com/zip/'+ event.target.value)
+    .then(res => res.json())
+    .then((data) =>{
+       console.log(data)
+       this.setState({cities: data})
+    })
+    .catch(err => {
+      console.log('No results')
+      this.setState({ cities: []})
+    })
+  }   else{
+    this.setState({ cities: []})
+  }
+}
+  render() {
+    return (
+      <div className="App">
+        <div className="App-header">
+          <h2>Zip Code Search</h2>
+        </div>
+        <ZipSearchField zipcode={this.state.zipcode} changeHandler={this.zipChanged}/>
+        <div> 
+        {this.state.cities.length === 0 ? <h5>No results</h5> : null}
+        { this.state.cities.map((city) => <City data= {city}/> )} 
+        </div>
+      </div>
+    );
+  }
+}
+
+export default App;