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

Responsive solution with CSS grid and flexbox with ONE media query.

Ricardo 440

@ricardo1003

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


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

I am proud of the way that I manipulated the DOM to change the information regarding to which button is selected.

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

My main challenge was making the info of each section match the selection of the buttons. At first I tried to do it the same way I did with the buttons themselves, by hiding all the types of information (daily, weekly and monthly), and then only revealing the selected ones. This worked with the buttons so there is only one selected, but it didn't with the matching. At the end I just made it hide the elements whose index is not the same as the selected button. (I might not have explained well but you can see what I mean by looking at the code)

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

I think that there might be another way of making only one button being focused, I mean, another way than the one I do. If you think that there was a better way of doing the scripts, feel free to tell me!

Community feedback

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