Bmi Calculator Html Css Javascript

MUAZHAN

6 min read

·

Jun 22, 2024

34

Share

BMI Calculator with HTML, CSS, and JavaScript

This article will guide you through building a simple BMI (Body Mass Index) calculator using HTML, CSS, and JavaScript. BMI is a measure of body fat based on height and weight, providing a general indicator of whether someone is underweight, overweight, or within a healthy weight range.

1. HTML Structure

Let's start by setting up the basic HTML structure:

  
  


  
BMI Calculator
  

    Weight (kg):
    
    Height (cm):
    
    Calculate BMI
    

  
  

This code creates:

• A heading: "BMI Calculator"
• A container div: For organizing input fields and the result.
• Labels and input fields: For weight and height.
• A button: To trigger the BMI calculation.
• A result div: To display the calculated BMI.
• Links to CSS and JavaScript files: To add styling and functionality.

2. CSS Styling

Now, let's add some basic styling in a file named "style.css":

body {
  font-family: sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f4f4f4;
}

.container {
  background-color: #fff;
  padding: 30px;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

label {
  display: block;
  margin-bottom: 5px;
}

input[type="number"] {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #ddd;
  border-radius: 3px;
}

button {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

#result {
  margin-top: 20px;
  font-size: 18px;
  font-weight: bold;
}

This CSS styles the elements to make the calculator visually appealing. You can customize the colors, fonts, and layout to your liking.

3. JavaScript Functionality

Finally, let's add the JavaScript code to perform the BMI calculation in "script.js":

const calculateBtn = document.getElementById('calculate');
const weightInput = document.getElementById('weight');
const heightInput = document.getElementById('height');
const resultDiv = document.getElementById('result');

calculateBtn.addEventListener('click', () => {
  const weight = parseFloat(weightInput.value);
  const height = parseFloat(heightInput.value) / 100; // Convert cm to meters

  if (isNaN(weight) || isNaN(height) || weight <= 0 || height <= 0) {
    resultDiv.textContent = 'Please enter valid weight and height.';
    return;
  }

  const bmi = weight / (height * height);
  resultDiv.textContent = `Your BMI is: ${bmi.toFixed(2)}`;
});

This JavaScript code does the following:

1. Selects elements: Gets references to the button, input fields, and result div.
2. Adds an event listener: Listens for a click on the "Calculate BMI" button.
3. Gets values: Retrieves the weight and height from the input fields, converting height to meters.
4. Validates input: Checks if weight and height are valid numbers greater than zero.
5. Calculates BMI: Computes the BMI using the formula weight / (height * height).
6. Displays result: Shows the calculated BMI in the result div.

Running the Calculator

Now you have a complete BMI calculator! Save the HTML, CSS, and JavaScript files in the same directory, and open the HTML file in your web browser. You can now input your weight and height to calculate your BMI.

Feel free to further customize the design and functionality of the calculator to your liking. This simple example provides a foundation for building more advanced health-related tools with web technologies.