Fitness Tracking Dashboard JavaScript, API

👤 Sharing: AI 
```javascript
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fitness Tracking Dashboard</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        header {
            background-color: #333;
            color: white;
            text-align: center;
            padding: 1em 0;
            width: 100%;
        }

        .dashboard {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            padding: 20px;
            width: 80%;
            max-width: 1200px; /* Limiting the width for larger screens */
        }

        .data-card {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            padding: 20px;
            margin: 10px;
            width: calc(30% - 20px); /* Adjust width for desired card count per row */
            text-align: center;
        }

        .data-card h2 {
            margin-top: 0;
            color: #333;
        }

        .data-card p {
            font-size: 1.2em;
            color: #666;
        }

        #activity-log {
          background-color: white;
          border-radius: 8px;
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
          padding: 20px;
          margin: 10px;
          width: 80%;
          max-width: 1200px;
        }

        #activity-log h2 {
          color: #333;
          text-align: center;
        }

        #activity-list {
          list-style-type: none;
          padding: 0;
        }

        #activity-list li {
          padding: 8px 12px;
          border-bottom: 1px solid #eee;
        }

        #activity-list li:last-child {
          border-bottom: none;
        }


        @media (max-width: 768px) {
            .dashboard {
                flex-direction: column;
                align-items: center;
            }

            .data-card {
                width: 80%;
            }
        }
    </style>
</head>
<body>

    <header>
        <h1>Fitness Tracking Dashboard</h1>
    </header>

    <div class="dashboard">
        <div class="data-card">
            <h2>Steps</h2>
            <p id="step-count">Loading...</p>
        </div>
        <div class="data-card">
            <h2>Calories Burned</h2>
            <p id="calories-burned">Loading...</p>
        </div>
        <div class="data-card">
            <h2>Distance</h2>
            <p id="distance">Loading...</p>
        </div>
    </div>

    <div id="activity-log">
      <h2>Activity Log</h2>
      <ul id="activity-list">
          <!-- Activity logs will be dynamically added here -->
      </ul>
    </div>

    <script>
        // Replace with your actual API key and endpoint
        const apiKey = 'YOUR_API_KEY'; // Replace with your actual API key
        const apiUrl = 'https://api.example.com/fitness_data'; // Replace with a real API endpoint

        async function fetchData() {
            try {
                // Simulate fetching data from an API (replace with actual API call)
                const steps = Math.floor(Math.random() * 10000); // Random steps
                const calories = Math.floor(Math.random() * 800);    // Random calories
                const distance = (Math.random() * 5).toFixed(2);   // Random distance in miles

                 // Simulate fetching activity logs
                const activityLogs = [
                  { time: '07:00', activity: 'Morning Walk' },
                  { time: '12:30', activity: 'Lunch Break Walk' },
                  { time: '18:00', activity: 'Evening Jog' },
                ];


                // Update the dashboard elements
                document.getElementById('step-count').textContent = steps;
                document.getElementById('calories-burned').textContent = calories;
                document.getElementById('distance').textContent = distance + ' miles';
                updateActivityLog(activityLogs);


            } catch (error) {
                console.error('Error fetching data:', error);
                // Display error messages to the user, rather than just logging to console.
                document.getElementById('step-count').textContent = 'Error loading data.';
                document.getElementById('calories-burned').textContent = 'Error loading data.';
                document.getElementById('distance').textContent = 'Error loading data.';
            }
        }


        function updateActivityLog(activities) {
            const activityList = document.getElementById('activity-list');
            activityList.innerHTML = ''; // Clear existing logs

            activities.forEach(activity => {
                const listItem = document.createElement('li');
                listItem.textContent = `${activity.time} - ${activity.activity}`;
                activityList.appendChild(listItem);
            });
        }


        // Initial data fetch
        fetchData();

        // Refresh data every 30 seconds (optional)
        setInterval(fetchData, 30000);
    </script>

</body>
</html>
```
👁️ Viewed: 9

Comments