57 lines
1.7 KiB
HTML
57 lines
1.7 KiB
HTML
<html>
|
|
<head>
|
|
<meta charset="utf-8"/>
|
|
<title>구구단</title>
|
|
|
|
<script src="https://unpkg.com/react@16/umd/react.development.js"></script> <!--리액트 핵심 코드-->
|
|
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <!-- 리액트 코드를 웹에 붙이는 역할-->
|
|
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
|
|
</head>
|
|
<body>
|
|
<div id="root"></div>
|
|
<script type="text/babel">
|
|
const GuGuDan = () => {
|
|
const [first, setFirst] = React.useState(Math.ceil(Math.random() * 9));
|
|
const [second, setSecond] = React.useState(Math.ceil(Math.random() * 9));
|
|
const [value, setValue] = React.useState('');
|
|
const [result, setResult] = React.useState('');
|
|
|
|
const inputRef = React.useRef(null);
|
|
|
|
const onChangeInput = (e) => {
|
|
setValue(e.target.value);
|
|
};
|
|
|
|
const onSubmitForm = (e) => {
|
|
e.preventDefault();
|
|
if(parseInt(value) === first * second) {
|
|
setResult('정답: ' + value);
|
|
setFirst(Math.ceil(Math.random() * 9));
|
|
setSecond(Math.ceil(Math.random() * 9));
|
|
setValue('');
|
|
inputRef.current.focus();
|
|
} else {
|
|
setResult('땡');
|
|
setValue('');
|
|
inputRef.current.focus();
|
|
}
|
|
}
|
|
|
|
return (
|
|
<React.Fragment>
|
|
<div>{first} 곱하기 {second}는?</div>
|
|
<form onSubmit={onSubmitForm}>
|
|
<input ref={inputRef} onChange={onChangeInput} value={value} />
|
|
<button>입력!</button>
|
|
</form>
|
|
<div id="result">{result}</div>
|
|
</React.Fragment>
|
|
);
|
|
}
|
|
|
|
</script>
|
|
<script type="text/babel">
|
|
ReactDOM.render(<GuGuDan/>, document.querySelector('#root'));
|
|
</script>
|
|
</body>
|
|
</html> |