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 Tracker Dashboard using JS

@induwara-thisarindu

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


What are you most proud of, and what would you do differently next time?

I am proud of how much I have improved with css and js. 🎉

What challenges did you encounter, and how did you overcome them?

I had some trouble understanding fetch but after watching some tutorials I kind of got it but still don't get it and not that comfortable with it

What specific areas of your project would you like help with?

Mostly with the JS fetch code any suggestions to improve would be helpful

thank you 😊

Community feedback

alvarozama 360

@alvarozama

Posted

Everything looks mostly good, specially in terms of design and styling, but there are a few thing I'd like to point out:

  1. The color of the "Report for" text is a little off. To better match the example design, you should try coing with Pale Blue - hsl(236, 100%, 87%). 2 ) Both the cointainers for the stats and the ellipses within them should have some sort of active state, which appear to be missing.
  2. When clicking on the different timeframe buttons, the placement of the values within their respective container is not quite right. The category names on top of each container (work, play, study, etc.) disappear and are replaced by the stats belonging to the previous timeframe, while the container of the previous stat on the bottom of the container are changing. 4 ) In line with the previous point, while you're correctly substituting the numerical value of the stat, you should also replace the text pertaining to the timeframe. On your page, we always se the stat as "last week", but you shoud change the text to "last month" or "last day/yesterdy" depending on the selected timeframe.
  3. The coloring of the icons of some categories (the briefcase and the text message) are a bit off.

All in all, correcting those thing shouldn't be too hard and by doing so you'll go from having a pretty good page to having a flawless one. Good job nonetheless. Keep up the good work!

0

@induwara-thisarindu

Posted

@alvarozama oh yes! how silly of me I forgot about the active status with the excitement 😊 Thanks for pointing it out

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