Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Interactive rating component using flex box and DOM

#accessibility
Muhammadh 1,140

@Mr-jaw

Desktop design screenshot for the Interactive rating component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


3rd Project

This is an Interactive rating card component that uses flexbox and DOM

1.Are there any accessibility tweaks that I can improve?

2.Any bad coding in my javascript?(Because I'm not still much familiar with js. still learning...)

solution URL: Git-hub-repo

Live Site URL: Site

Thank you! 😊

Community feedback

Sandro 1,170

@sandro21-glitch

Posted

Hi Name

Here are few suggestions to improve the code

Add aria-labels to the buttons to improve accessibility. For example, you can add aria-label="Submit rating" to the submit button.

Use const instead of let when declaring a variable that won't be reassigned.

Add comments to explain what the code does.

Happy Coding

2

Muhammadh 1,140

@Mr-jaw

Posted

@sandro21-glitch Thanks for the review 😊

yes i forgot to add comments. next time i'll do it.

1
P
Grace 27,950

@grace-snow

Posted

@Mr-jaw I'm afraid you need to change this. It must not be a load of buttons. This must be a form with a fieldset of radio inputs; with js listening for form submit. Once that's done the js will need to change. This challenge only needs a few lines as most is handled by default form behaviour.

You also need to prevent submission if the user has not chosen a rating yet.

0
Muhammadh 1,140

@Mr-jaw

Posted

@grace-snow

Noted

thanks for pointing out 😊 I'll look into it

0

Please log in to post a comment

Log in with GitHub
Discord logo

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