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

HTML5, CSS, Flexbox, CSS Grid, JavaScript

#jss

@cassiality

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


Hello!!

I worked hard to make this even though it was simple.

Please, all suggestions are welcome!

Community feedback

Adriano 33,970

@AdrianoEscarabote

Posted

OI Cassia, tudo bem?

Parabéns pelo resultado do seu projeto, é muito legal acompanhar você evoluindo.

Tenho algumas dicas para te dar, primeiro a melhor forma de fazer esse desafio seria usando um form, com os botões sendo um input:radio, e adicionando um evento de submit no form. Fazendo isso teríamos um código mais bem estruturado e realista!

Se quiser ajuda, fique a vontade para me chamar!

Marked as helpful

1

@cassiality

Posted

@AdrianoEscarabote Oi Adriano, bom dia.

Muito obrigada pelo apoio e por sempre estar de olho e me dando dicas realmente importantes!!!

1

@antoniornneto

Posted

Hey Cassia, please let me share with you some suggestions thats somebody share with me to improve your code, about the buttons.

If you have any questions or need further clarification, feel free to reach out to me.:

To ensure that the "rating buttons" are fully accessible 💯, they need to be built using a form ⚠️.

Everything will be wrapped inside a fieldset which will have a legend that is visually hidden using CSS. Inside, there should be five input radios and each input should have a label attached to it to make the “ratings” accessible. The last thing you will want to include will be a button so users can submit their choice.

Once the top is implemented , for your JS, the eventListener should be on the form ⚠️ as a submit.

Happy Coding! 🎆🎊🪅

Marked as helpful

1

@cassiality

Posted

@antoniornneto Hello Antonio, good morning.

Thanks for the tips, I'll be experimenting to implement and make it even better.

1

@antoniornneto

Posted

@cassiality se precisar de ajuda, minhas redes sociais estão disponíveis no meu perfil! Sinta-se à vontade para entrar em contato.

0

@cassiality

Posted

@antoniornneto Muito obrigada!! Ajuda é SEMPRE bem vinda.

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