Archive until 15 Jul 2021/Learning React
React - times table
hajinny
2021. 1. 2. 14:58
<html>
<head>
<meta UTF-8> //(or something like that)
<script crossorigin src="unpkg.com/react...">
<script crossorigin src="unpkg.com/reactDOM...">
<script src="unpkg.com/babel...">
</head>
<body>
<div id="root></div>
<script type="text/babel">
class GuGuDan extends React.Component{
constructor(props){
super(props);
this.state = {
// put things that change
first: Math.ceil(Math.random()*9),
second: Math.ceil(Math.random()*9),
input: '',
result: '',
};
}
onSubmit = (e)=>{
e.preventDefault();
if(this.state.first*this.state.second === parseInt(this.state.input){
this.setState({
first: Math.ceil(Math.random()*9),
second: Math.ceil(Math.random()*9),
input: '',
result: 'Correct!',
});
}else{
this.setState({
input: '',
result: 'Incorrect!',
});
}
}
onChange = (e)=>{
this.setState({value: e.target.value});
}
render(){
return (
<div>
<div>What is {this.state.first} times by {this.state.second}?</div>
<form onSubmit={this.onSubmit}>
<input type="numbers" value={this.state.input} onChange={this.onChange} />
<button type="submit">Submit!</button>
</form>
<div>Result = {this.state.result}</div>
</div>
)
}
}
</script>
<script type="text/babel">
ReactDom.render(<GuGuDan />, document.querySelector('#root');
</script>
</body>
</html>