Skip to content

Instantly share code, notes, and snippets.

@yallups

yallups/index.html

Created March 3, 2017 23:40
Show Gist options
  • Save yallups/fc52458cb5f07bcb2f7be26a6000d5f9 to your computer and use it in GitHub Desktop.
Save yallups/fc52458cb5f07bcb2f7be26a6000d5f9 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source https://jsbin.com/zubuzubipu
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="root"></div>
<script src="https://www.promisejs.org/polyfills/promise-4.0.0.js"></script>
<script src="https://fb.me/react-15.1.0.js"></script>
<script src="https://fb.me/react-dom-15.1.0.js"></script>
<script src="https://cdn.jsdelivr.net/lodash/4/lodash.min.js"></script>
<script id="jsbin-javascript">
/**
* Make an App that has an
* - input field
* - button
* - list of city, states
* user should be able to enter a zipcode into the field
* and press the button to save the city and state to the list.
*
* Bonus:
* - Selecting an item in the list should fill the input with
* the zip code that was used to look up the city and state
* - when a list item is selected it should appear selected
* - if the user enters a new zip code while an item is selected
* and hits the button, the record should be updated (if valid input)
* - User should be able to deselect selected item
*
*/
let data = [];
class Form extends React.Component {
constructor () {
super();
this.state = {
state: '',
place: '',
source: {}
}
this.onChange = this.onChange.bind(this);
this.onSave = this.onSave.bind(this);
}
onSave () {
data.push(
this.state.source
)
console.log('data length: ' + data.length);
}
onChange (event) {
let zip = event.target.value;
let self = this;
if (zip.length === 5 ) {
fetch('https://api.zippopotam.us/us/' + zip)
.then(res => res.json())
.then(function (json) {
self.setState({
source: json,
state: json['places'][0]['state'],
place: json['places'][0]['place name']
});
});
}
}
render () {
console.log(this.state)
return (React.createElement("div", null,
React.createElement("input", {type: "number", name: "text", onChange: this.onChange, placeholder: "zip"}),
React.createElement("input", {type: "button", name: "send", value: "save", onClick: this.onSave}),
React.createElement("hr", null),
React.createElement("p", null, React.createElement("span", null, " State: "), " ", React.createElement("span", null, this.state.state)),
React.createElement("span", null, " Place: "), " ", React.createElement("span", null, this.state.place)
));
}
}
class App extends React.Component {
render() {
return (
React.createElement("div", null,
React.createElement(Form, null)
)
);
}
}
ReactDOM.render(
React.createElement(App, null),
document.getElementById('root')
);
</script>
<script id="jsbin-source-javascript" type="text/javascript">
/**
* Make an App that has an
* - input field
* - button
* - list of city, states
* user should be able to enter a zipcode into the field
* and press the button to save the city and state to the list.
*
* Bonus:
* - Selecting an item in the list should fill the input with
* the zip code that was used to look up the city and state
* - when a list item is selected it should appear selected
* - if the user enters a new zip code while an item is selected
* and hits the button, the record should be updated (if valid input)
* - User should be able to deselect selected item
*
*/
let data = [];
class Form extends React.Component {
constructor () {
super();
this.state = {
state: '',
place: '',
source: {}
}
this.onChange = this.onChange.bind(this);
this.onSave = this.onSave.bind(this);
}
onSave () {
data.push(
this.state.source
)
console.log('data length: ' + data.length);
}
onChange (event) {
let zip = event.target.value;
let self = this;
if (zip.length === 5 ) {
fetch('https://api.zippopotam.us/us/' + zip)
.then(res => res.json())
.then(function (json) {
self.setState({
source: json,
state: json['places'][0]['state'],
place: json['places'][0]['place name']
});
});
}
}
render () {
console.log(this.state)
return (<div>
<input type='number' name='text' onChange={this.onChange} placeholder='zip'/>
<input type='button' name='send' value='save' onClick={this.onSave} />
<hr />
<p><span> State: </span> <span>{this.state.state}</span></p>
<span> Place: </span> <span>{this.state.place}</span>
</div>);
}
}
class App extends React.Component {
render() {
return (
<div>
<Form />
</div>
);
}
}
ReactDOM.render(
<App/>,
document.getElementById('root')
);
</script></body>
</html>
Raw
jsbin.zubuzubipu.js
/**
* Make an App that has an
* - input field
* - button
* - list of city, states
* user should be able to enter a zipcode into the field
* and press the button to save the city and state to the list.
*
* Bonus:
* - Selecting an item in the list should fill the input with
* the zip code that was used to look up the city and state
* - when a list item is selected it should appear selected
* - if the user enters a new zip code while an item is selected
* and hits the button, the record should be updated (if valid input)
* - User should be able to deselect selected item
*
*/
let data = [];
class Form extends React.Component {
constructor () {
super();
this.state = {
state: '',
place: '',
source: {}
}
this.onChange = this.onChange.bind(this);
this.onSave = this.onSave.bind(this);
}
onSave () {
data.push(
this.state.source
)
console.log('data length: ' + data.length);
}
onChange (event) {
let zip = event.target.value;
let self = this;
if (zip.length === 5 ) {
fetch('https://api.zippopotam.us/us/' + zip)
.then(res => res.json())
.then(function (json) {
self.setState({
source: json,
state: json['places'][0]['state'],
place: json['places'][0]['place name']
});
});
}
}
render () {
console.log(this.state)
return (React.createElement("div", null,
React.createElement("input", {type: "number", name: "text", onChange: this.onChange, placeholder: "zip"}),
React.createElement("input", {type: "button", name: "send", value: "save", onClick: this.onSave}),
React.createElement("hr", null),
React.createElement("p", null, React.createElement("span", null, " State: "), " ", React.createElement("span", null, this.state.state)),
React.createElement("span", null, " Place: "), " ", React.createElement("span", null, this.state.place)
));
}
}
class App extends React.Component {
render() {
return (
React.createElement("div", null,
React.createElement(Form, null)
)
);
}
}
ReactDOM.render(
React.createElement(App, null),
document.getElementById('root')
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment