Build A BMI Calculator in React JS – use State Hook & Conditionals.

To make this beautiful react js bmi calculator which is totally beginner friendly.

Download Source Code

💥Check it out Link

To create this Beautiful BMI calculator using ract js . First, you need to create and changes in these three files which are App.js , index.js, and one index.js File. After creating these files just paste the following codes into your file. You can also download the source code files of this BMI calculator from this download Link.

Lets start with CSS of this application this make our application looks beautiful just follow the below code to make this form stylish

Index.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 ( Magical part | logic of this application )

For App.js part just go to this site Link and just make this form or bmi calculator working by just writing its magical part