Interactive Rating Component
Design comparison
Community feedback
- @grace-snowPosted over 1 year ago
Hi
I'm afraid you need to rewrite the html on this (which will break the styling and js)
This must be done using a fieldset of radio inputs. There is no other correct html for this challenge, it's one of those rare times in front end where there is only one correct way to do it.
Once the html is fixed, you can use this to help you style the radios: https://moderncss.dev/pure-css-custom-styled-radio-buttons/
Once that's done the good news is the js becomes far shorter and simpler. All it needs is to show the thank you panel and use the chosen value from the form submit event. Presuming your radios would have a name like "rating" you'd get that chosen value with
this.value.rating
in the submit event.If you are going to replace all the html content of main like this, you need an aria-live attribute on main. But I would have all the html for the thank you there in the html already and only change the "you chose" value in js if it was me
Marked as helpful0 - @MohamedIbrahim13Posted over 1 year ago
I'm really focusing right now on the JS logic of the this challenge.
0 - @MohamedIbrahim13Posted over 1 year ago
At the moment i wrote, I saw no other way to do it with HTML. It may be longer and many line of code to write but it worked. I will try this way. Thank you for help!
0@grace-snowPosted over 1 year ago@MohamedIbrahim13 it does not work. It is completely inaccessible. You must change it if you want it to work properly.
I am finding it concerning how fast you are pushing through multiple challenges without learning from the feedback, refactoring fully before moving on and embedding good coding practices. This is not the way to benefit from this platform, you are hugely missing out if you keep going at this pace
0
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