Bmi Calculator Javascript W3schools

MUAZHAN

6 min read

·

Jun 24, 2024

35

Share

BMI Calculator with JavaScript: A Beginner's Guide

This article will guide you through creating a simple BMI calculator using HTML, CSS, and JavaScript, following the principles outlined in the W3Schools tutorials.

1. HTML Structure:

First, you'll need to set up the basic structure of your HTML document. Here's an example:

    
    
    
    


    

        
BMI Calculator
        

            Weight (kg):
            
        
        

            Height (cm):
            
        
        Calculate BMI
        

    
    

In this code:

• We create a container div to hold the calculator elements.
• An h1 tag displays the title.
• Two input fields, weight and height, are created for user input, with appropriate labels.
• A button with the ID calculate will trigger the calculation.
• A div with the ID result will display the calculated BMI.

2. CSS Styling (style.css):

You can style your BMI calculator with CSS. Here's a basic example:

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

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

.input-group {
    margin-bottom: 15px;
}

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

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

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

button:hover {
    background-color: #45a049;
}

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

This CSS code styles the layout, colors, and fonts of your BMI calculator. You can customize it according to your preferences.

3. JavaScript Logic (script.js):

Finally, the JavaScript code is where the BMI calculation happens:

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

calculateButton.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)}`;
});

In this JavaScript code:

• We get references to the HTML elements using their IDs.
• An event listener is attached to the calculateButton, triggering the calculation logic when clicked.
• We get the user input values for weight and height, converting the height from centimeters to meters.
• We validate the input, ensuring that both values are valid numbers and greater than zero.
• The BMI is calculated using the formula weight / (height * height).
• Finally, the calculated BMI is displayed in the resultDiv.

Running the Calculator:

Save the HTML, CSS, and JavaScript files in the same directory. Open the HTML file in your web browser to see the working BMI calculator. You can experiment with different values for weight and height to see the results.

This example demonstrates a basic BMI calculator using JavaScript, building upon the concepts taught on W3Schools. You can further enhance this calculator by adding features like BMI category interpretation, styling improvements, and error handling.