반응형
KM 를 MILES 로 단위 변환하는 코드를 추가했다.
전체 코드
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
const root = document.getElementById("root");
function MinutesToHours() {
// min > hour
const [amount, setAmount] = React.useState(0);
const [flipped, setFlipped] = React.useState(false);
const onChange = (event) => {
setAmount(event.target.value);
}
const onFlip = () => {
reset();
setFlipped((current) => !current);
}
const reset = () => setAmount(0);
return (
<div>
<label htmlFor="minute">minute</label>
<input
id="amount"
value={flipped ? amount * 60 : amount}
placeholder="amount"
type="number"
onChange={onChange}
disabled={flipped}
/>
<br />
<label htmlFor="hours">Hours</label>
<input
disabled={!flipped}
id="hours"
placeholder="Hours"
value={flipped ? amount : Math.round(amount / 60)}
type="number"
onChange={onChange}
/> <br />
<button onClick={reset}>Reset</button>
<button onClick={onFlip}>{flipped ? 'Minutes To Hours' : 'Hours to Minutes'}</button>
</div>
);
}
function KmToMiles() {
const [num, setNum] = React.useState(0);
const [disable, setDisable] = React.useState(true);
const invert = (event) => {
setNum(event.target.value);
// setNum(Math.round(event.target.value / 1.609344));
}
function reset() {
setNum(0);
}
const switchUnit = () => {
reset();
setDisable((current) => !current);
}
return (
<div>
<h3>Km To Miles</h3>
<label htmlFor="km">KM: </label>
<input id="km" value={disable ? num : Math.round(num * 1.609344)} type="number" disabled={!disable} onChange={invert} /> <br />
<label htmlFor="miles">MILES: </label>
<input id="miles" value={!disable ? num : Math.round(num / 1.609344)} type="number" disabled={disable} onChange={invert} /> <br />
<button onClick={reset}>reset</button>
<button onClick={switchUnit}>{disable ? 'KM TO MILES' : 'MILES TO KM'}</button>
</div>
)
}
function App() {
const [index, setIndex] = React.useState("0");
const onSelect = (event) => {
setIndex(event.target.value);
}
return (
<div>
<h1>Super Converter</h1>
<select value={index} onChange={onSelect}>
<option value="0">Minutes & Hours</option>
<option value="1">Km & Miles</option>
</select>
<hr />
{index === '0' ? <MinutesToHours /> : null}
{index === '1' ? <KmToMiles /> : null}
</div>
);
}
ReactDOM.render(<App />, root);
</script>
</html>반응형
'온라인 강의 > ReactJS로 영화 웹 서비스 만들기 [Nomad]' 카테고리의 다른 글
| #4.1 Memo (0) | 2023.05.22 |
|---|---|
| #4.0 Props (0) | 2023.05.22 |
| #3.7 State Practice part Two (0) | 2023.05.22 |
| #3.6 State Practice part One (0) | 2023.05.22 |
| #3.5 Inputs and State (0) | 2023.05.22 |