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 tracking dashboard solution

#tailwind-css#fetch

@GabrielFMPinheiro

Desktop design screenshot for the Time tracking dashboard coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Community feedback

P

@Miculino

Posted

Well done on building out this design, Gabriel!

Even though you shouldn't stress yourself too much about pixel perfection, your solution looks near pixel-perfect compared to the original design.

On the larger screens, there seems to be a little scaling issue with the dark blue card. https://prnt.sc/24bssig

In the screenshot, you can see that it doesn't fully cover the corners and a bit of the card's color can be seen.

Also, in your Javascript code, you could separate that entire template literal for the section and store it into another section and just pass the data as function arguments.

Marked as helpful

1

@GabrielFMPinheiro

Posted

@Remus432 Firstly, Thank you Remus! =)

"In the screenshot, you can see that it doesn't fully cover the corners and a bit of the card's color can be seen."

I saw that. Do you have some idea to fully cover? I didn't understand why this was hapenning;

"Also, in your Javascript code, you could separate that entire template literal for the section and store it into another section and just pass the data as function arguments."

Here, are you saying to use the destructuring?

0

@Robert-Rynard

Posted

Wow looks great! If you want to capitalize the first letter without javascript you could also just style it with css using text-transform: capitalize which I think in tailwind you would add the class uppercase.

Marked as helpful

1

@GabrielFMPinheiro

Posted

@Robert-Rynard I hadn't even thought about it! Thanks for the support.

0

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