Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/chrisdzasc/Time-Tracking-Dashboard/llms.txt

Use this file to discover all available pages before exploring further.

​
Getting Started

The Time Tracking Dashboard requires no build process, package managers, or dependencies. Simply download the files and open in a browser.
Since this is a static HTML/CSS/JavaScript project, you don’t need Node.js, npm, or any build tools.

​
Installation

1

Clone or Download the Repository

Get the source code from GitHub:Option 1: Clone with Git
git clone https://github.com/chrisdzasc/Time-Tracking-Dashboard.git
cd Time-Tracking-Dashboard
Option 2: Download ZIP
  • Visit the repository
  • Click the green “Code” button
  • Select “Download ZIP”
  • Extract the downloaded file
2

Open the Dashboard

Navigate to the project folder and open index.html in your browser:Option 1: Double-click
  • Locate index.html in the project folder
  • Double-click to open in your default browser
Option 2: Use a Local Server (Recommended)For a better development experience, use a local server:
# Using Python 3
python -m http.server 8000

# Using Python 2
python -m SimpleHTTPServer 8000

# Using Node.js (if you have npx)
npx serve
Then visit http://localhost:8000 in your browser.
Using a local server prevents CORS issues when fetching the JSON data file.
3

Verify the Dashboard Loads

You should see:
  • A profile card with “Jeremy Robson” and three timeframe buttons (Daily, Weekly, Monthly)
  • Six activity cards: Work, Play, Study, Exercise, Social, and Self Care
  • Each card displaying current hours and previous period comparison
  • The “Weekly” button should be active by default
The dashboard loads data from js/data.json when the page initializes:
// From app.js:3-11
fetch('./js/data.json')
    .then(response => { 
        return response.json()
    })
    .then(data => {
        dashboardData = data;
        weeklyActivity();
    });

​
Interacting with the Dashboard

Once the dashboard is running, you can explore its features:

​
Switch Timeframes

Click the timeframe buttons in the profile card to update all activity cards:
  • Daily: Shows hours for the current day vs. yesterday
  • Weekly: Shows hours for the current week vs. last week (default)
  • Monthly: Shows hours for the current month vs. last month
// Button event listeners from app.js:109-113
daily.addEventListener("click", dailyActivity);
weekly.addEventListener("click", weeklyActivity);
monthly.addEventListener("click", monthlyActivity);

​
Observe the Data Updates

When you click a timeframe button, the dashboard:
  1. Removes the active class from all buttons
  2. Adds the active class to the clicked button
  3. Updates all activity cards with data for that timeframe
// Example: Weekly activity function from app.js:62-83
function weeklyActivity() {
    removeActiveClasses();
    weekly.classList.add("profile-card__option--active");

    workCurrent.innerText = dashboardData[0].timeframes.weekly.current;
    workPrevious.innerText = dashboardData[0].timeframes.weekly.previous;

    playCurrent.innerText = dashboardData[1].timeframes.weekly.current;
    playPrevious.innerText = dashboardData[1].timeframes.weekly.previous;
    // ... and so on for all activities
}

​
Explore the Activity Cards

Each activity card shows:
  • Activity name: Work, Play, Study, Exercise, Social, or Self Care
  • Current hours: Time spent in the selected timeframe
  • Previous hours: Comparison to the previous period
  • Color-coded backgrounds: Each activity has a unique color
  • Hover effect: Cards lighten when you hover over them

​
Project Structure

Understanding the file organization: 
Time-Tracking-Dashboard/
├── index.html          # Main HTML file
├── css/
│   └── styles.css      # All styles and responsive layouts
├── js/
│   ├── app.js          # Dashboard logic and interactivity
│   └── data.json       # Activity data for all timeframes
├── images/             # Icons and profile image
└── assets/
    └── fonts/          # Rubik font family (Light, Regular, Medium)
All JavaScript code is in a single app.js file, making it easy to understand the complete logic flow.

​
Understanding the Data Structure

The dashboard reads from data.json, which contains an array of activity objects: 
// Sample from data.json:2-18
{
  "title": "Work",
  "timeframes": {
    "daily": {
      "current": 5,
      "previous": 7
    },
    "weekly": {
      "current": 32,
      "previous": 36
    },
    "monthly": {
      "current": 103,
      "previous": 128
    }
  }
}
Each activity has three timeframes (daily, weekly, monthly), with current and previous hour values.

​
Testing Responsiveness

The dashboard is fully responsive with three breakpoints:
  • Mobile (< 768px): Single column, horizontal profile layout
  • Tablet (768px - 1439px): 3-column grid with profile spanning full width
  • Desktop (1440px+): 4-column grid with profile in first column spanning 2 rows
To test:
  1. Open browser DevTools (F12)
  2. Toggle device toolbar (Ctrl/Cmd + Shift + M)
  3. Try different viewport sizes
The layout uses CSS Grid with grid-template-columns that change at each breakpoint for optimal viewing.

​
Troubleshooting

​
Data Not Loading

If activity cards show initial values but don’t update:
  • Issue: CORS policy blocking the fetch request
  • Solution: Use a local server instead of opening index.html directly
  • Check: Open browser console (F12) and look for fetch errors

​
Fonts Not Displaying

If the Rubik font doesn’t load:
  • Check: The assets/fonts/ directory contains the .woff2 files
  • Verify: Font paths in styles.css are correct
  • Fallback: The design uses sans-serif as a fallback font

​
Next Steps

Now that you have the dashboard running:

Features Overview

Learn about all dashboard capabilities

Customization Guide

Modify colors, data, and styling