<!DOCTYPE html> 
<html>
     <body> 
        <div id="root"></div> 
    </body> 
    <script src="<https://unpkg.com/[email protected]/umd/react.production.min.js>"> </script> 
    <script src="<https://unpkg.com/[email protected]/umd/react-dom.production.min.js>">  </script> 
    <script src="<https://unpkg.com/@babel/standalone/babel.min.js>"></script> 
    <script type="text/babel"> 
    const root=document.getElementById("root"); 
    function App() {
        const [cnt, modifier]= React.useState(0);
        const onClick = () =>  { 
            modifier((current) => current+1);
        };
        return(
            <div> 
            <h3>클릭 수: {cnt}</h3>
            <button onClick={onClick}>클릭</button>
        </div>  
        );
    }
    ReactDOM.render(<App/>, root);
     </script> 
</html>

<!DOCTYPE html> 
<html>
     <body> 
        <div id="root"></div> 
    </body> 
    <script src="<https://unpkg.com/[email protected]/umd/react.production.min.js>"> </script> 
    <script src="<https://unpkg.com/[email protected]/umd/react-dom.production.min.js>">  </script> 
    <script src="<https://unpkg.com/@babel/standalone/babel.min.js>"></script> 
    <script type="text/babel"> 
    const root=document.getElementById("root"); 

    function MinutesToHours() {
        const [amount, setAmount]=React.useState(0);
        const [flipped, setFlipped]=React.useState(false);
        const reset = () => setAmount  (0);
        const onFlip= () => {
            reset();
            setFlipped((current)=>!current);
        }
        const onChange=(event) =>{
            setAmount(event.target.value);
        };
        return(
        <div>   
            <div>
                <h3>시간변환기</h3>
                <label for="minutes">분</label>
                <input 
               value={flipped ? amount*60: amount}
              id="minutes" 
              placeholder="몇분?" 
              type="number"
              onChange={onChange}
              disabled={flipped}
               /> 
             </div>
        <div>
            <label for="hours">시간</label>   
            <input 
            value={flipped ? amount:Math.round(amount/60)} 
            id="hours" 
            placeholder="몇시?" 
            type="number"
            onChange={onChange}
            disabled={!flipped}
            />
        </div>
        <button onClick={reset}>리셋버튼</button>
        <button onClick={onFlip}>{flipped ? "분->시간으로 바꾸기": "시간->분으로 바꾸기"}</button>
        </div>  
        );
    }
    
    function KmToMiles() {
        const [amount, setAmount]=React.useState(0);
        const [flipped, setFlipped]=React.useState(false);
        const reset = () => setAmount  (0);
        const onFlip= () => {
            reset();
            setFlipped((current)=>!current);
        }
        const onChange=(event) =>{
            setAmount(event.target.value);
        };
        return(
        <div>   
            <div>
                <h3>거리변환기</h3>
                <label for="kilo">KM</label>
                <input 
               value={flipped ? amount/1.60934: amount}
              id="kilo" 
              placeholder="몇KM?" 
              type="number"
              onChange={onChange}
              disabled={flipped}
               /> 
             </div>
        <div>
            <label for="mile">MILE</label>   
            <input 
            value={flipped ? amount:amount*1.60934} 
            id="mile" 
            placeholder="몇MILE?" 
            type="number"
            onChange={onChange}
            disabled={!flipped}
            />
        </div>
        <button onClick={reset}>리셋버튼</button>
        <button onClick={onFlip}>{flipped ? "KM->MILE로 바꾸기": "MILE->KM로 바꾸기"}</button>
        </div>  
        );
    }
   
    function App() {
        const [index, setIndex]=React.useState("xx");
        const onSelect=(event) =>{
            setIndex(event.target.value);
        };
        return(
            <div>
                <h1>단위 변환기</h1>
                <select value={index} onChange={onSelect}>
                    <option value="xx">무엇을 변환할까요?</option>
                    <option value="0">시간변환기</option>
                    <option value="1">거리변환기</option>
                </select>
                {index === "0" ? "무엇을 변환할지 고르세요" : null}
                {index === "0" ? <MinutesToHours /> : null}
                {index === "1" ? <KmToMiles /> : null}
            </div>
        
        );
            
    }
    ReactDOM.render(<App/>, root);
     </script> 
</html>