<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
function MinutesToHours(){
const [amount, setAmount] = React.useState();
const [inverted, setInverted] = React.useState(false);
const onChange = () => {
setAmount(event.target.value); //이벤트 발생 시 값 업데이트
}
const reset = () => {
setAmount(0);
}
const onInvert = () => {
reset();
setInverted((current) => !current);
}
return(
<div>
<div>
<label htmlFor="minutes">Minutes</label>
<input
value={inverted ? amount*60 : amount} //UI에 보여주는 것
id="minutes"
placeholder="Minutes"
type="number"
onChange={onChange} //이벤트를 들어주는 것
disabled={inverted}
/>
</div>
<div>
<label htmlFor="Hours">Hours</label>
<input
value={inverted ? amount : Math.round(amount/60)}
id="Hours"
placeholder="Hours"
type="number"
onChange={onChange}
disabled={!inverted}
/>
</div>
<button onClick={reset}>Reset</button>
<button onClick={onInvert}>{inverted ? "Turn back" : "Invert"}</button>
</div>
);
}
function KmToMiles(){
const [amount, setAmount] = React.useState();
const [invert, setInvert] = React.useState(false);
const onChange = () => {
setAmount(event.target.value);
}
const reset = () => {
setAmount(0);
}
const onInvert = () => {
setInvert((current)=>!current)
}
return(
<div>
<div>
<label>Km</label>
<input
placeholder="Km"
type="number"
id = "Km"
value={invert ? Math.round(amount / 0.6214) :amount}
onChange={onChange}
disabled={invert}
>
</input>
</div>
<div>
<label>Miles</label>
<input
placeholder="Miles"
type="number"
id="Miles"
value = {invert ? amount: amount * 0.6214}
onChange={onChange}
disabled={!invert}
>
</input>
</div>
<button onClick={onInvert}>{invert ? "Turn back" : "Invert"}</button>
<button onClick={reset}>Reset</button>
</div>
);
}
function App(){
const [index, setIndex] = React.useState("xx");
const onSelect = (event) =>{
setIndex(event.target.value);
}
return(
<div>
<h1 className="hi">Super Converter</h1>
<select value={index} onChange={onSelect}>
<option value="xx"> Select your unit. </option>
<option value="0"> Minutes & Hours </option>
<option value="1"> amount & Miles </option>
</select>
<hr />
{index === "xx" ? "Please select your units." : null}
{index === "0" ? <MinutesToHours /> : null}
{index === "1" ? <KmToMiles /> : null}
</div>
);
}
const root = document.getElementById("root");
ReactDOM .render(<App />, root);
</script>
</html>
