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

Community feedback

• 

  Precious Nkwor•440

  @Jeen-PreshPosted almost 2 years ago

  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,140

  @MelvinAguilarPosted almost 2 years ago

  @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-PreshPosted almost 2 years ago

  @MelvinAguilar You are welcome. Have fun

  0
• 

  Kilyungi•100

  @devkilyungiPosted about 2 years ago

  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,140

  @MelvinAguilarPosted about 2 years ago

  @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

  @devkilyungiPosted about 2 years ago

  @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

  

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted about 2 years ago

  @devkilyungi

  For more information, these are some of the most popular reset style sheets (CSS Reset):

  • A modern alternative to CSS resets
  • CSS Tools: Reset CSS
  • Custom CSS Reset

  0

  

  Kilyungi•100

  @devkilyungiPosted about 2 years ago

  @MelvinAguilar I'm grateful for the resources.

  0
• 

  Precious Nkwor•440

  @Jeen-PreshPosted almost 2 years ago

  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

  ---

  

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted almost 2 years ago

  @Jeen-Presh I sincerely believe that the background color does not come in the designs of the challenge, so I was trying out these two resources:

  • https://cssgradient.io/
  • https://css-tricks.com/radial-gradient-recipes/

  1

  

  Precious Nkwor•440

  @Jeen-PreshPosted almost 2 years ago

  @MelvinAguilar Likewise. thanks so much appreciate the feedback.

  1