import React from "https://esm.sh/react";
import ReactDOM from "https://esm.sh/react-dom";

const root = ReactDOM.createRoot(document.getElementById("root"));

function App() {
    const [minutes, setMinutes] = React.useState(0); // state의 default 값 == 0
    const onChange = (event) => {
        setMinutes(event.target.value)
    };
    const reset = () => setMinutes(0);
    return( 
    <div>
        <h1>Super Convertor!!</h1>
        <div>
        <label htmlFor="minutes">Minutes</label>&nbsp;
        <input 
            value={minutes} id="minutes" 
            placeholder="Minutes" type="number" 
            onChange={onChange} />
        </div>
        <div>
        <label htmlFor="hours">Hours</label>&nbsp;
        <input 
            value={Math.round(minutes/60)} id="hours" 
            placeholder="Hours" type="number" disabled />
        </div>
        <button onClick={reset}>RESET</button>
    </div>
    );
}

root.render(
  <App />
);