Interactive Rating Component Vanilla JS

Community feedback

• 

  バレンタイン 😈•64,170

  @VCaramesPosted almost 2 years ago

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

  • To not only improve your HTML code but to identify the main content of you page, you will want to wrap your entire component inside the main element.

  More Info:📚

  MDN Main Element

  • The “icons/illustrations” in this component serve no other purpose than to be decorative; They add no value. There alt tag should be left blank and have an aria-hidden=“true” to hide them from assistive technology.

  More Info:📚

  https://www.w3.org/WAI/tutorials/images/

  • Your ratings should have an active state to let users know which rating they have chosen.

  • The proper way to build this challenge is to create a form and inside of it, the “rating buttons” should be built using an input radio (wrap all of them inside a fieldset), since this will prevent additional buttons from being active at the same time, and it should have a label element attached to it for accessibility.

  More Info:📚

  MDN <input type="radio">

  MDN <fieldset>: The Field Set element

  • Currently, users can submit without selecting a rating. To fix this, you can do one of the following:

  1. Make the “5” rating the default rating.
  2. Create an error message, telling users they need make a section.
  3. Disable the button until a selection is made.

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

  Happy Coding!🎄🎁

  Marked as helpful

  0

  ---

  

  Michael Johnson•970

  @mikej321Posted almost 2 years ago

  @vcarames Hey there @vcarames! I tried to improve my semantics from my last project but I still have a long ways to go, as we can see! The star really shouldn't have had an alt looking back at it now. I am currently working on implementing your feedback. Thank you so much for the valuable feedback...I am going to read through the articles that you provided me and make some changes!

  0

  

  Michael Johnson•970

  @mikej321Posted almost 2 years ago

  @vcarames Hey there! I made some of the changes you recommended and was wondering if you could review the changes and let me know if there are some more things that could be worked on. The only change I haven't done yet is the main tag, I will have to go through the css and change some selectors first before I do that one. Thanks so much for your help!

  0
• 

  John Denver•290

  @jbidzPosted almost 2 years ago

  Hello Michael, you did a great job on taking this challenge, and I really love the outcome of your design

  I noticed in your design that the submit button always bring me to the thankyou page even if I didn't choose a rating. You can fix this issue by adding condition to your submit function like this:

  let value;
  
  submit.addEventListener('click', function(i) {
    if (value == undefined) return; // or you can add an alert to tell the user to choose a rate first
    mainForm.remove()
    
    attribution.remove();
    
    selectedValue.innerText = value;
    
    thanks.style.display = 'flex';
    document.body.append(attribution);
    
  })
  

  Marked as helpful

  0

  ---

  

  Michael Johnson•970

  @mikej321Posted almost 2 years ago

  @jbidz Thank you so much, John! I will implement your suggestion and try to improve this project. Thanks for the great feedback and for helping me!

  0

  

  Michael Johnson•970

  @mikej321Posted almost 2 years ago

  @jbidz Hey there! I made some changes to my code and was wondering if you wouldn't mind reviewing it to see if anymore changes need to be made. Thanks so much for your prior help!

  0