Creating A Bmi Calculator: A Step-By-Step Guide Using Html, Css, And Javascript

Muhammad Rayyan 3 min Nov. 8, 2023 94 View(s)

Introduction:

The Body Mass Index (BMI) is a useful metric for determining an individual's weight in relation to their height and a valuable indicator of body fatness. Creating a BMI calculator from scratch with HTML, CSS, and JavaScript not only gives you a practical application for these skills but also aids in your understanding of key web development concepts. We'll walk you through the process of making a visually appealing and functional BMI calculator in this step-by-step tutorial.

Prerequisites:

Before we dive into the code, make sure you have a basic understanding of HTML, CSS, and JavaScript. You can use any text editor of your choice, such as Visual Studio Code or Sublime Text, to write your code. Let's get started!

Step 1: Setting Up the HTML Structure:

Begin by creating the basic structure of your BMI calculator using HTML. Create an index.html file and define the necessary elements, including input fields for age, height, and weight, a button to calculate BMI, and a container to display the result.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>BMI Calculator</title>
</head>

<body>
    <div class="container">
        <h1>BMI Calculator</h1>

        <div class="input-group">
            <label for="height">Height (cm):</label>
            <input type="number" id="height" placeholder="Enter height in cm" required>
        </div>

        <div class="input-group">
            <label for="weight">Weight (kg):</label>
            <input type="number" id="weight" placeholder="Enter weight in kg" required>
        </div>

        <button onclick="calculateBMI()">Calculate BMI</button>

        <div id="result"></div>
    </div>

    <script src="script.js"></script>
</body>

</html>

Step 2: Styling with CSS:

Create a styles.css file to style your BMI calculator. Customize the appearance of the input fields, button, and result container to enhance the user interface.

body {
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f9f9f9;
    font-family: 'Arial', sans-serif;
}

.container {
    text-align: center;
    max-width: 350px;
    width: 90%;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
}

h1 {
    margin-bottom: 20px;
    color: #ff5733;
    font-size: 24px;
}

.input-group {
    margin-bottom: 20px;
    text-align: left;
}

label {
    display: block;
    margin-bottom: 6px;
    color: #333;
    font-size: 14px;
}

input {
    width: calc(100% - 12px);
    padding: 8px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

button {
    background-color: #ff5733;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: #ff8c66;
}

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

Step 3: Implementing the JavaScript Logic:

Next, create a script.js file to implement the BMI calculation logic and update the result container accordingly.

function calculateBMI() {
    const height = parseFloat(document.getElementById("height").value);
    const weight = parseFloat(document.getElementById("weight").value);

    if (isNaN(height) || isNaN(weight) || height <= 0 || weight <= 0) {
        document.getElementById("result").innerHTML = "Please enter valid height and weight.";
    } else {
        const bmi = weight / ((height / 100) ** 2);
        const bmiResult = `Your BMI is ${bmi.toFixed(2)}.`;

        let category = "";
        if (bmi < 18.5) {
            category = "Underweight";
        } else if (bmi >= 18.5 && bmi < 24.9) {
            category = "Normal weight";
        } else if (bmi >= 25 && bmi < 29.9) {
            category = "Overweight";
        } else {
            category = "Obese";
        }

        document.getElementById("result").innerHTML = `${bmiResult}<br/>Category: ${category}`;
    }
}

Conclusion:

Congratulations! You have successfully created a BMI calculator using HTML, CSS, and JavaScript. This project not only reinforces your understanding of web development fundamentals but also equips you with a practical tool that can be utilized to calculate BMI and assess health risks. Feel free to customize the styles and add more features to enhance the calculator further. Happy coding!

Next Post Previous Post