https://github.com/gumballoon/time-tracking-dashboard
Challenge from Frontend Mentor, originally titled ‘Time tracking dashboard’, focusing on CSS Grid layout, toggling views, and updating the DOM dynamically.
https://github.com/gumballoon/time-tracking-dashboard
css dashboard frontend-mentor html5 javascript mobile-first responsive-design statistics time-tracking
Last synced: about 2 months ago
JSON representation
Challenge from Frontend Mentor, originally titled ‘Time tracking dashboard’, focusing on CSS Grid layout, toggling views, and updating the DOM dynamically.
- Host: GitHub
- URL: https://github.com/gumballoon/time-tracking-dashboard
- Owner: gumballoon
- Created: 2025-07-01T13:10:57.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2025-07-18T08:27:28.000Z (11 months ago)
- Last Synced: 2026-05-02T22:44:08.474Z (about 2 months ago)
- Topics: css, dashboard, frontend-mentor, html5, javascript, mobile-first, responsive-design, statistics, time-tracking
- Language: HTML
- Homepage: https://gumballoon.github.io/time-tracking-dashboard/
- Size: 40 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Time Tracking Dashboard - Frontend Mentor Challenge
A responsive time tracking dashboard built with vanilla JavaScript, HTML, and CSS. Allows users to switch between daily, weekly, and monthly statistics view for various activities.
## 🎯 Challenge Overview
Build a fully functional time tracking dashboard that displays activity statistics with the ability to switch between different time periods. The challenge focuses on working with JSON data, creating interactive UI components, and implementing responsive design principles.
## 💼 Portfolio Project
This project also serves as a portfolio demonstration showcasing:
- **Frontend Development**: Vanilla JavaScript, HTML5, and CSS3
- **Data Handling**: Working with JSON data and dynamic content rendering
- **Responsive Design**: Mobile-first approach with CSS Grid and Flexbox
- **Interactive UI**: State management and user interaction handling
- **Modern CSS**: Advanced styling techniques and hover effects
## ✨ Features
- **Time Period Switching**: Toggle between Daily, Weekly, and Monthly views
- **Activity Cards**: Display current and previous time statistics for each activity
- **Responsive Layout**: Optimal viewing experience across all device sizes
- **Interactive Elements**:
- Hover states for all clickable elements
- Smooth transitions and animations
- Dynamic content updates
- **Data-Driven**: Uses local JSON file for activity data
- **Accessibility**: Semantic HTML and keyboard navigation support
## 🛠️ Built With
- **HTML5** - Semantic markup structure
- **CSS3** - Styling with Grid, Flexbox, and custom properties
- **JavaScript (ES6+)** - Dynamic functionality and data manipulation
- **JSON** - Local data storage for activity information
## 🚀 Getting Started
### Prerequisites
- Modern web browser (Chrome, Firefox, Safari, Edge)
- No additional installations required
### Installation
1. Clone or download this repository
2. Open `index.html` in your web browser
3. Click on different time periods to see the dashboard update
## 📁 Project Structure
```
├── index.html # Main HTML structure
├── style.css # Stylesheet with responsive design
├── script.js # JavaScript functionality
├── data.json # Activity data source
├── images/ # Icons and profile image
│ ├── favicon-32x32.png
│ ├── icon-ellipsis.svg
│ ├── icon-exercise.svg
│ ├── icon-play.svg
│ ├── icon-self-care.svg
│ ├── icon-social.svg
│ ├── icon-study.svg
│ ├── icon-work.svg
│ └── image-jeremy.png
└── README.md
```
## 🎨 Design Features
- **Card-based Layout**: Clean, modern card design for each activity
- **Color-coded Activities**: Each activity has its own distinct color theme
- **Smooth Animations**: Hover effects and transition animations
- **Mobile-first Design**: Responsive layout that works on all screen sizes
## 🔧 Functionality
### Core Features Implemented:
- ✅ Switch between Daily, Weekly, and Monthly statistics
- ✅ Display current time spent on each activity
- ✅ Show previous period comparison data
- ✅ Responsive design for mobile, tablet, and desktop
- ✅ Interactive hover states for all elements
- ✅ Dynamic content loading from JSON data
- ✅ Smooth transitions and animations
### User Actions:
1. **View Statistics**: See time spent on different activities
2. **Switch Time Periods**: Click Daily, Weekly, or Monthly buttons
3. **Compare Data**: View current vs previous period statistics
4. **Hover Interactions**: Interactive feedback on all clickable elements
5. **Responsive Experience**: Seamless experience across all devices
## 💡 Key Implementation Details
- **Data Management**: Efficient JSON data parsing and state management
- **Responsive Grid**: CSS Grid layout that adapts to different screen sizes
- **Event Handling**: Clean event delegation for time period switching
- **Performance**: Optimized DOM manipulation and minimal reflows
## 🌟 Future Enhancements
- Add data persistence with localStorage
- Implement user authentication and multiple profiles
- Add ability to edit and update time entries
- Include data visualization with charts
- Add drag-and-drop functionality for activity cards
- Implement dark/light theme toggle
## 📱 Browser Support
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
## 📄 License
This project is for educational purposes as part of the Frontend Mentor challenge.
## Author
- GitHub - [@gumballoon](https://github.com/gumballoon)
- Frontend Mentor - [@gumballoon](https://www.frontendmentor.io/profile/gumballoon)
- CSS Battle - [@gumballoon](https://cssbattle.dev/player/gumballoon)
## 🙏 Acknowledgments
- Frontend Mentor for the design and challenge
- Design assets and requirements provided by Frontend Mentor
- Challenge inspiration from real-world time tracking applications
---
**Frontend Mentor Challenge**: [Time Tracking Dashboard](https://www.frontendmentor.io/challenges/time-tracking-dashboard-UIQ7167Jw)