Rating Component (Vanilla JS)

Community feedback

• 

  Bryan Portillo•115

  @BryanCloudDevPosted almost 2 years ago

  Hi Zeyad, that's a good one! I was checking and in order to add the hover effect when you pass the mouse over the number buttons you can add the pseudo class :hover like this:

  #container main #submit #ratings .stars:hover { background-color: #fb7413; color: #ffffff; }

  An when you have selected a number to rate you can detect with JS which button was pressed and add the gray color to it or viceversa when hovered.

  If you want to check how to ahieve this you can see the JS code i did for this one, it may help: https://github.com/BryanCloudDev/rating-component/blob/main/scripts/index.js

  Greetings!

  Marked as helpful

  1
• 

  バレンタイン 😈•64,170

  @VCaramesPosted almost 2 years ago

  Hey there! 👋 Here are some suggestions to help improve your code:

  • It is best practice ✅ to have separate files for you coding files (HTML, CSS, JS). It helps keep things organized and make it easier to maintain.

  • It is best practice ✅ to use, classes for styling purposes, while using ids solely for JavaScript.

  • To ensure that the "rating buttons" are fully accessible 💯, they need to be built using a form ⚠️ and inside of it, there should be fiveinput radios and each input should have a label attached to it to make the buttons accessible. Finally wrap all the inputs and labels inside a fieldset to prevent users from making more than one selection.

  More Info: 📚

  MDN: <input type="radio">

  MDN: Field Set Element

  • Your CSS Reset is being underutilized. 😢 To fully maximize 💯 it, you will want to add more to it.

  Here are some examples that you can freely use:

  Josh Comeau Reset

  Eric Meyer Reset

  If you have any questions or need further clarification, feel free to reach out to me.

  Happy Coding! 🎆🎊🪅

  Marked as helpful

  1