Skip to content

Instantly share code, notes, and snippets.

@SaraVieira SaraVieira/fetch.html
Last active Jul 6, 2018

Embed
What would you like to do?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<style>
html,
body,
#app {
margin: 0;
padding: 0;
background: #001f3f;
height: 100%;
color: white;
}
button {
height: 40px;
padding: 8px 10px;
border: none;
width: 200px;
margin: 10px 0;
font-size: 18px;
color: #111111;
}
.wrapper {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
font-family: Avenir, Arial, Helvetica, sans-serif;
font-size: 60px;
align-items: center;
justify-content: center;
}
.label {
font-size: 14px;
}
</style>
<div id="app"></div>
<!-- Note: when deploying, replace "development.js" with "production.min.js". -->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script>
class Wrapper extends React.Component {
constructor(props) {
super(props);
this.state = { image: null };
this.getImage = this.getImage.bind(this)
}
getImage() {
return fetch('https://dog.ceo/api/breed/akita/images/random')
.then(rsp => rsp.json())
.then(data => (
this.setState({
image: data.message
})
))
}
componentDidMount() {
this.getImage()
}
render() {
return React.createElement(
'div',
{ className: 'wrapper' },
React.createElement(Img, { source: this.state.image }),
React.createElement(Button, { getImage: this.getImage })
);
}
}
function Img(props) {
return React.createElement(
'img',
{
src: props.source,
},
);
}
function Button(props) {
return React.createElement(
'button',
{ onClick: props.getImage },
"Get a new puppy"
);
}
var container = document.querySelector('#app');
ReactDOM.render(
React.createElement(Wrapper),
container
);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.