BMI Calculator Using HTML CSS & JavaScript in 3 steps ,Wow !

Introduction:
An online tool called the Body Mass Index (BMI) calculator is used to assist users determine their BMI using their height and weight. Based on a person’s weight in relation to their height, the BMI calculates their body fat percentage. With the use of this calculator, users can quickly examine their body composition and decide if they fall into the categories of underweight, normal weight, overweight, or obese based on their BMI.

Join our Telegram
For Free Coding eBooks & Handwritten Notes College Projects !

Screenshots

Here’s a step-by-step guide to create the BMI Calculator and Diet Plan project:

Step 1: Set Up Your Project Directory

Create a new directory (folder) on your computer where you’ll organize your project files.

Step 2: Create HTML Files

Inside your project directory, create the following HTML files using a code editor or plain text editor:
- index.html (for the BMI Calculator page)
- diet_plan.html (for the Diet Plan page)

Step 3: Write HTML Code for BMI Calculator Page

Open index.html in your code editor and write the HTML code for the BMI Calculator page. You can use the HTML code provided in previous responses as a template.

Step 4: Write HTML Code for Diet Plan Page

Open diet_plan.html in your code editor and write the HTML code for the Diet Plan page. You can use the HTML code provided in previous responses as a template.

Step 5: Create CSS Files

Create the following CSS files inside your project directory:
- bmi_calculator.css (for styling the BMI Calculator page)
- diet_plan.css (for styling the Diet Plan page)

Step 6: Write CSS Code

Open bmi_calculator.css and diet_plan.css in your code editor. Write the CSS code to style your BMI Calculator and Diet Plan pages according to your design preferences.

Step 7: Create JavaScript Files

Create the following JavaScript files inside your project directory:
- bmi_calculator.js (for handling BMI calculation and navigation from BMI Calculator to Diet Plan)
- diet_plan.js (for handling diet plan generation and navigation from Diet Plan back to BMI Calculator)

Step 8: Write JavaScript Code for BMI Calculator Page

Open bmi_calculator.js in your code editor and write the JavaScript code for handling the BMI calculation and navigation to the Diet Plan page. You can use the JavaScript code provided in previous responses as a template.

Step 9: Write JavaScript Code for Diet Plan Page

Open diet_plan.js in your code editor and write the JavaScript code for displaying the user’s name and generating the diet plan based on BMI. You can use the JavaScript code provided in previous responses as a template.

Step 10: Connect CSS and JavaScript Files

In your HTML files (index.html and diet_plan.html), make sure to link the appropriate CSS and JavaScript files using the <link> and <script> tags as shown in the previous responses.

Step 11: Test Your Project

Open index.html in your web browser. You should see the BMI Calculator page. Fill in the details, calculate your BMI, and click the “View Diet Plan” link to navigate to the Diet Plan page.

Step 12: Troubleshoot Any Issues

If you encounter any issues (e.g., pages disappearing, incorrect calculations), refer to the previous responses for troubleshooting tips.

Step 13: Customize Your Project

Customize the project by modifying the HTML, CSS, and JavaScript code to match your design and functionality preferences. You can further enhance the project by adding additional features or styling.

How to Setup Complete Video :-

Source Code

HTML Files:
- index.html (for the BMI Calculator page)
- diet_plan.html (for the Diet Plan page)
CSS Files:
- bmi_calculator.css (for styling the BMI Calculator page)
- diet_plan.css (for styling the Diet Plan page)
JavaScript Files:
- bmi_calculator.js (for handling BMI calculation and navigation from BMI Calculator to Diet Plan)
- diet_plan.js (for handling diet plan generation and navigation from Diet Plan back to BMI Calculator)

`index.html`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BMI Calculator</title>
    <link rel="stylesheet" href="bmi_calculator.css">
</head>
<body>
    <div class="container">
        <h1>BMI Calculator</h1>
        <form id="bmiForm">
            <div class="input-group">
                <label for="name">Name:</label>
                <input type="text" id="name" required>
            </div>
            <div class="input-group">
                <label for="age">Age:</label>
                <input type="number" id="age" required>
            </div>
            <div class="input-group">
                <label for="gender">Gender:</label>
                <select id="gender" required>
                    <option value="male">Male</option>
                    <option value="female">Female</option>
                </select>
            </div>
            <div class="input-group">
                <label for="weight">Weight (kg):</label>
                <input type="number" id="weight" required>
            </div>
            <div class="input-group">
                <label for="height">Height (cm):</label>
                <input type="number" id="height" required>
            </div>
            <div class="input-group">
                <button type="submit">Calculate BMI</button>
            </div>
        </form>
        <a href="diet_plan.html">View Diet Plan</a>
        <div id="result"></div>
    </div>
    <script src="bmi_calculator.js"></script>
</body>
</html>

`diet_plan.html`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Diet Plan</title>
    <link rel="stylesheet" href="diet_plan.css">
</head>
<body>
    <div class="container">
        <h1>Diet Plan</h1>
        <div id="userGreeting">
            <!-- User's name will be displayed here -->
        </div>
        <div id="dietPlan">
            <!-- Diet plan content will be displayed here -->
        </div>
    </div>
    <script src="diet_plan.js"></script>
</body>
</html>

`bmi_calculator.css`

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

.container {
    background-color: #fff;
    padding: 50px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}

h1 {
    text-align: center;
}

.input-group {
    margin: 10px 0;
}

label {
    font-weight: bold;
}

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

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

#result {
    margin-top: 20px;
    text-align: center;
    font-weight: bold;
}

a {
    display: block;
    text-align: center;
    margin-top: 20px;
    color: #007bff;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

`diet_plan.css`

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

.container {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
    text-align: center;
}

h1 {
    text-align: center;
    margin-bottom: 20px;
}

#userGreeting {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 20px;
}

#dietPlan {
    font-size: 16px;
}

a {
    display: block;
    text-align: center;
    margin-top: 20px;
    color: #007bff;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

`bmi_calculator.js`

document.getElementById("bmiForm").addEventListener("submit", function (e) {
    e.preventDefault();

    const name = document.getElementById("name").value;
    const age = parseFloat(document.getElementById("age").value);
    const gender = document.getElementById("gender").value;
    const weight = parseFloat(document.getElementById("weight").value);
    const height = parseFloat(document.getElementById("height").value);

    if (!name || !age || !weight || !height) {
        alert("Please fill in all fields.");
        return;
    }

    const heightMeters = height / 100;
    const bmi = weight / (heightMeters * heightMeters);
    const resultElement = document.getElementById("result");

    let message = `Hello, ${name}!<br>`;
    message += `Your BMI is: ${bmi.toFixed(2)}<br>`;

    let dietRecommendation = "";

    if (bmi < 18.5) {
        dietRecommendation = "You are underweight. Consider a balanced diet with adequate calories.";
    } else if (bmi >= 18.5 && bmi < 24.9) {
        dietRecommendation = "You have a healthy weight. Keep up the good work!";
    } else if (bmi >= 25 && bmi < 29.9) {
        dietRecommendation = "You are overweight. Consider a calorie-controlled diet and exercise.";
    } else {
        dietRecommendation = "You are obese. Please consult a healthcare professional for guidance.";
    }

    message += `<br>${dietRecommendation}`;
    resultElement.innerHTML = message;

    // Store BMI value in localStorage
    localStorage.setItem("name", name);
    localStorage.setItem("bmi", bmi);
});

`diet_plan.js`

document.addEventListener("DOMContentLoaded", function () {
    // Fetch user's name and BMI value from localStorage
    const name = localStorage.getItem("name");
    const bmi = localStorage.getItem("bmi");

    if (!name || !bmi) {
        // If name or BMI is not available, redirect back to the BMI calculator
        window.location.href = "index.html";
    }

    // Display the user's name and diet plan based on BMI
    const userGreetingElement = document.getElementById("userGreeting");
    const dietPlanElement = document.getElementById("dietPlan");

    userGreetingElement.textContent = `Hello, ${name}!`;

    let dietPlan = "";

    if (bmi < 18.5) {
        dietPlan = "Your BMI indicates that you are underweight. Here's a diet plan for you:\n\n";
        dietPlan += "1. Consume balanced meals with carbohydrates, proteins, and healthy fats.\n";
        dietPlan += "2. Include more protein-rich foods like lean meats, fish, eggs, and dairy.\n";
        dietPlan += "3. Incorporate fruits, vegetables, and whole grains in your diet.\n";
        dietPlan += "4. Snack on nuts, seeds, and yogurt for extra calories and nutrients.\n";
        dietPlan += "5. Consult a dietitian for a personalized meal plan.";
    } else if (bmi >= 18.5 && bmi < 24.9) {
        dietPlan = "Your BMI indicates that you have a healthy weight. Maintain your current diet and exercise routine to stay healthy.";
    } else if (bmi >= 25 && bmi < 29.9) {
        dietPlan = "Your BMI indicates that you are overweight. Here's a diet plan for you:\n\n";
        dietPlan += "1. Reduce calorie intake by limiting sugary and high-fat foods.\n";
        dietPlan += "2. Increase fiber intake with fruits, vegetables, and whole grains.\n";
        dietPlan += "3. Incorporate regular exercise into your routine.\n";
        dietPlan += "4. Consult a dietitian for a personalized meal plan.";
    } else {
        dietPlan = "Your BMI indicates that you are obese. It's important to consult a healthcare professional or dietitian for a personalized diet and weight management plan.";
    }

    dietPlanElement.textContent = dietPlan;
});