CODE FOR FITNESS TRACKER SYSTEM ► CODING

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Advanced Fitness Tracker</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            color: #333;
            margin: 0;
            padding: 0;
            transition: background-color 0.5s ease;
        }
        header {
            background: linear-gradient(45deg, #4CAF50, #2E7D32);
            color: white;
            padding: 10px 20px;
            text-align: center;
            box-shadow: 0 2px 10px rgba(0,0,0,0.3);
            border-radius: 8px;
            position: relative;
            animation: glow 1s infinite alternate;
        }
        @keyframes glow {
            0% { box-shadow: 0 0 20px #4CAF50; }
            100% { box-shadow: 0 0 30px #81c784; }
        }
        .container {
            width: 80%;
            margin: auto;
            overflow: hidden;
            padding: 20px;
        }
        #dashboard {
            margin-top: 20px;
            padding: 20px;
            background: #fff;
            border-radius: 5px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        input[type="number"], input[type="text"], select {
            width: calc(100% - 22px);
            padding: 10px;
            margin: 5px 0;
            border: 1px solid #ccc;
            border-radius: 4px;
            transition: transform 0.2s, box-shadow 0.2s;
        }
        input[type="number"]:hover, input[type="text"]:hover, select:hover {
            transform: scale(1.02);
            border-color: #4CAF50;
            box-shadow: 0 0 10px rgba(76, 175, 80, 0.5);
        }
        button {
            padding: 10px 15px;
            background: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: transform 0.2s, background 0.2s;
            position: relative;
            overflow: hidden;
        }
        button:hover {
            background: #45a049;
            transform: translateY(-2px) scale(1.05);
            box-shadow: 0 4px 15px rgba(0,0,0,0.3);
        }
        .graph {
            height: 200px;
            background: #e2e2e2;
            margin-top: 20px;
            position: relative;
            border-radius: 5px;
            overflow: hidden;
        }
        .graph-bar {
            height: 100%;
            background: #4CAF50;
            position: absolute;
            bottom: 0;
            transition: width 0.5s;
        }
        .emoji {
            font-size: 24px;
        }
        .slider {
            width: 100%;
            cursor: pointer;
            margin: 10px 0;
        }
        .slider-container {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .quote, .tips {
            background: #e0f7fa;
            padding: 10px;
            border-radius: 4px;
            margin-top: 10px;
        }
        .hidden {
            display: none;
        }
        .chart {
            width: 100%;
            height: 300px;
            margin-top: 20px;
        }
        .weekly-summary, .activity-log, .personal-best {
            background: #fafafa;
            border: 1px solid #ccc;
            padding: 15px;
            border-radius: 5px;
            margin-top: 15px;
        }
        .summary-item {
            margin: 5px 0;
        }
    </style>
</head>
<body>
    <header>
        <h1>🏋️‍♂️ Advanced Fitness Tracker</h1>
        <button onclick="toggleMode()">🌙 Toggle Dark/Light Mode</button>
    </header>
    <div class="container">
        <div id="dashboard">
            <h2>Daily Fitness Tracker</h2>
            <h3>Step Counter</h3>
            <div class="slider-container">
                <input type="range" min="0" max="10000" value="0" class="slider" id="stepSlider" onchange="updateSteps(this.value)">
                <span id="sliderValue">0 Steps</span>
            </div>

            <h3>Calories Burned</h3>
            <div>
                <strong>Calories Burned: </strong><span id="caloriesBurned">0</span> kcal
            </div>

            <h3>💧 Water Intake</h3>
            <div class="slider-container">
                <input type="range" min="0" max="5000" value="0" class="slider" id="waterSlider" onchange="updateWater(this.value)">
                <span id="waterValue">0 ml</span>
            </div>
            <button onclick="logWater()">Log Water Intake</button>
            <div>
                <strong>Total Water Intake: </strong><span id="totalWater">0 ml</span>
            </div>

            <h3>🍽️ Diet Log</h3>
            <input type="text" id="foodItem" placeholder="Food Item">
            <input type="number" id="caloriesInFood" placeholder="Calories in food">
            <button onclick="logFood()">Log Food</button>
            <div>
                <strong>Food Log:</strong>
                <ul id="foodLogList"></ul>
            </div>

            <h3>Workout Type</h3>
            <select id="workoutType">
                <option value="Running">🏃‍♂️ Running</option>
                <option value="Cycling">🚴‍♂️ Cycling</option>
                <option value="Walking">🚶‍♂️ Walking</option>
                <option value="Yoga">🧘‍♂️ Yoga</option>
                <option value="Weight Training">🏋️‍♀️ Weight Training</option>
            </select>
            <input type="number" id="workoutDuration" placeholder="Workout Duration (minutes)" min="1">
            <button onclick="logWorkout()">Log Workout</button>

            <h3>Daily Summary</h3>
            <div id="dailySummary"></div>

            <h3>📊 Progress Charts</h3>
            <div class="graph" id="stepsGraph">
                <div class="graph-bar" id="stepsBar"></div>
            </div>
            <div class="graph" id="caloriesGraph">
                <div class="graph-bar" id="caloriesBar"></div>
            </div>
            <div class="graph" id="waterGraph">
                <div class="graph-bar" id="waterBar"></div>
            </div>

            <h3>✨ Motivation & Tips</h3>
            <div class="quote" id="motivationalQuote">"You are your only limit."</div>
            <div class="tips" id="fitnessTip">"Stay hydrated for better performance!"</div>
            <button onclick="generateQuote()">Generate Quote</button>
            <button onclick="generateTip()">Generate Tip</button>

            <h3>🏆 Weekly Summary</h3>
            <div class="weekly-summary" id="weeklySummary">
                <strong>Steps this week:</strong> <span id="weeklySteps">0</span><br>
                <strong>Calories burned this week:</strong> <span id="weeklyCalories">0</span> kcal<br>
                <strong>Total water intake this week:</strong> <span id="weeklyWater">0</span> ml
            </div>

            <h3>Activity Log</h3>
            <div class="activity-log" id="activityLog">
                <strong>Activity Log:</strong>
                <ul id="activityLogList"></ul>
            </div>

            <h3>🥇 Personal Bests</h3>
            <div class="personal-best" id="personalBest">
                <strong>Best Steps in a Day:</strong> <span id="bestSteps">0</span><br>
                <strong>Best Calories Burned:</strong> <span id="bestCalories">0</span> kcal
            </div>
        </div>
    </div>

    <script>
        let totalSteps = 0;
        let totalCalories = 0;
        let totalWater = 0;
        let foodLog = [];
        let workoutLog = [];
        let activityLog = [];
        let weeklySteps = 0;
        let weeklyCalories = 0;
        let weeklyWater = 0;
        let bestSteps = 0;
        let bestCalories = 0;

        function updateSteps(value) {
            totalSteps = value;
            document.getElementById("sliderValue").innerText = value + " Steps";
            document.getElementById("stepsBar").style.width = (totalSteps / 10000) * 100 + "%";
            updateSummary();
        }

        function updateWater(value) {
            totalWater = value;
            document.getElementById("waterValue").innerText = value + " ml";
            document.getElementById("waterBar").style.width = (totalWater / 5000) * 100 + "%";
        }

        function logWater() {
            document.getElementById("totalWater").innerText = parseInt(document.getElementById("totalWater").innerText) + totalWater + " ml";
            weeklyWater += totalWater;
            document.getElementById("weeklyWater").innerText = weeklyWater + " ml";
        }

        function logFood() {
            const foodItem = document.getElementById("foodItem").value;
            const caloriesInFood = document.getElementById("caloriesInFood").value;
            if (foodItem && caloriesInFood) {
                foodLog.push({ item: foodItem, calories: caloriesInFood });
                const foodLogList = document.getElementById("foodLogList");
                foodLogList.innerHTML += `<li>${foodItem} - ${caloriesInFood} kcal</li>`;
                totalCalories += parseInt(caloriesInFood);
                weeklyCalories += parseInt(caloriesInFood);
                document.getElementById("caloriesBurned").innerText = totalCalories;
                document.getElementById("weeklyCalories").innerText = weeklyCalories + " kcal";
                updateSummary();
            }
        }

        function logWorkout() {
            const workoutType = document.getElementById("workoutType").value;
            const workoutDuration = document.getElementById("workoutDuration").value;
            if (workoutDuration) {
                activityLog.push({ type: workoutType, duration: workoutDuration });
                const activityLogList = document.getElementById("activityLogList");
                activityLogList.innerHTML += `<li>${workoutType} for ${workoutDuration} minutes</li>`;
                updateSummary();
            }
        }

        function updateSummary() {
            document.getElementById("dailySummary").innerText = 
                `Total Steps: ${totalSteps}, Calories Burned: ${totalCalories}, Total Water Intake: ${totalWater} ml`;
            if (totalSteps > bestSteps) {
                bestSteps = totalSteps;
                document.getElementById("bestSteps").innerText = bestSteps;
            }
            if (totalCalories > bestCalories) {
                bestCalories = totalCalories;
                document.getElementById("bestCalories").innerText = bestCalories;
            }
            document.getElementById("stepsBar").style.width = (totalSteps / 10000) * 100 + "%";
            document.getElementById("caloriesBar").style.width = (totalCalories / 2000) * 100 + "%";
            document.getElementById("waterBar").style.width = (totalWater / 5000) * 100 + "%";
            updateWeeklySummary();
        }

        function updateWeeklySummary() {
            document.getElementById("weeklySteps").innerText = weeklySteps;
            document.getElementById("weeklyCalories").innerText = weeklyCalories + " kcal";
            document.getElementById("weeklyWater").innerText = weeklyWater + " ml";
        }

        function generateQuote() {
            const quotes = [
                "You are your only limit.",
                "Push yourself, because no one else is going to do it for you.",
                "Great things never come from comfort zones.",
                "Dream it. Wish it. Do it.",
                "Success doesn't just find you. You have to go out and get it."
            ];
            const randomIndex = Math.floor(Math.random() * quotes.length);
            document.getElementById("motivationalQuote").innerText = quotes[randomIndex];
        }

        function generateTip() {
            const tips = [
                "Stay hydrated for better performance!",
                "Incorporate more fruits and vegetables into your diet.",
                "Make sure to warm up before workouts.",
                "Find a workout buddy for motivation.",
                "Set realistic goals and celebrate small victories."
            ];
            const randomIndex = Math.floor(Math.random() * tips.length);
            document.getElementById("fitnessTip").innerText = tips[randomIndex];
        }

        function toggleMode() {
            const body = document.body;
            body.style.backgroundColor = body.style.backgroundColor === "white" ? "#333" : "white";
            body.style.color = body.style.color === "black" ? "white" : "black";
        }
    </script>
</body>
</html>
HTML
Share this:

Leave a Reply Cancel reply
