JustPaste
HomeCategoriesAboutDonateContactTerms of UsePrivacy Policy
JustPaste

Free online notepad — write and share instantly

Navigate

  • Home
  • Timeline
  • Categories

Info

  • About
  • Donate
  • Contact

Legal

  • Terms of Use
  • Privacy Policy

© 2026 JustPaste.app. All rights reserved.

Made with ♥ by JustPaste

Untitled Page | JustPaste.app
about 1 month ago0 views
💻Technology

Untitled Page

!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BMI Fitness Tracker</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>

<body>

    <header class="hero">
    <div class="hero-content">
        <p class="hero-label">STUDENT HEALTH MONITORING SYSTEM</p>

        <h1>BMI <span>TRACKER</span></h1>

        <p class="hero-description">
            Monitor your BMI, track your fitness progress,
            and build healthier habits.
        </p>

        <button class="hero-button" onclick="document.getElementById('calculator').scrollIntoView({ behavior: 'smooth' })">
            GET STARTED
        </button>
    </div>

    <div class="hero-glow"></div>
    <div class="hero-grid"></div>
</header>

    <main>

        <section>
            <h2>Welcome</h2>
            <p>
                This website helps students monitor their BMI,
                receive health recommendations, and track their fitness progress.
            </p>
        </section>

<section id="calculator" class="calculator-section">

    <div class="section-heading">
        <span class="section-number">01</span>

        <div>
            <p class="section-label">HEALTH ANALYSIS</p>
            <h2>BMI CALCULATOR</h2>
        </div>
    </div>

    <p class="section-description">
        Enter your information below to calculate your BMI and receive
        a personalized health status.
    </p>

    <div class="calculator-grid">

        <div class="input-group">
            <label for="height">HEIGHT</label>

            <div class="input-wrapper">
                <input
                    type="number"
                    id="height"
                    placeholder="Enter height"
                >
                <span>CM</span>
            </div>
        </div>

        <div class="input-group">
            <label for="weight">WEIGHT</label>

            <div class="input-wrapper">
                <input
                    type="number"
                    id="weight"
                    placeholder="Enter weight"
                >
                <span>KG</span>
            </div>
        </div>

        <div class="input-group">
            <label for="age">AGE</label>

            <div class="input-wrapper">
                <input
                    type="number"
                    id="age"
                    placeholder="Enter age"
                >
                <span>YRS</span>
            </div>
        </div>

        <div class="input-group">
            <label for="sex">SEX</label>

            <select id="sex">
                <option value="">Select sex</option>
                <option value="male">Male</option>
                <option value="female">Female</option>
            </select>
        </div>

    </div>

    <button
        class="primary-action"
        onclick="calculateBMI()"
    >
        CALCULATE BMI
    </button>

    <div class="bmi-status-panel">

    <div class="status-header">
        <span class="status-dot"></span>
        BMI ANALYSIS COMPLETE
    </div>

    <div class="status-main">
        <p class="status-label">YOUR CURRENT BMI</p>
        <p id="bmiResult" class="bmi-value"></p>
    </div>

    <div class="status-recommendation">
        <p class="status-label">HEALTH RECOMMENDATION</p>
        <p id="recommendation"></p>
        <p id="overallRecommendation"></p>
    </div>

</div>

</section>

<section id="guide" class="guide-section">

    <div class="section-heading">
        <span class="section-number">02</span>

        <div>
            <p class="section-label">PERSONALIZED SUPPORT</p>
            <h2>HEALTH GUIDE</h2>
        </div>
    </div>

    <p class="section-description">
        Explore simple health guidance based on your fitness information,
        goals, and personal needs.
    </p>

    <div class="guide-grid">

        <div class="guide-card">
            <div class="guide-icon">01</div>
            <h3>FOOD</h3>
            <p id="foodGuide">
                Complete the health questionnaire to receive personalized food guidance.
            </p>
        </div>

        <div class="guide-card">
            <div class="guide-icon">02</div>
            <h3>EXERCISE</h3>
            <p id="exerciseGuide">
                Complete the health questionnaire to receive personalized exercise guidance.
            </p>
        </div>

        <div class="guide-card">
            <div class="guide-icon">03</div>
            <h3>ROUTINE</h3>
            <p id="routineGuide">
                Complete the health questionnaire to receive personalized routine guidance.
            </p>
        </div>

        <div class="guide-card">
            <div class="guide-icon">04</div>
            <h3>ALLERGIES</h3>
            <p id="allergyGuide">
                Your allergy information will be considered when providing recommendations.
            </p>
        </div>

    </div>

</section>

<section id="goals" class="goals-section">

    <div class="section-heading">
        <span class="section-number">03</span>

        <div>
            <p class="section-label">PERSONAL DEVELOPMENT</p>
            <h2>MY GOALS</h2>
        </div>
    </div>

    <p class="section-description">
        Set a simple fitness goal and monitor your progress as you
        build healthier habits.
    </p>

    <div class="goal-panel">

        <div class="goal-input-area">

            <label for="goalType">SELECT YOUR GOAL</label>

            <select id="goalType">
                <option value="">Choose a goal</option>
                <option value="exercise">Exercise regularly</option>
                <option value="water">Drink more water</option>
                <option value="sleep">Improve sleep</option>
                <option value="food">Eat healthier</option>
                <option value="screen">Reduce screen time</option>
                <option value="bmi">Maintain a healthy BMI</option>
            </select>

            <label for="goalTarget">TARGET</label>

            <input
                type="text"
                id="goalTarget"
                placeholder="Example: Exercise 4 times a week"
            >

            <button
                class="primary-action"
                onclick="saveGoal()"
            >
                SAVE GOAL
            </button>

        </div>

        <div class="goal-display">

            <div class="goal-status">
                <span class="status-dot"></span>
                CURRENT GOAL
            </div>

            <h3 id="currentGoal">
                No goal set yet.
            </h3>

            <p id="goalMessage">
                Set your first goal to start tracking your progress.
            </p>
<div class="goal-progress">
    <p>GOAL PROGRESS</p>
    <strong id="goalProgress">0%</strong>
</div>

        </div>

    </div>

    <div class="motivation-card">

        <p class="section-label">DAILY MOTIVATION</p>

        <h3 id="motivationalMessage">
            Start small. Stay consistent. Keep moving forward.
        </h3>

        <p>
            Every healthy choice you make is a step toward your goal.
        </p>

    </div>

</section>

<section id="questionnaire" class="questionnaire-section">

    <div class="section-heading">
        <span class="section-number">04</span>

        <div>
            <p class="section-label">PERSONAL HEALTH PROFILE</p>
            <h2>HEALTH QUESTIONNAIRE</h2>
        </div>
    </div>

    <p class="section-description">
        Answer the questions below so the system can provide
        recommendations based on your lifestyle and personal needs.
    </p>

    <div class="questionnaire-grid">

        <div class="question-card">
            <label for="activity">
                HOW OFTEN DO YOU EXERCISE?
            </label>

            <select id="activity">
                <option value="">Select an answer</option>
                <option value="rarely">Rarely</option>
                <option value="sometimes">1–2 times a week</option>
                <option value="often">3–5 times a week</option>
                <option value="daily">Every day</option>
            </select>
        </div>


        <div class="question-card">
            <label for="meals">
                HOW WOULD YOU DESCRIBE YOUR EATING HABITS?
            </label>

            <select id="meals">
                <option value="">Select an answer</option>
                <option value="healthy">Mostly healthy</option>
                <option value="mixed">A mix of healthy and unhealthy foods</option>
                <option value="unhealthy">Mostly unhealthy</option>
                <option value="unsure">I'm not sure</option>
            </select>
        </div>


        <div class="question-card">
            <label for="sleep">
                HOW MANY HOURS DO YOU USUALLY SLEEP?
            </label>

            <select id="sleep">
                <option value="">Select an answer</option>
                <option value="less5">Less than 5 hours</option>
                <option value="5to6">5–6 hours</option>
                <option value="7to8">7–8 hours</option>
                <option value="more8">More than 8 hours</option>
            </select>
        </div>


        <div class="question-card">
            <label for="water">
                HOW MUCH WATER DO YOU DRINK EACH DAY?
            </label>

            <select id="water">
                <option value="">Select an answer</option>
                <option value="low">Less than 4 glasses</option>
                <option value="moderate">4–7 glasses</option>
                <option value="high">8–10 glasses</option>
                <option value="more">More than 10 glasses</option>
            </select>
        </div>


        <div class="question-card">
            <label for="screenTime">
                HOW MUCH TIME DO YOU SPEND SITTING OR USING A SCREEN?
            </label>

            <select id="screenTime">
                <option value="">Select an answer</option>
                <option value="low">Less than 3 hours</option>
                <option value="moderate">3–5 hours</option>
                <option value="high">6–8 hours</option>
                <option value="veryHigh">More than 8 hours</option>
            </select>
        </div>


        <div class="question-card">
            <label for="allergies">
                DO YOU HAVE ANY KNOWN ALLERGIES?
            </label>

            <select id="allergies">
                <option value="">Select an answer</option>
                <option value="no">No</option>
                <option value="yes">Yes</option>
            </select>
        </div>


        <div class="question-card full-width">

            <label for="allergyDetails">
                IF YES, SPECIFY YOUR ALLERGIES
            </label>

            <input
                type="text"
                id="allergyDetails"
                placeholder="Enter allergies or N/A"
            >

        </div>


        <div class="question-card full-width">

            <label for="medicalCondition">
                DO YOU HAVE ANY MEDICAL CONDITIONS THAT MAY AFFECT
                YOUR DIET, EXERCISE, OR FITNESS ACTIVITIES?
            </label>

            <select id="medicalCondition">
                <option value="">Select an answer</option>
                <option value="no">No</option>
                <option value="yes">Yes</option>
                <option value="preferNot">Prefer not to say</option>
            </select>

        </div>


        <div class="question-card full-width">

            <label for="medicalDetails">
                IF YES, SPECIFY IF YOU ARE COMFORTABLE
            </label>

            <input
                type="text"
                id="medicalDetails"
                placeholder="Enter condition or N/A"
            >

        </div>

    </div>


    <button
        class="primary-action questionnaire-submit"
        onclick="submitQuestionnaire()"
    >
        SUBMIT QUESTIONNAIRE
    </button>


    <div class="questionnaire-result-panel">

        <div class="status-header">
            <span class="status-dot"></span>
            PERSONALIZED ANALYSIS
        </div>

        <p id="questionnaireResult"></p>

    </div>

</section>
<section id="progress" class="progress-section">

    <div class="section-heading">
        <span class="section-number">05</span>

        <div>
            <p class="section-label">PERFORMANCE MONITORING</p>
            <h2>FITNESS PROGRESS</h2>
        </div>
    </div>

    <p class="section-description">
        Monitor your BMI records and track your health progress over time.
    </p>

    <div class="progress-dashboard">

        <div class="progress-card">
            <p class="progress-label">CURRENT BMI</p>
            <p id="currentBMI" class="progress-value">--</p>
        </div>

        <div class="progress-card">
            <p class="progress-label">BMI RECORDS</p>
            <p id="recordCount" class="progress-value">0</p>
        </div>

        <div class="progress-card">
            <p class="progress-label">STATUS</p>
            <p id="progressStatus" class="progress-value">--</p>
        </div>

    </div>

    <div class="progress-chart-panel">

        <div class="status-header">
            <span class="status-dot"></span>
            BMI HISTORY
        </div>

        <canvas id="bmiChart"></canvas>

    </div>

    <div class="progress-actions">

        <button
            class="primary-action"
            onclick="viewProgress()"
        >
            VIEW PROGRESS
        </button>

        <button
            class="secondary-action"
            onclick="clearProgress()"
        >
            CLEAR PROGRESS
        </button>

    </div>

    <p id="progressResult"></p>

</section>
    </main>

    <footer>
        <p>BMI Fitness Tracker for Students' Health Monitoring</p>
    </footer>
<script>
let bmiChartInstance = null;
    function calculateBMI() {
        const height = document.getElementById("height").value;
        const weight = document.getElementById("weight").value;
const age = document.getElementById("age").value;
const sex = document.getElementById("sex").value;

        if (height === "" || weight === "" || age === "" || sex === "") {
            document.getElementById("bmiResult").textContent =
    "Please enter your height, weight, age, and sex.";
            return;
        }

        if (height <= 0 || weight <= 0) {
            document.getElementById("bmiResult").textContent =
                "Please enter valid height and weight.";
            return;
        }

        const heightInMeters = height / 100;
        const bmi = weight / (heightInMeters * heightInMeters);
localStorage.setItem("studentBMI", bmi);
let bmiHistory = JSON.parse(localStorage.getItem("bmiHistory")) || [];

bmiHistory.push({
    bmi: bmi,
    date: new Date().toLocaleDateString(),
    age: age,
    sex: sex
});

localStorage.setItem("bmiHistory", JSON.stringify(bmiHistory));
updateGoalProgress();

        let category;

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

document.getElementById("bmiResult").innerHTML =
    '<span class="bmi-number">' + bmi.toFixed(2) + '</span>' +
    '<span class="bmi-category">' + category + '</span>';

        let recommendation;

        if (bmi < 18.5) {
            recommendation = "Consider eating balanced meals and getting enough nutrients.";
        } else if (bmi < 25) {
            recommendation = "Keep maintaining a balanced diet and regular physical activity.";
        } else if (bmi < 30) {
            recommendation = "Consider regular physical activity and healthier food choices.";
        } else {
            recommendation = "Consider seeking guidance from a health professional for healthy weight management.";
        }

        document.getElementById("recommendation").textContent = recommendation;
const bmiPanel = document.querySelector(".bmi-status-panel");

if (bmiPanel) {
    bmiPanel.classList.add("show-result");
}
    }

document.getElementById("allergies").addEventListener("change", function() {
    const allergyDetails = document.getElementById("allergyDetails");

    if (this.value === "yes") {
        allergyDetails.style.display = "block";
    } else {
        allergyDetails.style.display = "none";
        allergyDetails.value = "";
    }
});

document.getElementById("medicalCondition").addEventListener("change", function() {
    const medicalDetails = document.getElementById("medicalDetails");

    if (this.value === "yes") {
        medicalDetails.style.display = "block";
    } else {
        medicalDetails.style.display = "none";
        medicalDetails.value = "";
    }
});

    function submitQuestionnaire() {
    const activity = document.getElementById("activity").value;
    const meals = document.getElementById("meals").value;
    const sleep = document.getElementById("sleep").value;
    const water = document.getElementById("water").value;
    const screenTime = document.getElementById("screenTime").value;
const allergies = document.getElementById("allergies").value;
const allergyDetails = document.getElementById("allergyDetails").value;
const medicalCondition = document.getElementById("medicalCondition").value;
const medicalDetails = document.getElementById("medicalDetails").value;
     if (
    activity === "" ||
    meals === "" ||
    sleep === "" ||
    water === "" ||
    screenTime === "" ||
    allergies === "" ||
    medicalCondition === ""
) {
        alert("Please answer all questionnaire questions.");
        return;
    }

    let advice = "";
if (allergies === "yes") {
    advice += "• Be mindful of your known allergies and avoid possible triggers.<br>";

    if (allergyDetails.trim() !== "") {
        advice += "• Make sure your health and fitness choices are appropriate for your reported allergies.<br>";
    }
}

if (medicalCondition === "yes") {
    advice += "• Consider consulting a qualified health professional before making major changes to your diet or exercise routine.<br>";

    if (medicalDetails.trim() !== "") {
        advice += "• Your reported medical condition should be considered when planning fitness activities.<br>";
    }
}

if (medicalCondition === "preferNot") {
    advice += "• For health concerns that may affect your fitness activities, consider speaking with a qualified health professional.<br>";
}

if (medicalCondition === "preferNot") {
    advice += "• For personalized health concerns, consider speaking with a qualified health professional.<br>";
}
const bmi = parseFloat(localStorage.getItem("studentBMI"));
if (!isNaN(bmi)) {
    if (bmi < 18.5) {
        advice += "• Your BMI is below the standard adult range. Focus on balanced nutrition and healthy habits.<br>";
    } else if (bmi < 25) {
        advice += "• Your BMI is within the standard adult range. Continue maintaining healthy habits.<br>";
    } else if (bmi < 30) {
        advice += "• Your BMI is above the standard adult range. Focus on regular activity and balanced nutrition.<br>";
    } else {
        advice += "• Your BMI is in the higher range. Consider discussing healthy weight management with a qualified health professional.<br>";
    }
}

    if (activity === "rarely") {
        advice += "Try to include more physical activity in your daily routine.<br>";
    } else {
        advice += "Keep maintaining your physical activity.<br>";
    }

    if (meals === "unhealthy") {
        advice += "Try to choose more balanced and nutritious meals.<br>";
    } else {
        advice += "Keep maintaining healthy eating habits.<br>";
    }

    if (sleep === "less5" || sleep === "5to6") {
        advice += "Try to get more consistent and adequate sleep.<br>";
    } else {
        advice += "Keep maintaining a healthy sleep schedule.<br>";
    }

    if (water === "low") {
        advice += "Try to drink more water throughout the day.<br>";
    } else {
        advice += "Keep maintaining good water intake.<br>";
    }

    if (screenTime === "high" || screenTime === "veryHigh") {
        advice += "Try to take regular breaks from sitting and screen use.<br>";
    } else {
        advice += "Keep maintaining a good balance between screen time and physical activity.<br>";
    }

    document.getElementById("questionnaireResult").innerHTML =
    "<h3>Your Personalized Health Recommendations</h3>" + advice;

localStorage.setItem("questionnaireData", JSON.stringify({
    activity: activity,
    meals: meals,
    sleep: sleep,
    water: water,
    screenTime: screenTime,
    allergies: allergies,
    allergyDetails: allergyDetails,
    medicalCondition: medicalCondition,
    medicalDetails: medicalDetails
}));

updateHealthGuide();
}
function viewProgress() {
    const bmiHistory =
        JSON.parse(localStorage.getItem("bmiHistory")) || [];

    if (bmiHistory.length === 0) {
        document.getElementById("progressResult").innerHTML =
            "<p>No BMI records yet. Calculate your BMI first.</p>";

        const canvas = document.getElementById("bmiChart");
        canvas.style.display = "none";
        return;
    }

const currentBMIElement = document.getElementById("currentBMI");
const recordCountElement = document.getElementById("recordCount");
const progressStatusElement = document.getElementById("progressStatus");

const latestBMI = bmiHistory[bmiHistory.length - 1].bmi;

currentBMIElement.textContent = Number(latestBMI).toFixed(2);
recordCountElement.textContent = bmiHistory.length;

if (latestBMI < 18.5) {
    progressStatusElement.textContent = "UNDERWEIGHT";
} else if (latestBMI < 25) {
    progressStatusElement.textContent = "NORMAL";
} else if (latestBMI < 30) {
    progressStatusElement.textContent = "OVERWEIGHT";
} else {
    progressStatusElement.textContent = "OBESE";
}

    document.getElementById("progressResult").innerHTML =
        "<h3>BMI History</h3>";

    const canvas = document.getElementById("bmiChart");
    canvas.style.display = "block";

    const labels = bmiHistory.map(record => record.date);
    const bmiValues = bmiHistory.map(record => record.bmi);

    if (bmiChartInstance) {
    bmiChartInstance.destroy();
}

bmiChartInstance = new Chart(canvas, {
    type: "line",

    data: {
        labels: labels,

        datasets: [{
            label: "BMI",
            data: bmiValues,

            borderColor: "#00eaff",
            backgroundColor: "rgba(0, 234, 255, 0.10)",

            borderWidth: 3,

            pointBackgroundColor: "#00eaff",
            pointBorderColor: "#ffffff",
            pointBorderWidth: 2,
            pointRadius: 5,
            pointHoverRadius: 8,

            fill: true,
            tension: 0.35
        }]
    },

    options: {

        responsive: true,

        maintainAspectRatio: false,

        plugins: {

            legend: {
                labels: {
                    color: "#b9faff",
                    font: {
                        family: "Arial",
                        size: 12
                    }
                }
            },

            tooltip: {
                backgroundColor: "#061923",
                titleColor: "#00eaff",
                bodyColor: "#ffffff",
                borderColor: "#00eaff",
                borderWidth: 1,

                callbacks: {
                    label: function(context) {
                        return " BMI: " + context.parsed.y.toFixed(2);
                    }
                }
            }
        },

        scales: {

            x: {
                ticks: {
                    color: "#8fcbd3"
                },

                grid: {
                    color: "rgba(0, 234, 255, 0.08)"
                }
            },

            y: {
                beginAtZero: false,

                ticks: {
                    color: "#8fcbd3"
                },

                grid: {
                    color: "rgba(0, 234, 255, 0.08)"
                }
            }
        },

        animation: {
            duration: 1200,
            easing: "easeOutQuart"
        }
    }
});
}
function clearProgress() {
    localStorage.removeItem("bmiHistory");

    document.getElementById("progressResult").innerHTML =
        "<p>BMI progress history has been cleared.</p>";
}
function saveGoal() {
    const goalType = document.getElementById("goalType").value;
    const goalTarget = document.getElementById("goalTarget").value.trim();

    if (goalType === "" || goalTarget === "") {
        alert("Please select a goal and enter your target.");
        return;
    }

    const goalNames = {
        exercise: "Exercise Regularly",
        water: "Drink More Water",
        sleep: "Improve Sleep",
        food: "Eat Healthier",
        screen: "Reduce Screen Time",
        bmi: "Maintain a Healthy BMI"
    };

    const goal = {
        type: goalType,
        name: goalNames[goalType],
        target: goalTarget
    };

    localStorage.setItem("fitnessGoal", JSON.stringify(goal));

document.getElementById("goalProgress").textContent = "0%";

    document.getElementById("currentGoal").textContent =
        goal.name;

    document.getElementById("goalMessage").textContent =
        "Target: " + goal.target;

let motivation = "";

if (goal.name.toLowerCase().includes("weight")) {
    motivation = "Stay consistent. Every healthy choice brings you closer to your goal.";
} else if (goal.name.toLowerCase().includes("exercise")) {
    motivation = "Every workout counts. Keep moving and keep building your strength.";
} else if (goal.name.toLowerCase().includes("fitness")) {
    motivation = "Small improvements become big results when you stay consistent.";
} else {
    motivation = "You have a goal. Take it one step at a time and keep moving forward.";
}

document.getElementById("motivationalMessage").textContent = motivation;

    document.getElementById("goalTarget").value = "";
}
function loadSavedGoal() {
    const savedGoal = localStorage.getItem("fitnessGoal");

    if (!savedGoal) {
        return;
    }

    const goal = JSON.parse(savedGoal);

    document.getElementById("currentGoal").textContent =
        goal.name;

    document.getElementById("goalMessage").textContent =
        "Target: " + goal.target;

let motivation = "";

if (goal.name.toLowerCase().includes("weight")) {
    motivation =
        "Stay consistent. Every healthy choice brings you closer to your goal.";
} else if (goal.name.toLowerCase().includes("exercise")) {
    motivation =
        "Every workout counts. Keep moving and keep building your strength.";
} else if (goal.name.toLowerCase().includes("fitness")) {
    motivation =
        "Small improvements become big results when you stay consistent.";
} else {
    motivation =
        "You have a goal. Take it one step at a time and keep moving forward.";
}

document.getElementById("motivationalMessage").textContent =
    motivation;
}

loadSavedGoal();
updateGoalProgress();

window.addEventListener("load", function () {
    const bmiHistory =
        JSON.parse(localStorage.getItem("bmiHistory")) || [];

    if (bmiHistory.length > 0) {
        viewProgress();
    }
});

function updateHealthGuide() {

    const bmi = parseFloat(localStorage.getItem("studentBMI"));

    const activity = document.getElementById("activity").value;
    const meals = document.getElementById("meals").value;
    const sleep = document.getElementById("sleep").value;
    const water = document.getElementById("water").value;
    const screenTime = document.getElementById("screenTime").value;

    const allergies = document.getElementById("allergies").value;
    const allergyDetails =
        document.getElementById("allergyDetails").value.trim();

    const medicalCondition =
        document.getElementById("medicalCondition").value;

    let foodAdvice =
        "Keep maintaining healthy eating habits.";

    let exerciseAdvice =
        "Keep maintaining your physical activity.";

    let routineAdvice =
        "Keep maintaining a healthy daily routine.";

    let allergyAdvice =
        "No allergy information has been provided.";

    /* FOOD */

    if (meals === "unhealthy") {
        foodAdvice =
            "Try to choose more balanced and nutritious meals.";
    } else {
        foodAdvice =
            "Keep maintaining healthy eating habits.";
    }

    if (!isNaN(bmi)) {

        if (bmi < 18.5) {
            foodAdvice +=
                " Focus on balanced nutrition and getting enough nutrients.";
        } else if (bmi < 25) {
            foodAdvice +=
                " Your BMI is within the standard adult range.";
        } else if (bmi < 30) {
            foodAdvice +=
                " Focus on balanced portions and regular healthy eating habits.";
        } else {
            foodAdvice +=
                " Consider discussing healthy weight management with a qualified health professional.";
        }
    }

    /* EXERCISE */

    if (activity === "rarely") {

        exerciseAdvice =
            "Try to include more physical activity in your daily routine.";

    } else {

        exerciseAdvice =
            "Keep maintaining your physical activity.";
    }

    /* ROUTINE */

    if (sleep === "less5" || sleep === "5to6") {

        routineAdvice =
            "Try to get more consistent and adequate sleep.";

    } else {

        routineAdvice =
            "Keep maintaining a healthy sleep schedule.";
    }

    if (water === "low") {

        routineAdvice +=
            " Try to drink more water throughout the day.";

    } else {

        routineAdvice +=
            " Keep maintaining good water intake.";
    }

    if (screenTime === "high" || screenTime === "veryHigh") {

        routineAdvice +=
            " Try to take regular breaks from sitting and screen use.";

    } else {

        routineAdvice +=
            " Keep maintaining a good balance between screen time and physical activity.";
    }

    /* ALLERGIES */

    if (allergies === "yes") {

        if (allergyDetails !== "") {

            allergyAdvice =
                "Remember your recorded allergy information: " +
                allergyDetails +
                ". Avoid possible triggers.";

        } else {

            allergyAdvice =
                "Be mindful of your known allergies and avoid possible triggers.";
        }

    } else if (allergies === "no") {

        allergyAdvice =
            "No known allergies were reported in your questionnaire.";
    }

    /* MEDICAL CONDITION */

    if (medicalCondition === "yes") {

        allergyAdvice +=
            " Consider your medical condition when planning diet and exercise.";

    } else if (medicalCondition === "preferNot") {

        allergyAdvice +=
            " For personalized health concerns, consider speaking with a qualified health professional.";
    }

    /* UPDATE THE FOUR HEALTH GUIDE CARDS */

    document.getElementById("foodGuide").textContent =
        foodAdvice;

    document.getElementById("exerciseGuide").textContent =
        exerciseAdvice;

    document.getElementById("routineGuide").textContent =
        routineAdvice;

    document.getElementById("allergyGuide").textContent =
        allergyAdvice;
}

const savedQuestionnaire =
    localStorage.getItem("questionnaireData");

if (savedQuestionnaire) {

    const data = JSON.parse(savedQuestionnaire);

    document.getElementById("activity").value = data.activity;
    document.getElementById("meals").value = data.meals;
    document.getElementById("sleep").value = data.sleep;
    document.getElementById("water").value = data.water;
    document.getElementById("screenTime").value = data.screenTime;
    document.getElementById("allergies").value = data.allergies;
    document.getElementById("allergyDetails").value = data.allergyDetails;
    document.getElementById("medicalCondition").value = data.medicalCondition;
    document.getElementById("medicalDetails").value = data.medicalDetails;

    updateHealthGuide();
}
const motivationalMessages = [
    "Small steps every day lead to meaningful progress.",
    "Consistency is more important than perfection.",
    "Your progress is built one healthy choice at a time.",
    "Keep going. You are working toward a healthier version of yourself.",
    "Every effort counts, even the small ones.",
    "Take care of your body and give yourself time to improve.",
    "Your goal is worth the effort. Stay consistent.",
    "Progress takes time. Keep showing up.",
    "Believe in your progress and keep moving forward.",
    "A healthier routine starts with one good decision."
];

function showRandomMotivation() {

    const messageElement =
        document.getElementById("motivationalMessage");

    if (!messageElement) {
        return;
    }

    const randomIndex =
        Math.floor(Math.random() * motivationalMessages.length);

    messageElement.textContent =
        motivationalMessages[randomIndex];
}
showRandomMotivation();

function updateGoalProgress() {
    const goal = localStorage.getItem("fitnessGoal");
    const progressElement = document.getElementById("goalProgress");

    if (!goal || !progressElement) {
        return;
    }

    const goalData = JSON.parse(goal);

    if (goalData.type === "bmi") {
        const history =
            JSON.parse(localStorage.getItem("bmiHistory")) || [];

        if (history.length < 2) {
            progressElement.textContent = "0%";
            return;
        }

        const startBMI = Number(history[0].bmi);
        const currentBMI =
            Number(history[history.length - 1].bmi);
        const targetBMI = Number(goalData.target);

        if (
            isNaN(startBMI) ||
            isNaN(currentBMI) ||
            isNaN(targetBMI) ||
            startBMI === targetBMI
        ) {
            progressElement.textContent = "0%";
            return;
        }

        let progress =
            ((startBMI - currentBMI) /
            (startBMI - targetBMI)) * 100;

        progress = Math.max(0, Math.min(100, progress));

        progressElement.textContent =
            Math.round(progress) + "%";
    } else {
        progressElement.textContent = "0%";
    }
}

    const goalData = JSON.parse(goal);

    const startBMI = Number(history[0].bmi);
    const currentBMI =
        Number(history[history.length - 1].bmi);

    const targetBMI = Number(goalData.target);

    if (
        isNaN(startBMI) ||
        isNaN(currentBMI) ||
        isNaN(targetBMI) ||
        startBMI === targetBMI
    ) {
        return;
    }

    let progress =
        ((startBMI - currentBMI) /
        (startBMI - targetBMI)) * 100;

    progress = Math.max(0, Math.min(100, progress));

    const progressElement =
        document.getElementById("goalProgress");

    if (progressElement) {
        progressElement.textContent =
            Math.round(progress) + "%";
    }
}
const savedQuestionnaire =
    localStorage.getItem("questionnaireData");

if (savedQuestionnaire) {
    const data = JSON.parse(savedQuestionnaire);

    document.getElementById("activity").value = data.activity;
    document.getElementById("meals").value = data.meals;
    document.getElementById("sleep").value = data.sleep;
    document.getElementById("water").value = data.water;
    document.getElementById("screenTime").value = data.screenTime;
    document.getElementById("allergies").value = data.allergies;
    document.getElementById("allergyDetails").value = data.allergyDetails;
    document.getElementById("medicalCondition").value = data.medicalCondition;
    document.getElementById("medicalDetails").value = data.medicalDetails;

    updateHealthGuide();
}
</script>

</body>
</html>
← Back to timeline