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
Log in with GitHub

Submitted

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

#bem#sass/scss#accessibility
Melvin Aguilar 🧑🏻‍💻• 61,440

@MelvinAguilar

Preview siteView code
Desktop design screenshot for the Interactive rating component coding challenge

This is a solution for...

Interactive rating component
  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison

SolutionDesign

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. :)

Community feedback

Precious Nkwor• 440

@Jeen-Presh

Posted

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

0
Melvin Aguilar 🧑🏻‍💻• 61,440

@MelvinAguilar

Posted

@Jeen-Presh Thank you for the suggestion and for taking the time to write it! I will definitely watch the video. I really appreciate your advice.

0
Precious Nkwor• 440

@Jeen-Presh

Posted

@MelvinAguilar You are welcome. Have fun

0
Kilyungi• 100

@devkilyungi

Posted

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?

1
Melvin Aguilar 🧑🏻‍💻• 61,440

@MelvinAguilar

Posted

@devkilyungi

Hey, there! 👋

Thank you very much for your comment, as you can see, I have a lot of selectors to set the margins to 0, because I am using a CSS Reset template, which removes browser built-in styles and reduces browser inconsistency. The one I use is minireset.css.

I use the inputs because in radio-type inputs you can only choose one from a set of inputs. The inputs allow the user to choose an option using the keyboard. Additionally, I can see which option is selected by the pseudo-selector ":active" from the inputs. And finally, I use the inputs because I am sending rating information through the form.

I hope I have answered all your questions 😁

1
Kilyungi• 100

@devkilyungi

Posted

@MelvinAguilar

Thank you for replying. I think I understand now. I'll check out your code some more to internalize the form concept, before I implement it in my solution.

I haven't had any experience with minireset.css before. I'll check it out to see what it's all about.

Marked as helpful

0
Kilyungi• 100

@devkilyungi

Posted

@MelvinAguilar I'm grateful for the resources.

0
Precious Nkwor• 440

@Jeen-Presh

Posted

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?
0
Precious Nkwor• 440

@Jeen-Presh

Posted

@MelvinAguilar Likewise. thanks so much appreciate the feedback.

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