Frontend Mentor - Time tracking dashboard solution

This is a solution to the Time tracking dashboard challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Extra challenges
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

Overview

The challenge

Users should be able to:

• View the optimal layout for the site depending on their device's screen size.
• See hover states for all interactive elements on the page.

Extra challenges

As a bonus I want to achieve the following extra challenges:

• The page must be accessible according to WCAG 2.1 standards, things like color contrast, clear element focus and necessary aria attributes.
• I want to add minimal animations to the page, such as a starting animation when the page loads and hover animations on the category cards.
• I took on the extra challenge of using the data from the data.json file and displaying it according to whether the user is viewing daily, weekly or monthly stats.

Screenshot

Links

• Solution URL
• Live Site URL

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• WCAG 2.1 best practices
• CSS Animations
• JavaScript Fetch API
• Astro - Astro Static Site Generator
• Accessible Astro Starter - My own starter template for Astro

What I learned

• I learned that when adding transforms on an element, it creates its own stacking context. I wanted to add a fade-in animation on my dashboard cards. The cards have a background with an icon in the ::after pseudo element and are stacked behind the card using z-index: -1;. However, when you use a transform on the element it creates its own stacking context, causing the z-index position not to work as expected. A solution for this is to wrap the element containing the ::after pseudo element in a container and apply the transform there so that your original stacking context is not changed. This Stack Overflow solution describes it in great detail.
• I learned how to get data from a .json file and display it on the page depending on which data the user wants to see. I used the JavaScript Fetch API to make this work.

Continued development

• I could maybe add an extra grid view for tablet sizes, with the category cards two by two and the user card spanning three rows. Added.

Useful resources

• Stacking contexts and z-index - The solution I applied for using transforms on elements that have a negative z-index positioned ::after pseudo element.
• JavaScript Fetch API - Used to get the data from the .json file.

Author

• Personal Website
• Frontend Mentor Profile
• LinkedIn Page
• GitHub Projects
• NPM Packages
• CodePen Creations