Submitted
@yorchAdalbert
In order to get the user rating input, I used radio buttons and modified its style. I know this isn't the best option to solve this problema due to I have to modify the label a lot to make them look great inside the radio buttons and when I resize the screen this labels get odd. I Know there should be another better solution for this challenge, however, this is the only solution that crossed my mind. Thanks for your time. Any feedback will be welcome!
@VCarames
Posted
Hey there! 👋
Using input radios for the ratings is the correct way of doing this challenge.
This will help with the styling:
https://moderncss.dev/pure-css-custom-styled-radio-buttons/
If you have any questions or need further clarification, feel free to reach out to me.
Happy Coding!🎄🎁
Marked as helpful
@RJ3605
Posted
Hi Jorge,
There are many ways to do every project. It's right as long as it works. That said, I can shine some light on how to do this with the <button> tag instead of <input type="radio">. This method is good if you want to practice JavaScript.
First set up buttons 1-5 as you have done with styling and all for their static and :hover attributes. Then create a class="active". When the active class is added to a button is should look like yours does when it is selected. From there you need to add an event listener in JavaScript. The event type should be 'click'. The necessary order of events will be to remove the active class, if present, from any of the buttons. Then you will need to add the class to the selected button. After that you will want the event to change the text content of the second page to include the number of the clicked button.
Please feel free to check out my solution below for my code if you're interested. I used radio inputs but also used .forEach() to practice JavaScript. https://www.frontendmentor.io/solutions/interactive-rating-component-using-css-flexbox-and-base-javascript-HhhDgY0C8G
If you have any questions or if my comment is unclear, please feel free to reach out to me and I would be happy to explain more thoroughly.
Marked as helpful
@VCarames
Posted
@RJ3605
Using buttons is not the correct way of doing this challenge especially for accessibility.
By using buttons a screen reader/voice over will state the following "button 1", which does not provide much detail.
But by using radios you get the following "you are currently on a selected radio button, 1 out 5". This provides more detail for users.
Remember not all users have perfect eyesight.
As for the JS the event listener should be a submit on the form not click.
Marked as helpful
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
