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 tracker

@efs0-cod3

Desktop design screenshot for the Time tracking dashboard coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


First time using JSON... Any feedback will be appreciated. Thanks in advance

Community feedback

P

@Miculino

Posted

Hey @efs0-cod3

Good job on completing the challenge. It looks pretty good and the main feature works as expected. A few suggestions based on your final solution:

  • .cont__info doesn't fully cover the background color of the parent element around the edges. You can see a little bit of the color

  • Responsive design needs some adjustments. You should implement the media query sooner and also make sure everything is vertically and horizontally centered

  • Try to avoid fixed px based width and heights values. It's a bad practice when trying to build responsive layouts. Build your layout around the available content and try to use relative units such as rem, em, vh / vw, %

  • You already have all the data inside the data.json file, you don't need to write it again in your JS file

  • Avoid using innerHTML property. It's not a safe option as it can lead to security risks. The appendChild() method combined with DOM Nodes is a much better approach to this issue

  • Use const instead of let when declaring a function expression

Hope this helps. Keep up the good work!

Marked as helpful

1

@efs0-cod3

Posted

@Remus432 Thanks for your time and your point will do the fix. Thank you again!

1
P

@Miculino

Posted

@efs0-cod3 happy to help! ;)

Let me know how it goes!

1

@efs0-cod3

Posted

@Remus432 hey! I could improve a lot of elements, but I couldn't make it with <appendChild()>. I'll be glad if you point me in the right direction. Again, thanks for your feedback. Hope all well on your end!

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