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)
• Built with
• What I learned
• Continued development
• Useful resources
• Author

Overview

Time tracking dashboard using HTML, SASS, and JS.

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
• Switch between viewing Daily, Weekly, and Monthly stats

Screenshot

Links

• Solution URL: (https://github.com/deepak539/Time-tracking-dashboard)
• Live Site URL: (https://deepak539.github.io/Time-tracking-dashboard/)

Built with

• Semantic HTML5 markup
• CSS custom properties
• SASS
• Flexbox
• CSS Grid
• Desktop-first workflow
• Media queries
• JavaScript

What I learned

-grid properties

Continued development

I still have repeated js code which i want to improve.

Useful resources

• (https://css-tricks.com/snippets/css/complete-guide-grid/) - This helped me to understand grid properties.
• (https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/JSON) - This is an amazing article which helped me to understand how to fetch local json data.

Author

• Website - Time tracking dashboard
• Frontend Mentor - @deepak539
• Twitter - @DepakAsnani17