Finished

npm-debug.log

@@ -0,0 +1,22 @@
+0 info it worked if it ends with ok
+1 verbose cli [ '/home/misha/.nvm/versions/node/v6.11.0/bin/node',
+1 verbose cli   '/home/misha/.nvm/versions/node/v6.11.0/bin/npm',
+1 verbose cli   'start' ]
+2 info using npm@3.10.10
+3 info using node@v6.11.0
+4 verbose stack Error: ENOENT: no such file or directory, open '/home/misha/ctp/week-03-projects/package.json'
+4 verbose stack     at Error (native)
+5 verbose cwd /home/misha/ctp/week-03-projects
+6 error Linux 4.8.0-58-generic
+7 error argv "/home/misha/.nvm/versions/node/v6.11.0/bin/node" "/home/misha/.nvm/versions/node/v6.11.0/bin/npm" "start"
+8 error node v6.11.0
+9 error npm  v3.10.10
+10 error path /home/misha/ctp/week-03-projects/package.json
+11 error code ENOENT
+12 error errno -2
+13 error syscall open
+14 error enoent ENOENT: no such file or directory, open '/home/misha/ctp/week-03-projects/package.json'
+15 error enoent ENOENT: no such file or directory, open '/home/misha/ctp/week-03-projects/package.json'
+15 error enoent This is most likely not a problem with npm itself
+15 error enoent and is related to npm not being able to find a file.
+16 verbose exit [ -2, true ]

zip-search/src/App.css

@@ -23,3 +23,30 @@
   padding-top: 10px;
   padding-bottom: 10px;
 }
+
+.input-area {
+  margin: 15px 15px;
+}
+
+.box-text {
+  width:90px;
+}
+
+.type-button {
+  height: 35px;
+  width: 250px;
+  margin: 10px 0px 0px 35px;
+}
+
+.zip-table {
+  display: block;
+}
+
+.slot {
+  text-align: center;
+  background: #DDDDDD;
+  width: 150px;
+  height: 50px;
+  padding-top: 15px;
+  margin-left: 5px;
+}

zip-search/src/App.js

@@ -4,25 +4,123 @@ import './App.css';
 
 
 function City(props) {
-  return (<div></div>);
+  const c = props.entry;
+  return (
+
+    <div className="panel panel-default">
+      <div className ="panel-heading">
+        {c.City},{c.State}
+      </div>
+      <div className = "panel-body">
+        <ul>
+          <li> State: {c.State}</li>
+          <li> Location: ({c.Lat}, {c.Long})</li>
+          <li> Est Pop: {c.EstimatedPopulation}</li>
+          <li> Total Wages: {c.TotalWages}</li>
+        </ul>
+      </div>
+    </div>);
 }
 
 function ZipSearchField(props) {
-  return (<div></div>);
+  return (
+    <div className="input-area">
+
+      <label className="box-text">{props.labelText}</label>
+
+      <input className="box" type="text" onChange={props.handleChange} name={props.value} />
+    </div>);
 }
 
 
 class App extends Component {
+  constructor(){
+    super();
+
+    this.state = {
+      zip_city: true,
+
+      out:[],
+
+      input:""
+
+    };
+
+    this.zipChanged = this.zipChanged.bind(this);
+
+    this.onTypeButtonClick = this.onTypeButtonClick.bind(this);
+  }
+
+  zipChanged(event){
+    const addon = ((this.state.zip_city ) ? "zip/" : "city/");
+
+    const textEntry = event.target.value.toUpperCase();
+
+    let out = <div></div>;
+
+    if((this.state.zip_city  && textEntry.length === 5) || !this.state.zip_city){
+
+      fetch("http://ctp-zip-api.herokuapp.com/" + addon + textEntry)
+      .then((response) => {
+        return response.json();
+      })
+
+      .then((jsonData) =>{
+
+        if(this.state.zip_city){
+          out = jsonData.map(c=> {
+            return <City entry = {c} />;
+          });
+        }
+        else {
+          out = jsonData.map(c=> {
+            return <label className="slot">{c}</label>;
+          });
+          out = <div className="zip-table">{out}</div>;
+        }
+
+        this.setState({
+
+          input: textEntry,
+          out: out,
+        })
+      })
+          }else {
+      this.setState({
+        out:out,
+      })
+    }
+  }
+
+  onTypeButtonClick(){
+    this.setState({
+      zip_city: (this.state.zip_city) ? false : true,
+    })
+  }
+
   render() {
+    const textLabel = (this.state.zip_city ) ? "Zip Code: " : "City Name: ";
+
+    const textButton = (this.state.zip_city )? "Look up cities by zip-codes" : "Look up zip-codes by city"
     return (
       <div className="App">
         <div className="App-header">
+
           <h2>Zip Code Search</h2>
+
         </div>
-        <ZipSearchField />
         <div>
-          <City />
-          <City />
+
+          <div className ="user-field">
+
+            <button className ="type-button" onClick = {this.onTypeButtonClick}>{textButton}</button>
+
+            <ZipSearchField handleChange={this.zipChanged} value={this.state.in} labelText = {textLabel} /> 
+
+          </div>
+
+          <div>{this.state.out}</div>
+
         </div>
       </div>
     );

zip-search/src/index.css

@@ -2,4 +2,4 @@ body {
   margin: 0;
   padding: 0;
   font-family: sans-serif;
-}
+}