React JS에서 BMI 계산기 만들기 – State Hook & Conditionals 사용.

완전히 초보자에게 친숙한 이 아름다운 반응 js bmi 계산기를 만들려면.

소스 코드 다운로드

💥확인해보세요Link

ract js를 사용하여 이 아름다운 BMI 계산기를 만들려면 . 먼저 App.js , index.js 및 하나의 index.js 파일인 이 세 파일을 만들고 변경해야 합니다. 이 파일을 만든 후 다음 코드를 파일에 붙여넣기만 하면 됩니다. 이 다운로드Link에서 이 BMI 계산기의 소스 코드 파일을 다운로드할 수도 있습니다.

이 응용 프로그램의 CSS부터 시작하겠습니다. 이 응용 프로그램을 아름답게 보이게 하려면 아래 코드를 따라 이 양식을 세련되게 만드십시오.

인덱스.css

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.app {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
}
.container {
  box-shadow: 0px 0px 12px #ccc;
  border-radius: 8px;
  padding: 3rem;
}
input {
  width: 100%;
  font-size: 1.2rem;
  padding: 15px 4px;
  margin: 8px 0;
  border-radius: 8px;
}
.btn {
  display: block;
  width: 100%;
  font-size: 1.2rem;
  margin: 8px 0;
  padding: 15px 0;
  background-color: #0077EE;
  color: #fff;
  border: 1px solid #333;
  border-radius: 8px;
  cursor: pointer;
}
/* unvisited link */
.btn-outline {
  background-color: #fff;
  color: #A6BCDA;
}
.center {
  text-align: center;
  margin: 24px 0;
}
p {
  margin: 10px 0;
}
.img-container {
  text-align: center;
}
.img-container img {
  height: 200px;
}

App.js (이 애플리케이션의 마법 같은 부분 | 로직)

App.js 부분의 경우 이 사이트Link로 이동하여 마법 같은 부분을 작성하여 이 양식 또는 bmi 계산기를 작동시키십시오.