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 Vainilla JS

Marcos 40

@Toxgem

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


-Is the code clean enough? -What changes should i be doing to keep best practices? -What would be your approach to this challenge? I wonder what other ways are to clear this one, maybe the usage of buttons, and how many tags i am missing to make it simpler.

Community feedback

Sean Gray 690

@seangray-dev

Posted

Hey Marcos! Looks pretty good

A better way to build this is to create a Form element and inside of it, the “rating buttons”would be built using Radio Input elements with Label Elements attached to it.

After submitting the illustration margin collapses with your rating div. You could try this instead:

.thanks {
display: flex;
flex-direction: column;
} 

Hope this helps! Keep it up

Marked as helpful

1
User9511 370

@User9511

Posted

I would change your .container to this

.container {
        max-width:25rem;
        background:linear-gradient(14deg, rgba(23, 30, 40, 1) 0%, rgba(33, 40, 50, 1) 90%);
}
1

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