Submitted 2 months ago

Time Tracking Dashboard

N1Dovud• 170

@N1Dovud

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?

I was able to dynamically change the content of the html elements, while also dynamically retrieving html elements using a loop. I guess my code was pretty efficient. The next time I would try to spend less time on solving problems.

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

The report div and badge divs were supposed to overlap but they did not, I found out that I needed to add position relative to report div and make it go up a bit relative to itself.

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

I would love to get feedback on accessibility, responsiveness of the website, and clarity and cleanliness of my JavaScript.

Community feedback

Hexerse• 460

@Hexerse

Posted 2 months ago

For responsiveness you may want to add something like a grid-template or grid-auto-rows fit-content.

For card why not put the height and widths at 100% and use grid to manipulate them? Since it will fit the grid. Grid is also responsive to the screen due to fr causing the children of the grid to be more responsive.

Try to experiment with less static values and see if you responsiveness increases.

For the user buttons, justify-items: space around. Helps you put space around the buttons evenly. Which will look more like the practice picture.

I hope this helps.

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