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

Submitted

Interactive Rating Component

Dan 300

@dtp27

Desktop design screenshot for the Interactive rating component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I welcome all feedback for this project. This was my first project using all three HTML, CSS and JS in one component. I also added some accessibility features but would like feedback on that as well.

Thanks!

Community feedback

Travolgi 🍕 31,420

@denielden

Posted

Hi Dan, congratulations on completing the challenge, great job! 😁

Some little tips for optimizing your code:

  • add main tag and wrap the card for improve the Accessibility
  • instead of using ul for the number value use input type="checkbox" and styling it for better Accessibility
  • add transition on the element with hover effect
  • instead of using px use relative units of measurement like rem -> read here
  • be careful to use querySelector(".nameClass") because it only selects the first match it finds... very useful with ids that are unique in the page but with classes you could get bugs due to oversights so try to be as precise as possible in selecting elements avoiding classes as a reference to unless you have to select them all, but in this case you have to use querySelectorAll ()
  • the function you wrote does not work... it is too complex and encounters bugs, testing with the checkboxes will be much easier: you just need to retrieve the value of the selected checkbox

Hope this help! Happy coding 😉

Marked as helpful

2

Dan 300

@dtp27

Posted

@denielden Appreciate the feedback!!

1
Travolgi 🍕 31,420

@denielden

Posted

@dtp27 You are welcome and keep it up :)

1
Dan 300

@dtp27

Posted

@denielden Hi Deniel. I made several of the changes; would you mind taking a look at my code again? I used the radio input in order to simplify the selection process (since radio only allows one selection).

Thanks!!

1
Travolgi 🍕 31,420

@denielden

Posted

@dtp27 Now is much better :) Good job!

Marked as helpful

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