Responsive solution with CSS grid and flexbox with ONE media query.
Design comparison
Solution retrospective
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 GitHubJoin 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