whatisthis?

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

PRACTICE/SELF

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

thisisyjin 2022. 2. 16. 11:21

Unit Converter (수정)

 

React) React JS - practice. 단위변환기 (Unit Conversion)

React JS 기초 예제 실습 - 단위 변환기  (Unit Conversion) 분(M) - 시간(H) M = H * 60 H = M / 60 function App() { return ( Unit Converter Minutes Hours ); } ❗❗ 주의 우리는 jsx를 사용중인 것이지 H..

mywebproject.tistory.com

index.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">
    const root = document.getElementById("root");
    function App() {
      let minToHour = true;
      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">
          <h1 className="title">Unit Converter</h1>

          <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>
      );
    }
    ReactDOM.render(<App />, root);
  </script>
</html>

 

style.css

@import "./reset.css";

* {
  margin: 0;
  box-sizing: border-box;
  font-family: "Noto Sans KR", sans-serif;
}

html {
  font-size: 16px;
  line-height: 1.5;
  color: #1f2d3d;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  margin: 0 auto;
  background-color: #e5e5e5;
}

.login {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-items: center;
  width: 800px;
  height: 600px;
  border-radius: 10px;
  text-align: center;
  background-color: #fff;
  box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
}

.login img {
  width: 500px;
  height: 100px;
  margin: 0 auto;
}

.login-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 100px;
  width: 800px;
}

.login-container input {
  all: unset;
  background-color: #ffffff;
  width: 300px;
  height: 30px;
  margin-right: 30px;
  padding: 5px 0;
  border: 2px solid rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  font-weight: 600;
}

.login-container img {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 55%;
  margin: auto 2px;
  height: 20px;
  width: 20px;
  cursor: pointer;
  opacity: 0.5;
}

.login-container button {
  all: unset;
  cursor: pointer;
  background-color: #f1f1f1;
  font-weight: 600;
  width: 100px;
  height: 30px;
  padding: 5px 0;
  border: 2px solid rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.7);
  border-radius: 5px;
  box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
}

.login-container button:active {
  transform: scale(0.97);
  font-weight: 600;
}

기본 화면

 

실행 화면

 

'PRACTICE > SELF' 카테고리의 다른 글

React JS - Coin Tracker (project)  (0) 2022.02.19
React JS - To Do List App(practice)  (0) 2022.02.19
React) React JS - practice. 단위변환기 (Unit Conversion)  (0) 2022.02.15
CSS - Position prac.03  (0) 2022.02.12
CSS - Position prac.02  (0) 2022.02.11
'PRACTICE/SELF' Related Articles more