Animated & Semantic Interactive Rating Component Using Radio Buttons

Solution retrospective
This is my first challenge I tackled w/ a form. I really wanted to make this semantically accurate, so opted to use the use the <input>
element w/ radio buttons and took advantage of value
, name
, id
. Unlike previous challenges where buttons were purely aesthetic, this button actually served a purpose.
Finally, I added my script
at the end of my page before the </body>
because this isn't the type of page which requires heavy JS.
Next, I took advantage of transition
in my CSS to animate the buttons a little bit. I also used :checked
to highlight the selection. Because of the Javascript, I had to use id
, which isn´t something I often have to do when building static websites. It was a nice change of pace. I also decided to add an animation to move from one section to the next when the user selects a rating and gets the confirmation by creating some keyframes and sliding the page from right-to-left.
Having considerable experience w/ JS, it wasn't too difficult for me to figure out how to go about going from one section to the next. I opted for an Eventlistener
to wait for the "click"
and attributed the radio button's value to my selection. For a little extra, I decided to add a prompt if no selection is made to indicate to the user that they didn't select a rating. I simply hid the .hidden
class where necessary. Because InnerHTML
should be avoided where possible, I opted to use innerText
instead.
Please log in to post a comment
Log in with GitHubCommunity feedback
No feedback yet. Be the first to give feedback on Gabriel Montplaisir's solution.
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