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.

​
Overview

The Time Tracking Dashboard is a clean, responsive web application that displays activity tracking data across different timeframes. Users can view their tracked hours for Work, Play, Study, Exercise, Social, and Self Care activities, with the ability to toggle between daily, weekly, and monthly views.

Live Demo

Try out the live dashboard

GitHub Repository

View the source code

​
Key Features

The dashboard includes these core capabilities:
  • Dynamic Timeframe Switching: Toggle between daily, weekly, and monthly activity views with smooth transitions
  • Six Activity Categories: Track Work, Play, Study, Exercise, Social, and Self Care activities
  • Responsive Design: Optimized layouts for mobile (320px+), tablet (768px+), and desktop (1440px+)
  • Data-Driven UI: Fetches activity data from JSON and updates the interface dynamically
  • Interactive Cards: Hover effects and visual feedback on activity cards
  • Profile Display: User profile section with timeframe selection buttons

​
Technology Stack

This project is built with modern web technologies:
  • HTML5: Semantic markup with accessibility features
  • CSS3: Custom properties (CSS variables), CSS Grid, and responsive design
  • Vanilla JavaScript: DOM manipulation and Fetch API for data loading
  • JSON: Structured data storage for activity timeframes
This project uses no external frameworks or libraries - just pure HTML, CSS, and JavaScript.

​
What Makes This Project Unique

​
Zero Framework Dependencies

The entire application is built without React, Vue, or any other framework. This demonstrates how powerful vanilla JavaScript can be for building interactive UIs.

​
Modern CSS Grid Layout

The responsive layout uses CSS Grid with different column configurations:
  • Mobile: Single column layout
  • Tablet: 3-column grid
  • Desktop: 4-column grid with profile spanning 2 rows
/* Desktop grid layout from styles.css:412-415 */
.dashboard {
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  max-width: 111.6rem;
}

​
Fetch API Data Loading

Activity data is loaded asynchronously using the native Fetch API: 
// Data loading from app.js:3-11
fetch('./js/data.json')
    .then(response => { 
        return response.json()
    })
    .then(data => {
        dashboardData = data;
        weeklyActivity();
    });

​
Custom Font Loading

Optimized font loading with preload hints for better performance: 
<!-- Font preloading from index.html:17-19 -->
<link rel="preload" href="./assets/fonts/Rubik-Light.woff2" type="font/woff2" as="font" crossorigin>
<link rel="preload" href="./assets/fonts/Rubik-Regular.woff2" type="font/woff2" as="font" crossorigin>
<link rel="preload" href="./assets/fonts/Rubik-Medium.woff2" type="font/woff2" as="font" crossorigin>

​
Use Cases

This dashboard is perfect for:
  • Personal Time Management: Track how you spend time across different activities
  • Learning Project: Study vanilla JavaScript patterns and responsive design
  • Portfolio Piece: Demonstrate clean code and modern web development skills
  • Template: Use as a starting point for similar data visualization projects
The codebase uses clear naming conventions and well-structured CSS with utility classes, making it easy to understand and modify.

​
Next Steps

Quick Start

Get the dashboard running locally in minutes

Features

Explore the dashboard’s functionality in detail

Build docs developers (and LLMs) love

Get started for freeTalk to us