Skip to content
Submitted over 2 years ago

Interactive Rating Component (SASS + JS + Mobile-first + BEM)

bem, sass/scss, accessibility
Melvin Aguilar 🧑🏻‍💻•61,020
@MelvinAguilar
A solution to the Interactive rating component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hi there, I’m Melvin and this is my solution for this challenge. 👋

  • I created some simple animations. I would greatly appreciate any reading resources that can improve the animations.
  • What tips would you give me to improve the accessibility of the page?

Any feedback on how I can improve and reduce unnecessary code is welcome!

Thank you. :)

Code

Please log in to post a comment

Log in

Community feedback

  • Precious Nkwor•440
    @Jeen-Presh

    Hello melvin

    • Nice solution, I'm currently learning javascript now, so I decided to do a light project to practice dom manipulation.

    • Also I love your solution, and I'm using it to learn as well by breaking it down which helps me to learn more about accessibility, I noticed you also use sass and the 7-architecture system which is pretty cool. I love sass also.

    • The only thing I wanted to mention is the use of import in sass, I was using them also until I found out it has been deprecated, and instead we now have to make use of @use and @forward.

    if you are interested in learning @use and @forward you can use this link. Kevin powell.

    Have fun

    Marked as helpful
  • Kilyungi•100
    @devkilyungi

    Hello Melvin. Your solution is so cool. I especially like the animations.

    I have seen in your code you've used so many selectors to specify their margin and padding as 0. Why not use the '*' selector to select everything, and then specify the margin and padding as 0 from there.

    I am also having an issue with understanding how to use the radio buttons to create the rating values. In my solution I used a bunch of divs instead. Can you give a brief explanation of how you approached coding that form section?

  • Precious Nkwor•440
    @Jeen-Presh

    Hello melvin

    • Please I would like to know how you knew the exact bg colors for the card background, is there any resource you can recommend for me to read?

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