[React JS] state 활용하기2

기존에 만들었던 momentum app에 react js를 추가해 보았다.

https://ge5rg2.github.io/momentum-2021/

Momentum App

    <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">
        const root = document.getElementById("root");
        const convertIcon = document.querySelector(".fa-exchange-alt");
        const handleClickConvert = () => {
          root.classList.remove("page-down");
          root.classList.add("page-up");
          root.classList.remove("hidden");
          root.classList.add("flex");
        };
        convertIcon.addEventListener("click", handleClickConvert);
        const MinToHour = () => {
            const [min, setMin] = React.useState(0);
            const [inverted, setInverted] = React.useState(false);
            const onTimeChange = (event) => {
                setMin(event.target.value);
            }
            const timeOnClick = () => {
                setMin(0);
            }
            const timeInverted = () => {
                setInverted((current) => !current);
                timeOnClick();
            }
            return (
                <div>
                    <h3>Minutes to Hours</h3>
                    <div>
                        <label htmlFor="min">Min</label>
                        <input onChange={onTimeChange} value={inverted ? Math.round(min*60) : min} id="min" placeholder="Min" type="number" disabled={inverted}/>
                    </div>
                    <div>
                        <label htmlFor="hour">Hours</label>
                        <input onChange={onTimeChange} value={inverted ? min : Math.round(min/60)} id="hour" placeholder="Hour" type="number" disabled={!inverted}/>
                    </div>
                    <button onClick={timeOnClick}>Reset</button>
                    <button onClick={timeInverted}>{inverted ? "Turn Back" : "Inverted" }</button>
                </div>
            );
        };
        const KmToMile = () => {
          const [distance, setDistance] = React.useState(0);
          const [inverted, setInverted] = React.useState(false);
          const onDistanceChange = (event) => {
            setDistance(event.target.value);
          };
          const distanceOnClick = () => {
            setDistance(0);
          };
          const distanceInverted = () => {
            setInverted((current) => !current);
            distanceOnClick();
          };
            return (
              <div>
                <h3>KM to Miles</h3>
                <div>
                    <label htmlFor="km">KM</label>
                    <input onChange={onDistanceChange} value={inverted ? Math.round(1.609344*100*distance)/100 : distance} id="km" type="number" placeholder="KM" disabled={inverted}/>
                </div>
                <div>
                    <label htmlFor="mile">Mile</label>
                    <input onChange={onDistanceChange} value={inverted ? distance : Math.round(0.621371*distance*100)/100} id="mile" type="number" disabled={!inverted} placeholder="Mile"/>
                </div>
                <button onClick={distanceOnClick}>Reset</button>
                <button onClick={distanceInverted}>{inverted ? "Turn Back" : "Inverted" }</button>
              </div>
            );
        };
        const KgTolb = () => {
          const [weight, setWeight] = React.useState(0);
          const [inverted, setInverted] = React.useState(false);
          const onWeightChange = (event) => {
            setWeight(event.target.value);
          };
          const weightOnClick = () => {
            setWeight(0);
          };
          const weightInverted = () => {
            setInverted((current) => !current);
            weightOnClick();
          };
          return (
            <div>
              <h3>Kg to lb</h3>
              <div>
                <label htmlFor="kg">Kg</label>
                <input onChange={onWeightChange} value={inverted ? Math.round(0.453592*100*weight)/100 : weight} id="kg" type="number" placeholder="Kg" disabled={inverted}/>
              </div>
              <div>
                <label htmlFor="lb">Lb</label>
                <input onChange={onWeightChange} value={inverted ? weight : Math.round(2.204623*100*weight)/100} id="lb" type="number" placeholder="Lb" disabled={!inverted}/>
              </div>
              <button onClick={weightOnClick}>Reset</button>
              <button onClick={weightInverted}>{inverted ? "Turn Back" : "Inverted" }</button>
            </div>
          );
        };
        const App = () => {
            const [index, setIndex] = React.useState("xx")
            const onSelect = (event) => {
                setIndex(event.target.value);
            }
            return (
                <div>
                  <div>
                    <div>Super Converter</div>
                    <span id="convertPageDown" class="pageDown">✖</span>
                  </div>
                      <select value={index} onChange={onSelect}>
                          <option value="xx">Select your units</option>
                          <option value="0">Minutes & Hours</option>
                          <option value="1">KM & Miles</option>
                          <option value="2">Kg & lb</option>
                      </select>
                      <hr />
                      {index === "xx" ? <h3>Please select your units</h3> : null}
                      {index === "0" ? <MinToHour /> : null }
                      {index === "1" ? <KmToMile /> : null}
                      {index === "2" ? <KgTolb /> : null}
                </div>
            );
        };
        ReactDOM.render(<App />, root);
        const convertPageDown = document.querySelector("#convertPageDown");
            const handleHiddenConvert = (event) => {
              event.preventDefault();
              root.classList.remove("page-up");
              root.classList.add("page-down");
              setTimeout(function(event) {root.classList.remove("flex"); root.classList.add("hidden");}, 501);
            };
            convertPageDown.addEventListener("click", handleHiddenConvert);
    </script>

다른 기능들과 마찬가지로

<div id="root" class="hidden"></div>

를 본문에 삽입 후 작성하였다.

거리, 무게, 시간 단위 변환이다.

기본화면

좌측의 convert icon 클릭 시 나오는 화면

옵션 선택화면

invert 기능 추가