Submitted 2 months ago

Time Tracking Dashboard

Zakhar Polikarpov• 260

@ZPolikarpov

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Time tracking dashboard

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?

Getting the automatic card generation via .map of the array. I wanted to have the buttons for timeframes be automatically generated based on the data received too, but I had issues reading out the keys properly and decided not to invest too much time into it.

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

Getting the grid to look right while having a presentable tablet version. For that I limited the max columns on the grid to 4 and manually adjusted the width of my columns to match mobile/pc sizes respectively.

Getting the position right on the background icons of the colorstrips seemes to be a bit of a magic number thing for me where I just used some % values for mobile/pc to make it look right.

All in all quite a lot of media queries here.

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

For some reason htmlPurge from vite-plugin-purgecss purges my second data on my cards [data-category]. What causes this to happen and how do I address this? I just removed PurgeCss to get my code to work in production, but this is not a good long-term solution.

Community feedback

Gwenaël Magnenat• 1,210

@gmagnenat

Posted 2 months ago

Hi, congrats on completing this challenge !

I recommand you check the documentation about The tabs pattern its actually very interesting. To improve the accessibility of your solution, there are special case to take care of regarding keyboard navigation.

tabs should be navigable using arrow keys
when pressing the tab key you need to get directly to the content of the selected tab

By reading your code, I think your use of headings isn't optimal. You should follow a structured and ordered way (h1, h2, h3...). Using h1 in the card could be changed to a simple <p> element or a <time> element.

Let me know if you have specific questions.

Happy coding !

Please log in to post a comment

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