whatisthis?

React. React JS - Unit Converter (기능추가+a) 본문

WEB STUDY/REACT

React. React JS - Unit Converter (기능추가+a)

thisisyjin 2022. 2. 16. 12:24
 

React. React JS - Unit Converter (CSS추가)

Unit Converter (수정) React) React JS - practice. 단위변환기 (Unit Conversion) React JS 기초 예제 실습 - 단위 변환기  (Unit Conversion) 분(M) - 시간(H) M = H * 60 H = M / 60 function App() { retu..

mywebproject.tistory.com

 

- km에서 mile단위 변환기 기능 추가

- select메뉴 포함하는 App 컴포넌트

- css 변경

 

 

converter.html

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="converter.css" />
  </head>
  <body>
    <div id="root"></div>
  </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 [flipped, setFlipped] = React.useState(false);
      const onChange = e => {
        setAmount(e.target.value);
      };
      const reset = () => {
        setAmount(0);
      };
      const onFlip = () => {
        setFlipped(current => !current);
        reset();
      };

      return (
        <div className="container">
          <div className="minute">
            <label htmlFor="minutes">Minutes</label>
            <input
              value={flipped ? amount * 60 : amount}
              id="minutes"
              type="number"
              placeholder="Minutes"
              onChange={onChange}
              disabled={flipped}
            />
          </div>

          <div className="hour">
            <label htmlFor="hours">Hours</label>
            <input
              value={flipped ? amount : amount / 60}
              id="hours"
              type="number"
              placeholder="Hours"
              onChange={onChange}
              disabled={!flipped}
            />
          </div>
          <div className="btns">
            <button onClick={reset}>Reset</button>
            <button onClick={onFlip}>{flipped ? "Turn back" : "Flip"}</button>
          </div>
        </div>
      );
    }

    function KmtoMiles() {
      const [amount, setAmount] = React.useState();
      const [flipped, setFlipped] = React.useState(false);
      const onChange = e => {
        setAmount(e.target.value);
      };
      const reset = () => {
        setAmount(0);
      };
      const onFlip = () => {
        setFlipped(current => !current);
        reset();
      };

      return (
        <div className="container">
          <div className="kilometer">
            <label htmlFor="km">KiloMeter</label>
            <input
              value={flipped ? amount * 1.609 : amount}
              id="km"
              type="number"
              placeholder="km"
              onChange={onChange}
              disabled={flipped}
            />
          </div>

          <div className="miles">
            <label htmlFor="mile">Miles</label>
            <input
              value={flipped ? amount : amount / 1.609}
              id="mile"
              type="number"
              placeholder="mile"
              onChange={onChange}
              disabled={!flipped}
            />
          </div>
          <div className="btns">
            <button onClick={reset}>Reset</button>
            <button onClick={onFlip}>{flipped ? "Turn back" : "Flip"}</button>
          </div>
        </div>
      );
    }

    function App() {
      const [index, setIndex] = React.useState("xx");
      const onSelect = e => {
        setIndex(e.target.value);
      };

      return (
        <div className="whole-container">
          <h1 className="title">Unit Converter</h1>
          <select value={index} onChange={onSelect}>
            <option value="xx">Select option</option>
            <option value="0">Minutes & Hours</option>
            <option value="1">Km & Miles</option>
          </select>
          <hr />
          {index === "xx" ? "Select Your Unit Plz" : null}
          {index === "0" ? <MinutesToHours /> : null}
          {index === "1" ? <KmtoMiles /> : null}
        </div>
      );
    }

    const root = document.getElementById("root");
    ReactDOM.render(<App />, root);
  </script>
</html>

 

 

style.css

* {
  margin: 0;
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fafafa;
}

button {
  all: unset;
  cursor: pointer;
  padding: 3px 5px;
  text-align: center;
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 3px;
  width: 85px;
  margin-right: 10px;
}

input {
  width: 100px;
}

select {
  all: unset;
  text-align: center;
  padding: 3px 5px;
  border-radius: 2px;
  background-color: rgb(40, 32, 255);
  color: #fff;
  font-weight: 600;
}

select option:first-child {
  background-color: #fff;
  color: #737373;
}

select option:focus {
  all: unset;
}

hr {
  border: 1px solid #ececec;
  margin: 40px 0;
}

input:focus,
input:active,
button:focus,
button:active {
  box-shadow: none;
  outline: none;
}

button:active {
  transform: scale(0.97);
}

h1.title {
  margin-bottom: 30px;
}

div.minute,
div.hour {
  margin-bottom: 20px;
  text-align: center;
}

div.kilometer,
div.miles {
  margin-bottom: 20px;
  text-align: center;
}

label {
  margin-right: 10px;
}

div.whole-container {
  margin: 20px;
  width: 600px;
  height: 400px;
  background-color: #fff;
  padding: 40px;
  border-radius: 10px;
  box-shadow: inset;
  text-align: center;
}

div.btns {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

h1 {
  margin-top: 20px;
}

 

 

기본 화면

 

 

실행 화면

 

Ref. 

 

 

ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders

React Fundamentals

nomadcoders.co

 

'WEB STUDY > REACT' 카테고리의 다른 글

React. React Js - Memo  (0) 2022.02.18
React. React Js - props  (0) 2022.02.16
React. React Js - State Functions (current의 이용)  (0) 2022.02.15
React. React Js - setState  (0) 2022.02.15
React. React Js - state (상태) / 예제  (0) 2022.02.15
'WEB STUDY/REACT' Related Articles more