Simple interactive rating component using native javascript

Community feedback

• 

  Aakash Verma•9,480

  @skyv26Posted 3 months ago

  Hi @progfish, 😊

  First off, I want to say that I really appreciate your design work! The app looks great and feels polished despite the minimal resources you had to work with. Awesome job! 👍 However, there are a few areas where improvements can be made to optimize both your code structure and maintainability. Here are my suggestions:

  1. Separate Design from HTML: It's always a good practice to separate CSS into its own file rather than embedding it directly within the HTML. This makes your code more readable, easier to maintain, and better structured for future updates. 📂

  2. Use <ul> and <li> for List Items: For the ratings section, it's better to use <ul> (unordered list) and <li> (list item) tags instead of <div> for each item. It makes the HTML more semantically correct and improves accessibility. It will also help screen readers interpret the content better. 📝 Example:

     <ul class="ratings">
       <li class="circle" onclick="setFeedback(event, 1)">1</li>
       <li class="circle" onclick="setFeedback(event, 2)">2</li>
       <li class="circle" onclick="setFeedback(event, 3)">3</li>
       <li class="circle" onclick="setFeedback(event, 4)">4</li>
       <li class="circle" onclick="setFeedback(event, 5)">5</li>
     </ul>
     

  3. Use <div> Instead of <section>: The <section> tag is typically used to represent distinct sections of a website with their own headings. For a small card like this, you can simply use a <div> tag, as it is more appropriate for this use case. 🚫🗂️

  4. Use Meaningful or Empty alt Attributes for Decorative Images: If the image is purely decorative, you can leave the alt attribute blank (alt=""). However, if it adds context, make sure the text is meaningful. This is important for accessibility and how screen readers will interpret the image. 🖼️

  5. Externalize JavaScript: For better code organization and reusability, consider placing your JavaScript code in a separate file and linking it to the HTML. This will help keep things clean and modular. 📜

  Great work overall, and keep it up! 🚀

  Marked as helpful

  1

  ---

  

  progfish•280

  @progfishPosted 3 months ago

  @skyv26 Thanks for your kind words and feedback! I think you make a lot of great points. And I do agree with externalizing CSS and Javascript, but I opted not to do that because of the simplicity and size of the challenge :)

  1