Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/abhishekgurjar-in/bmi_calculator
The BMI Calculator is a responsive web application built with React. It takes the user's weight (in kilograms) and height (in centimeters) as inputs and calculates the BMI. The app then displays the calculated BMI along with a corresponding weight .
https://github.com/abhishekgurjar-in/bmi_calculator
bmi-calculator css javascript jsx react web-development
Last synced: 3 months ago
JSON representation
The BMI Calculator is a responsive web application built with React. It takes the user's weight (in kilograms) and height (in centimeters) as inputs and calculates the BMI. The app then displays the calculated BMI along with a corresponding weight .
- Host: GitHub
- URL: https://github.com/abhishekgurjar-in/bmi_calculator
- Owner: abhishekgurjar-in
- Created: 2024-09-03T14:24:01.000Z (4 months ago)
- Default Branch: master
- Last Pushed: 2024-09-13T05:38:19.000Z (4 months ago)
- Last Synced: 2024-09-25T03:03:53.518Z (4 months ago)
- Topics: bmi-calculator, css, javascript, jsx, react, web-development
- Language: JavaScript
- Homepage: https://bmi-calculator-in.netlify.app/
- Size: 93.8 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## BMI Calculator Website
### Introduction
Body Mass Index (BMI) is a widely used metric to determine if a person has a healthy body weight for a given height. In this blog, we'll walk through the creation of a simple yet functional BMI Calculator using React. This project allows users to input their weight and height to calculate their BMI and provides a classification based on the result.
### Project Overview
The BMI Calculator is a responsive web application built with React. It takes the user's weight (in kilograms) and height (in centimeters) as inputs and calculates the BMI. The app then displays the calculated BMI along with a corresponding weight classification such as Underweight, Normal weight, Overweight, or Obesity.
### Features
- **User-Friendly Interface:** A simple and clean UI that is easy to navigate.
- **Real-Time Calculation:** Users can calculate their BMI instantly by entering their weight and height.
- **Responsive Design:** The calculator is responsive and works well on different screen sizes.
- **Weight Classification:** Based on the calculated BMI, users are informed about their weight status.
### Technologies Used
- **React:** The core library for building the user interface.
- **JavaScript:** For handling the logic of BMI calculation.
- **CSS:** To style the application and ensure a responsive design.
### Project Structure
Here's a brief overview of the project's structure:
```
src/
│
├── assets/
│ └── images/
│ └── BMI Logo.png
├── components/
│ └── BmiCalculator.jsx
├── App.jsx
├── App.css
└── index.css
```
### Live Demo
Check out the live demo of the BMI Calculator [here](https://bmi-calculator-in.netlify.app/).
### Screenshots
### Conclusion
In this project, we built a simple yet effective BMI Calculator using React. This project demonstrates the use of React state management, conditional rendering, and basic styling to create a user-friendly interface. Whether you're just starting with React or looking to practice your skills, this project is a great way to get hands-on experience.
### Credits
- **Logo:** The BMI logo used in this project is sourced from [Unsplash](#).
- **Inspiration:** This project was inspired by various BMI calculators available online.
### Author
**Abhishek Gurjar** is a passionate web developer with a focus on building intuitive and responsive web applications. Follow his journey and explore more projects on [GitHub](https://github.com/abhishekgurjar-in).