Building a BMI Calculator with HTML, CSS, and JavaScript
Hello, fellow developers! Today, I’m excited to share a project that I recently worked on: a BMI (Body Mass Index) Calculator. This simple web application helps users calculate their BMI based on their height and weight, offering a straightforward way to assess their health status. Let's dive into the details of the project and how it was built!
Project Overview
The BMI Calculator is a user-friendly tool that allows users to input their height (in centimeters) and weight (in kilograms). With just a click of a button, the application computes the BMI and displays the corresponding health category, such as Underweight, Normal weight, Overweight, or Obesity.
Features
- User Input: Users can enter their height and weight directly into the input fields.
- BMI Calculation: The application calculates the BMI using the standard formula.
- Health Category: Based on the calculated BMI, the app provides a relevant health category.
- Responsive Design: The calculator is designed to be responsive, ensuring a smooth experience across different devices.
Technologies Used
- HTML: Structures the content of the webpage.
- CSS: Styles the application, providing a clean and modern look.
- JavaScript: Handles the BMI calculation and updates the DOM to display results.
Project Structure
Here’s a quick overview of the project structure:
BMI-Calculator/ ├── index.html ├── style.css └── script.js
Code Explanation
Let’s take a closer look at the code that powers the BMI Calculator.
HTML
The HTML provides the basic structure of the calculator, including input fields for height and weight, a button to trigger the calculation, and a section to display the result.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BMI Calculator</title>
<link rel="stylesheet" href="./style.css">
<script src="./script.js" defer></script>
</head>
<body>
<div class="header">
<h1>BMI Calculator</h1>
</div>
<div class="container">
<h1 class="heading">Body Mass Index (BMI)</h1>
Your Height (cm):
<input type="number" class="input" id="height" value="180" placeholder="Enter your height in cm">
Your Weight (kg):
<input type="number" class="input" id="weight" value="80" placeholder="Enter your weight in kg">
<button class="btn" id="btn">Compute BMI</button>
<input disabled type="text" class="input" id="bmi-result">
<h4 class="info-text">Weight Condition: <span id="weight-condition"></span></h4>
</div>
<div class="footer">
<p>Made with ❤️ by Abhishek Gurjar</p>
</div>
</body>
</html>
CSS
The CSS styles the page to make it visually appealing and easy to use. It features a modern, clean design with responsive elements.
body {
margin: 0;
background: linear-gradient(to left bottom, lightgreen, lightblue);
display: flex;
flex-direction: column;
min-height: 100vh;
justify-content: center;
align-items: center;
font-family: 'Courier New', Courier, monospace;
}
.container {
background: rgba(255, 255, 255, 0.3);
padding: 20px;
display: flex;
flex-direction: column;
border-radius: 5px;
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.3);
margin: 5px;
}
.heading {
font-size: 30px;
}
.input {
padding: 10px 20px;
font-size: 18px;
background: rgba(255, 255, 255, 0.4);
border-color: rgba(255, 255, 255, 0.5);
margin: 10px;
}
.btn {
background-color: lightgreen;
border: none;
padding: 10px 20px;
border-radius: 5px;
margin: 10px;
font-size: 20px;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
cursor: pointer;
}
.btn:hover {
box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
transition: all 300ms ease;
}
.info-text {
font-size: 20px;
font-weight: 500;
}
.header {
margin: 30px;
text-align: center;
}
.footer {
margin: 20px;
text-align: center;
}
JavaScript
The JavaScript handles the core functionality of the application—calculating the BMI based on the user’s input and updating the webpage with the results.
const btnE1 = document.getElementById("btn");
const resultE1 = document.getElementById("bmi-result");
const weightConditionE1 = document.getElementById("weight-condition");
const heightE1 = document.getElementById("height");
const weightE1 = document.getElementById("weight");
function calculateBMI() {
const height = heightE1.value / 100;
const weight = weightE1.value;
const bmiValue = weight / (height * height);
resultE1.value = bmiValue.toFixed(2);
if (bmiValue < 18.5) {
weightConditionE1.innerText = "Under Weight";
} else if (bmiValue >= 18.5 && bmiValue <= 24.9) {
weightConditionE1.innerText = "Normal Weight";
} else if (bmiValue >= 25 && bmiValue <= 29.9) {
weightConditionE1.innerText = "Over Weight";
} else if (bmiValue > 30) {
weightConditionE1.innerText = "Obesity";
}
}
btnE1.addEventListener("click", calculateBMI);
Live Demo
You can try out the BMI Calculator live here.
Conclusion
Building this BMI Calculator was a rewarding experience that enhanced my skills in HTML, CSS, and JavaScript. The project showcases how a simple idea can be turned into a practical tool that users can benefit from. Whether you're looking to build a similar project or just exploring web development, I hope this tutorial helps you on your journey. Happy coding!
Author
-
Abhishek Gurjar
- GitHub Profile
The above is the detailed content of Building a BMI Calculator with HTML, CSS, and JavaScript. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1382
52
Working With GraphQL Caching
Mar 19, 2025 am 09:36 AM
If you’ve recently started working with GraphQL, or reviewed its pros and cons, you’ve no doubt heard things like “GraphQL doesn’t support caching” or
Building an Ethereum app using Redwood.js and Fauna
Mar 28, 2025 am 09:18 AM
With the recent climb of Bitcoin’s price over 20k $USD, and to it recently breaking 30k, I thought it’s worth taking a deep dive back into creating Ethereum
Vue 3
Apr 02, 2025 pm 06:32 PM
It's out! Congrats to the Vue team for getting it done, I know it was a massive effort and a long time coming. All new docs, as well.
Creating Your Own Bragdoc With Eleventy
Mar 18, 2025 am 11:23 AM
No matter what stage you’re at as a developer, the tasks we complete—whether big or small—make a huge impact in our personal and professional growth.
Can you get valid CSS property values from the browser?
Apr 02, 2025 pm 06:17 PM
I had someone write in with this very legit question. Lea just blogged about how you can get valid CSS properties themselves from the browser. That's like this.
A bit on ci/cd
Apr 02, 2025 pm 06:21 PM
I'd say "website" fits better than "mobile app" but I like this framing from Max Lynch:
Stacked Cards with Sticky Positioning and a Dash of Sass
Apr 03, 2025 am 10:30 AM
The other day, I spotted this particularly lovely bit from Corey Ginnivan’s website where a collection of cards stack on top of one another as you scroll.
Comparing Browsers for Responsive Design
Apr 02, 2025 pm 06:25 PM
There are a number of these desktop apps where the goal is showing your site at different dimensions all at the same time. So you can, for example, be writing
