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

Max Kaiser 300

@maxkaiser100

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


I used a funny work around to un-color the "Daily", "Weekly", "Monthly" buttons. After they were clicked on. You'll note it fails if you click the Daily and then the Monthly directly after. I just couldn't figure out how to un-color them if they weren't the <li> clicked on. Any help would be great here.

Also, probably would be better if when you initially loaded the page it was already set to Daily - any idea how to do that?

Otherwise, this was a very challenging one that really stretched my JS abilities. It was also the first time I worked with outside JSON so that was really exciting.

Community feedback

P
Ctrl+FJ 750

@FlorianJourde

Posted

Hey man !

Have a look on your GitHub, I opened a new pull request ! This time, I mainly focused on fixing your algorithmic problems, to train myself in JavaScript.

Well, you managed to deal with the .json, congratulations for that ! Also, you seems pretty comfortable with fetch() methods and stuffs. I just tried to reoganize it, to avoid repetition in your code. But that wasn't bad at all !

The main thing which has bothered me was about coloring the selected text. Usually, we use to manipulate the DOM, and add/remove active classes. By this way, you don't just change the color, but you add a class on the DOM element, so your able to do many things with that, and you can interact with the page itself : make some elements transparents, like a navbar if scroll is on-top, move elements, or other really interesting things about front-end possibilities.

Beside that, I liked the fact that you tried to generate your page with your JSON object on loading ! It's not the way that I did that when I resolved that exercice months ago, but I found it clever ! The trick that I used to do that here is maybe not the most efficient, but at least, it works...

Just one last thing : be attentive to HTML errors that FEM calculate for you... It's very important to get a right structure first, before to focus on other langages. Bad HTML semantic has a pretty big impact in SEO, try to get a look to issues, next time !

Tell me if you learned some stuffs, have a nice day !

Marked as helpful

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