<!DOCTYPE html>
<html>
<body id="root">
</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=(event)=>{
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} 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>
<div>
<button onClick={reset}>Reset</button>
<button onClick={onInvert}>{inverted ? "turn back":"invert"}</button>
</div>
</div>
)
}
function KmToMiles(){
const [amount,setAmount]=React.useState();
const [inverted,setInverted]=React.useState(false);
const onChange=(event)=>{
setAmount(event.target.value);
}
const reset=()=>setAmount(0);
const onInvert=()=>{
reset();
setInverted((current)=>!current);
}
return(
<div>
<div>
<label htmlFor="km">KM</label>
<input value={inverted ? amount *1000:amount} id="km" placeholder="kilometers"
type="number" onChange={onChange} disabled={inverted}/>
</div>
<div>
<label htmlFor="m">M</label>
<input value={inverted ? amount: amount/1000} id="m" placeholder="meters"
type="number" onChange={onChange} disabled={!inverted}/>
</div>
<div>
<button onClick={reset}>Reset</button>
<button onClick={onInvert}>{inverted ? "turn back":"invert"}</button>
</div>
</div>
)
}
function App(){
const [index,setIndex]=React.useState("0");
const onSelect=(event)=>{
setIndex(event.target.value);
}
return(
<div>
<h1>Super Converter</h1>
<select onChange={onSelect}>
<option value={"0"}>Minutes & Hours</option>
<option value={"1"}>Km to Miles</option>
</select>
<hr></hr>
{index==="0"?<MinutesToHours/>:null}
{index==="1"?<KmToMiles/>:null}
</div>
);
}
const root=document.getElementById("root");
ReactDOM.render(<App/>,root);
</script>
</html>
Leave a comment