<form id="bmr-calculator-form">
    <label for="unit-system">Unit system:</label>
    <select id="unit-system">
        <option value="metric">Metric</option>
        <option value="english">English</option>
    </select><br><br>

    <label for="age">Age:</label>
    <input type="number" id="age" required><br><br>

    <label for="gender">Gender:</label>
    <select id="gender">
        <option value="male">Male</option>
        <option value="female">Female</option>
    </select><br><br>

    <label for="weight">Weight:</label>
    <input type="number" id="weight" required><span id="weight-unit"> kg</span><br><br>

    <label for="height">Height:</label>
    <input type="number" id="height" required><span id="height-unit"> cm</span><br><br>

    <button type="button" onclick="calculateBMR()">Calculate BMR</button>
</form>
<div id="bmr-result"></div>

<script>
    function calculateBMR() {
        const unitSystem = document.getElementById("unit-system").value;
        const age = parseFloat(document.getElementById("age").value);
        const gender = document.getElementById("gender").value;
        let weight = parseFloat(document.getElementById("weight").value);
        let height = parseFloat(document.getElementById("height").value);

        if (unitSystem === "english") {
            weight = weight * 0.453592; // Convert pounds to kilograms
            height = height * 2.54; // Convert inches to centimeters
        }

        let bmr;

        if (gender === "male") {
            bmr = 88.362 + (13.397 * weight) + (4.799 * height) - (5.677 * age);
        } else {
            bmr = 447.593 + (9.247 * weight) + (3.098 * height) - (4.330 * age);
        }

        document.getElementById("bmr-result").innerHTML = "Your BMR is: " + bmr.toFixed(2) + " calories/day";
    }

    document.getElementById("unit-system").addEventListener("change", function() {
        const unitSystem = this.value;
        const weightUnit = document.getElementById("weight-unit");
        const heightUnit = document.getElementById("height-unit");

        if (unitSystem === "metric") {
            weightUnit.innerHTML = " kg";
            heightUnit.innerHTML = " cm";
        } else {
            weightUnit.innerHTML = " lbs";
            heightUnit.innerHTML = " in";
        }
    });
</script>