Design comparison
Solution retrospective
During my first try with this project, I did not follow a straight structure from top to bottom and was randomly adding stuff in the hopes it would work. This was especially at the JS part in which I was trying to use mouseover events. It got me stuck. When checking a video about this solution it gave me more clarity on how to approach this project better and solve the issues in CSS for example: hover, focus, and hidden. This made it a lot easier.
I also used the button element in HTML instead of creating custom buttons via div.
I learned the following: using 'hidden' in a class and changing display = none in CSS I can hide one part and show only the necessary part on the screen.
Better understanding using querySelector and getElementById. Using the method for.Each()
By changing the rate I can use textContent or innerHTML. By doing some research, textContent is more suitable here because it's only using plain text.
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