Submitted about 1 month ago

Time tracking dashboard solution using grid and javascript

AllisonFavour•150

@AllisonFavour

Preview site View code

This is a solution for...Time tracking dashboard

HTML
CSS
JS

2junior

Design comparison

SolutionDesign

Solution retrospective

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

Handling the manipulation of the DOM and populating the UI with the appropriate data.

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

Populating the DOM with the JSON data. I initially wanted to render the UI using Javascript but i realized it was less efficient in this case, so i decided to structure the HTML and use css to style them and just manipulate the neccesary parts of the UI with JS

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

I am proud of using CSS grid and Javascript to complete the challenge

Community feedback

P
Lovro Peraić•330
@loki-pepePosted about 1 month ago
Well done. I think your HTML could have been written a bit better semantically and there is an issue with your CSS.

I can't comment too much on it since I've never used SASS, but the main problem is when you set the font-size of the :root element, you inhibit the user from setting a default size in his browser settings, which would be troublesome for visually impaired users. I would recommend not touching the font of the root element and just use rems assuming the default size is 16px.

Also, your sizes don't really match with the design, and the whole UI should be centered, so you could do with a few tweaks if you wanted to make it perfect
0

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