DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for How to Build A BMI Calculator in React JS - useState Hook & Conditionals | Beginner
ziontutorial
ziontutorial

Posted on

How to Build A BMI Calculator in React JS - useState Hook & Conditionals | Beginner

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
How to Build A BMI Calculator in React JS - useState Hook & Conditionals
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;
}

Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)

🌚 Browsing with dark mode makes you a better developer.

It's a scientific fact.