Submitted over 2 years ago

Time Tracker Dashboard

Shonuff• 280

@TheShonuff

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

Here is my solution. If anybody has some input on how to better manage the gird row height I would appreciate the input. My bottom row is slightly larger than the top row. If I adjust the height from the first grid that spans 2 rows it doesn't seem to affect the grid row proportionality.

My javascript is super ugly. I feel like it's the equivalent of using a sledgehammer when a ball-peen hammer would have done the job. It works but...yeah. I look forward to looking through other solutions to see how they came to a solution. Cheers!!!

Community feedback

Irina Lagutina• 490

@FoxMalder-coder

Posted over 2 years ago

Hi! To make grid row the same height use grid-template-rows: 1fr 1fr or repeat(2, 1fr). Also I'v suggest to use some intermediate grid between small screen and desktop, and center content on large screen. About js - first cut styling from js to css (h6.daily, h6.weekly, h6.monthly have same styling for passive state and active state - use one class for passive, for example, selector, and another one for active, for exemple, selectorActive; and then just toggle class in js). Another thing is that your doing the same in all three function - try to pass value (daily, monthly, weekly) inside just one function. p.s. strange to see camelCase in html...

Marked as helpful

Shonuff• 280

@TheShonuff

Posted over 2 years ago

@FoxMalder-coder Thank you for taking the time to look at my code and write a response. I'll attempt to implement your suggestions in a fork soon. As for the camel casing in HTML... yeah it's an ugly habit I need to break. I camelcase everything.

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