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
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Overview

The challenge

Users should be able to:

• View the optimal layout for the site f0r laptop view(1350px) and mobile view(375px)

• Switch between viewing Daily, Weekly, and Monthly stats

Screenshot

Links

• Solution URL: Code Git hub
• Live Site URL: Time Tracking Challenge Frontend Mentor

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• JS

What I learned

I Learned a couple of things about CSS

1. Be careful with giving z-index to elements as it caused troubles on selecting the child elements
2. How to utilise json file in plain JS.

Continued development

MY JS code i feel definitely needs some improvement, i will think of ways to utilise event propagation to make my code follow DRY Principle.For now it works but i'll definitely try to refactor the JS Code to make it more efficient and scalable

Useful resources

• Css tricks flex box - This helped me gente reminder of css flex box's properties.
• CSS tricks grid - THis helped me with gentle reminder of CSS grid;s properties.
• Stack overflow- - THis helped me with ways to utilise JSON file in JS along with discussion with my friend Vinit.

Author

• Website - Ajay
• Frontend Mentor - AjayBAins
• Twitter - AjaygetBusy

Acknowledgments

I'd like to thank you my friend Vinitk for guding me about different ways to utilise json file in a JS file. I'd also like to thank Stackoverflow and CSS tricks and MDN Docs for refreshment of concepts.