reactjs-intro/useState.html at main · SoJeongMun/reactjs-intro · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!DOCTYPE html>
<html lang="ko">
<body>
    <div id="root"></div>
</body>
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script crossorigin src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
    function MinToH() {
        const [min, setMin] = React.useState();
        const [flip, setFlip] = React.useState(false);
        const onChange = (event) => {
            setMin(event.target.value);
        };
        const reset = () => setMin(0);
        const onFlip = () => {
            reset();
            setFlip((v) => !v);
        }
        return(
            <div>
                <div>
                    <label htmlFor="min" style={{ marginRight: '10px' }}>Minutes</label>
                    <input value={flip ? min * 60 : min} onChange={onChange} id="min" placeholder="Minutes" type="number" disabled={flip} />
                </div>
                <h4>📍You can convert {min}</h4>
                <div>
                    <label htmlFor="hour" style={{ marginRight: '10px' }}>Hours</label>
                    <input value={flip ? min : Math.floor(min / 60)} onChange={onChange} id="hour" placeholder="Hours" type="number" disabled={!flip} />
                </div>
                <button onClick={reset}>Reset</button>
                <button onClick={onFlip}>Flip</button>
            </div>
        )
    }
    function KmToMi(){
        const [km, setKm] = React.useState();
        const [flip, setFlip] = React.useState(false);
        const onChange = (e) => {
            setKm(e.target.value)
        };
        const reset = () => setKm(0);
        const onFlip = () => {
            reset();
            setFlip((v) => !v);
        }
        return(
            <div>
                <div>
                    <label htmlFor="km" style={{ marginRight: '10px' }}>Km</label>
                    <input value={flip ? Math.round(km * 1.6093) : km} onChange={onChange} id="km" placeholder="Km" type="number" disabled={flip} />
                </div>
                <h4>📍You can convert {km}</h4>
                <div>
                    <label htmlFor="mile" style={{ marginRight: '10px' }}>Miles</label>
                    <input value={flip ? km : Math.round(km * 0.621371)} onChange={onChange} id="mile" placeholder="Miles" type="number" disabled={!flip} />
                </div>
                <button onClick={reset}>Reset</button>
                <button onClick={onFlip}>Flip</button>
            </div>
        )
    }
    function App() {
        const [index, setIndex] = React.useState('empty');
        const onSelect = (e) => setIndex(e.target.value);
        return(
            <div>
                <h1 className="title">Converter</h1>
                <select value={index} onChange={onSelect}>
                    <option value="empty">Units</option>
                    <option value="0">M to H</option>
                    <option value="1">K to M</option>
                </select>
                <hr/>
                { index === 'empty' ? 'Select your units' : index === '0' ? <MinToH /> : index === '1' ? <KmToMi /> : null}
            </div>
        )
    }
    const root = document.getElementById("root");
    ReactDOM.render(<App />, root);
</script>
</html>