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

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. :)
Please log in to post a comment
Log in with GitHubCommunity feedback
- @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 -
- @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?
- @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