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

@NikolaiKoz

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


This is a nice little project to practice handling user interactions and updating the DOM. It is a simple project to implement the new technologies that I am learning in a single project. This is my first project with Sass, the truth is that I am proud of the process, I also use Sassdoc and Jsdoc for the documentation, for the JavaScript I use Babel and Webpack to package the modules in a single js file. It was difficult, it was the first time that I handled so many packages together, in addition to the complexity of the IT CSS architecture and the SUIT CSS methodology, I looked for this project because it was simple, in such a way that I could concentrate more on the new tools that I am learning. .

Community feedback

T
Grace 29,330

@grace-snow

Posted

Hello

It’s very important to get html right on challenges. This must be a form with radio inputs, not a list of buttons. This is essential I’m afraid.

But the good news is once that’s done the js part becomes tiny and simple.

This challenge really only needs a few lines of js. It’s almost all standard html form functionality and that’s what you should be practicing here.

A loader isn’t necessary and is actually breaking your solution at the end by making the thank you content disappear.

Don’t over-engineer these things.

If displaying the thank you on the same screen and generating the thank you markup with js like you are doing at the moment, you would need a holding element present on the original page with an aria live attribute on it so the thank you gets announced to screenreader users. I also think you’d need to programmatically move focus to the thank you panel and make it persist.

Golden rule - no unexpected changes of context for users.

Once this has the correct html (form with radios) all the js needs to do is

  • listen for submit
  • get the value from the input name
  • use that in the thank you
  • hide first panel, show second one

Marked as helpful

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