Bmi Calculator Using Html Css And Javascript Github

6 min read Jun 22, 2024

BMI Calculator Using HTML, CSS, and JavaScript (GitHub)

This article will guide you through creating a basic Body Mass Index (BMI) calculator using HTML, CSS, and JavaScript. We'll cover the core elements of the project, from setting up the HTML structure to implementing JavaScript functionality. You can find the complete code on GitHub for reference and further exploration.

Project Setup

Create a new directory: Create a new folder for your project. You can name it "bmi-calculator" or something similar.
Create HTML, CSS, and JavaScript files: Inside the directory, create three files:
- index.html (for the HTML structure)
- style.css (for styling)
- script.js (for JavaScript functionality)

HTML Structure (`index.html`)




    
    
    BMI Calculator
    


    
        BMI Calculator
        
            Weight (kg):
            
        
        
            Height (cm):
            
        
        
        
            Your BMI:

Explanation:

The container div holds the entire calculator content.
Input fields are created for weight and height, with labels for clarity.
A button is used to trigger the calculation.
The result div displays the calculated BMI, value, and category.

CSS Styling (`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: 8px;
    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: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

button {
    background-color: #007bff;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

#result {
    margin-top: 20px;
}

#bmi-value {
    font-size: 24px;
    font-weight: bold;
}

Explanation:

The CSS defines the overall layout, styling for inputs, button, and result display. You can customize the look and feel according to your preferences.

JavaScript Functionality (`script.js`)

const weightInput = document.getElementById("weight");
const heightInput = document.getElementById("height");
const calculateBtn = document.getElementById("calculate-btn");
const bmiValue = document.getElementById("bmi-value");
const bmiCategory = document.getElementById("bmi-category");

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

    const bmi = weight / (height * height);

    bmiValue.textContent = bmi.toFixed(2);

    let category;
    if (bmi < 18.5) {
        category = "Underweight";
    } else if (bmi < 25) {
        category = "Normal weight";
    } else if (bmi < 30) {
        category = "Overweight";
    } else {
        category = "Obese";
    }
    bmiCategory.textContent = category;
});

Explanation:

The JavaScript code retrieves values from input fields, performs BMI calculation, and updates the result display.
It also categorizes the BMI into different weight groups.

Running the Calculator

Save the files: Save the index.html, style.css, and script.js files in your project folder.
Open index.html in a browser: Double-click the index.html file to open it in your preferred web browser.
Use the calculator: Enter your weight and height, then click the "Calculate BMI" button to get your results.

GitHub Repository

The complete code for this BMI calculator is available on GitHub: [Insert GitHub link here]

You can clone or download the repository to use as a starting point for your own BMI calculator project. Customize the design, add more features, and explore different ways to enhance the user experience.

Bmi Calculator Using Html Css And Javascript Github