Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Time tracking dashboard with dynamic data

#sass/scss#accessibility
Prince Roy 1,210

@iprinceroyy

Desktop design screenshot for the Time tracking dashboard coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hey community members I've completed this time tracking dashboard, it took longer than usual. But I think it's all worth it.

I built with some different intuition i.e.

  • The dashboard can dynamically render new data provided in the JSON file.
  • Rotate horizontally to 360 degrees on click event.

Any feedback is heartily welcome :)

Community feedback

Elaine 11,420

@elaineleung

Posted

Hi Prince Roy, well done completing this! 🙂 I checked it out just now, and it looks like your grid is off to the left side and doesn't look like your screenshot, so you might want to see what happened there. I like your use of insertAdjacentHTML and I also found it insightful how you wrote some of your functions.

Two quick suggestions I have are, you can use cursor: pointer for the clickable timeframe labels, and also I think the "Last week" label in the cards actually should be changeable to reflect the time frame selected (e.g., "Yesterday" for the "daily" data). Great work here once again!

Marked as helpful

1

Prince Roy 1,210

@iprinceroyy

Posted

Thanks for your feedback @elaineleung. I've updated it.

1

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord