Interactive Rating Component with SCSS, Fluid Typography, and JS

Community feedback

• 

  Ahmed Bayoumi•6,740

  @Bayoumi-devPosted over 2 years ago

  Hey Fathul,

  • I suggest you add cursor: pointer; to the button, The cursor indicates to users there is an action that will be executed when clicking on it.

  Hope this is useful to you... Keep coding👍

  Marked as helpful

  1

  ---

  

  Fathul Irfaan Abdillah•320

  @thefathdevPosted over 2 years ago

  @Bayoumi-dev Thank you so much! I really forgot it :D

  0
• 

  HashimAlSadah•860

  @HashimAlSadahPosted over 2 years ago

  Hi @whatTheFath, congrats on completing this challenge, your solution looks fine, but as you mentioned this is not the best JS practice.

  What you did in your code is that you gave each button an event listener, but the common method is to listen to any click event on the parent container, which is <div id="rate-btn" class="card-rate"> in your code. Then you can check if clicked element is a button. In you case each button has class of <button class="card-rate__list">1</button>.

  I have modified your code (JS part mainly), so you can learn how to listen to event more efficiently. I have also removed the <span> tag from the buttons(they were unnecessary). You can check the modifications and the comments on the following codePen.

  I also recommend the following tutorial by (Dev Ed) on how to create a to-do list, where you will learn how to listen to events and manipulate the DOMs.

  Overall, you have done a great job in this challenge and Keep Coding.

  Marked as helpful

  1

  ---

  

  Fathul Irfaan Abdillah•320

  @thefathdevPosted over 2 years ago

  Wow, thank you so much for your better JS solution and recommendation Hashim! @HashimAlSadah. It's really helpful✨

  0
• 

  Danilo Blas•6,300

  @Sdann26Posted over 2 years ago

  Your design and layout are perfect, there's nothing to add there, plus I don't see any accessibility issues.

  Your JS is fine actually it's understandable but regarding functionality you should be able to prevent it from being sent by pressing the SUBMIT button. For that you could create a conditional that when receiving the value of when you don't press any button it won't allow you to hit SUBMIT until you click the other buttons. With that implemented I think it would improve the performance of the challenge :D!

  Marked as helpful

  1

  ---

  

  Fathul Irfaan Abdillah•320

  @thefathdevPosted over 2 years ago

  Whoah, I didn't noticed it, I'm really appreciate it, Danilo! @Sdann26

  1