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

Adarsh 1,560

@adram3l3ch

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


Feedbacks will be appreciated :)

Community feedback

@RobVermeer

Posted

Looking good Adarsh! Love the smooth animation =)

Some feedback about the semantic meaning of your HTML, I think it's better to use a form as wrapper for the component and use radio buttons for the different rating options. This way you can have a submit button that submits the form, which will result in simpler JS (only a submit event listener is needed).

A bonus is that you then can make the radio group required, so the browser can do the validation for you.

This also makes the component accessible for screen-readers and for users navigating with keyboard =)

Marked as helpful

2

@Priyanshii677

Posted

Your code is so clean and smooth. Wish I could the same as you!!!! If you have time please connect with me on slack and tell me how can I improve :)

Thanks!!

Marked as helpful

1

Adarsh 1,560

@adram3l3ch

Posted

@Priyanshii677 Hi priyanshi, Thank you so much for your valuable feedback.Im not too active in slack, if you got telegram u can ping me there.

1

@FahimEcho

Posted

good work buddy.. keep it up. Where did you learn to do the animations and such? I'm very interested in picking up some skills in that area! Thanks. :)

Marked as helpful

1

Adarsh 1,560

@adram3l3ch

Posted

@FahimEcho Thank you Fahim. Honestly speaking i haven't practiced any of these website animation before. Im from a graphic designing background and I used to edit videos so key frames and animation were not strange to me while learning web dev. I am just using my knowledge of video editing in this field 😀😀.

1

@waldrupm

Posted

Well, you're better than me so I can't offer any real feedback, it's great! Where did you learn to do the animations and such? I'm very interested in picking up some skills in that area! Thanks. :)

Marked as helpful

1

Adarsh 1,560

@adram3l3ch

Posted

@waldrupm Thank you Michael. Honestly speaking i haven't practiced any of these website animation before. Im from a graphic designing background and I used to edit videos so key frames and animation were not strange to me while learning web dev. I am just using my knowledge of video editing in this field 😀😀.

1

@waldrupm

Posted

@adram3l3ch Well it looks great. Just noticed the solution report is telling you to add a level 1 heading. I just made the "How did it go?" text an H1 in my project and styled that to match and it got rid of that accessibility hit. :)

Marked as helpful

1
Adarsh 1,560

@adram3l3ch

Posted

@waldrupm Thanks to pointing out that , I will fix it :)

0
Sboon 90

@Sboonny

Posted

Nice animation and neet code, well done. 👍

Marked as helpful

1

Adarsh 1,560

@adram3l3ch

Posted

@Sboonny Thanks buddy :)

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