JS Frontend • 2 min read 

%%html


<body>
    <h1>Calorie Calculator</h1>
    <form id="calorieForm">
        <label for="age">Age:</label>
        <input type="number" id="age" required><br><br>
        
        <label for="gender">Gender:</label>
        <select id="gender" required>
            <option value="male">Male</option>
            <option value="female">Female</option>
        </select><br><br>
        
        <label for="weight">Weight (kg):</label>
        <input type="number" id="weight" required><br><br>
        
        <label for="height">Height (cm):</label>
        <input type="number" id="height" required><br><br>
        
        <label for="activity">Activity Level:</label>
        <select id="activity" required>
            <option value="sedentary">Sedentary</option>
            <option value="lightly active">Lightly Active</option>
            <option value="moderately active">Moderately Active</option>
            <option value="very active">Very Active</option>
            <option value="extra active">Extra Active</option>
        </select><br><br>
        
        <input type="submit" value="Calculate">
    </form>

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

    <script>
        document.getElementById("calorieForm").addEventListener("submit", function(event) {
            event.preventDefault();

            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);
            const activity = document.getElementById("activity").value;

            // Send a POST request to the Python backend
            fetch("/calculate_calories", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                },
                body: JSON.stringify({ age, gender, weight, height, activity }),
            })
            .then(response => response.json())
            .then(data => {
                document.getElementById("result").innerHTML = `Your daily calorie requirement is approximately ${data.calories.toFixed(2)} calories.`;
            })
            .catch(error => {
                console.error("Error:", error);
            });
        });
    </script>
</body>
</html>

Calorie Calculator











</html>