Animated & Semantic Interactive Rating Component Using Radio Buttons

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.