https://github.com/fatemzh/time-dashboard

A responsive time tracking dashboard built with HTML, SCSS, and JavaScript, featuring dynamic JSON data and CSS Grid layout. Users can switch between daily, weekly, and monthly stats with a mobile-first design for optimal viewing on all devices.
https://github.com/fatemzh/time-dashboard

frontend-mentor-challenge grid-layout mobile-first scss-framework

Last synced: 10 days ago
JSON representation

A responsive time tracking dashboard built with HTML, SCSS, and JavaScript, featuring dynamic JSON data and CSS Grid layout. Users can switch between daily, weekly, and monthly stats with a mobile-first design for optimal viewing on all devices.

• Host: GitHub
• URL: https://github.com/fatemzh/time-dashboard
• Owner: fatemzh
• Created: 2024-08-13T09:52:11.000Z (6 months ago)
• Default Branch: main
• Last Pushed: 2024-08-22T09:42:12.000Z (6 months ago)
• Last Synced: 2025-02-11T14:58:14.363Z (10 days ago)
• Topics: frontend-mentor-challenge, grid-layout, mobile-first, scss-framework
• Language: SCSS
• Homepage: https://fatemzh.github.io/Time-Dashboard/
• Size: 206 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Time Tracking Dashboard

A responsive time tracking dashboard that dynamically updates based on user-selected timeframes (daily, weekly, monthly). Built with HTML, SCSS, and vanilla JavaScript, this project emphasizes CSS Grid layout skills, data manipulation with JSON, and mobile-first design principles.

## Welcome! 👋

This is a solution to the [Time Tracking Dashboard challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/time-tracking-dashboard-UIQ7167Jw).

## Overview

This challenge was to build out a time tracking dashboard that allows users to switch between daily, weekly, and monthly stats while adapting to different screen sizes.

Users are able to:

- Switch between viewing Daily, Weekly, and Monthly stats

- View the optimal layout for the site depending on their device's screen size

- See hover states for all interactive elements on the page

# Frontend Mentor - Time Tracking Dashboard

![Design preview for the Time Tracking Dashboard coding challenge](./design/desktop-preview.jpg)

[Frontend Mentor](https://www.frontendmentor.io) challenges help improve coding skills by building realistic projects.

**Requirements for the challenge: HTML, SCSS, and JavaScript.**

## The challenge

The challenge was to build out this time tracking dashboard and get it looking as close to the design as possible, while also practicing working with JSON data.

### Links

- **Solution URL:** [GitHub Repository](#) *(replace with your GitHub repository link)*

- **Live Site URL:** [Live Site](#) *(replace with your live site link)*

## My Process

### Built With

- Semantic HTML5 markup

- SCSS for enhanced styling and modular CSS

- CSS Grid for the layout structure

- Mobile-first workflow

- Vanilla JavaScript for DOM manipulation and data handling

### What I Learned

In this project, I enhanced my skills in:

- **CSS Grid:** Implementing complex grid layouts that adapt to different screen sizes.

- **JSON Data Manipulation:** Pulling and dynamically updating content based on user interactions.

- **Responsive Design:** Ensuring that the dashboard is fully responsive across various devices.

### Continued Development

Moving forward, I plan to:

- Explore more advanced CSS Grid techniques for even more complex layouts.

- Improve JavaScript data manipulation techniques to handle more dynamic content.

- Optimize the dashboard's performance and responsiveness across all devices.