Interactive rating component using Vanilla Js

Community feedback

• 

  Adriano•38,120

  @AdrianoEscarabotePosted almost 2 years ago

  Hi Pretty Kunene, how are you? I really liked the result of your project, but I have some tips that I think you will enjoy:

  To make the submit button work only when the user selects a number, we can do this:

  ratingNumber.forEach((number) =>{
      number.addEventListener("click", () =>{
          console.log("number correct");
          selectedNumber.innerHTML = number.innerHTML;
          submitBtn.addEventListener('click',function(){
              if (ratingSection[0].style.display = "block"){
                  ratingSection[0].style.display = "none";
                  thankSection[0].style.display = "block";
              } else {
                   thankSection[0].style.display = "none";
                   ratingSection[0].style.display = "block";
              }
          })
      })
  })
  

  The rest is great!

  I hope it helps... 👍

  Marked as helpful

  0

  ---

  

  Pretty Kunene•690

  @nonozaPosted almost 2 years ago

  @AdrianoEscarabote Thank you so much for the code. I actually had an if statement solution but don't know how to approach it.

  Thanks a lot!!!

  1
• 

  P

  Godwin•410

  @itadori-kunPosted almost 2 years ago

  Hello Pretty, Great work and nice code, it is fantastic. Here is a little suggestion.

  • You forgot the: hover and :active on the class ratings.
  • Validate your submit btn to only submit when a rating number has been selected to avoid pushing out blank on the innerHTML part.
  • Try using more semantic tags instead of non-semantic tags like("divs"). Check this out to understand more: "https://www.w3schools.com/html/html5_semantic_elements.asp" or "https://www.freecodecamp.org/news/semantic-html5-elements/".

  Hope you find this helpful!!!. Happy coding 👻💜💜

  Marked as helpful

  0

  ---

  

  Pretty Kunene•690

  @nonozaPosted almost 2 years ago

  @itadori-kun Thank you , will check it out.

  0