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

Learning JSON and Fetch API (vanilla js)

Benja.min 740

@BenjaDotMin

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


Hello all! I decided to up the stakes and try my hand at a Junior level challenge.

Here I learned how to:

  • fetch data from a json file
  • use the data to populate the DOM content (vanilla js, no frameworks)
  • swap the content on click, driven by the available data

As always, any time spent is very much appreciated!

Community feedback

@nkhatri7

Posted

This is really well done! The javascript code is really efficient and just done well overall. The design is also really good, the only thing I'd call out is when the screen width is between around 700px to 1000px, the period filters are too spread out. I think it would be better if you did justify-content: center and then spaced them out a bit with margin (but still keep them rather centralised). Other than that, I can't really fault your code and design, keep up the good work!

Marked as helpful

2

Benja.min 740

@BenjaDotMin

Posted

@nkhatri7 Yep I had the same thought! Sadly those sizes are within tablet dimensions, so would be quite common to see it. But that could be a great way to fix it, thanks!

Thanks so much for the kind words, it helps!

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