Interactive Rating Component

Community feedback

• 

  Ritesh Virulkar•190

  @Ritesh-VirulkarPosted almost 2 years ago

  In the "thank you" html part, add a class (.hidden) which has a css property of {display: none;} and after clicking on submit btn you can switch from {display: none} to {display: block} and do the vice versa.

  Marked as helpful

  2
• 

  Adriano•38,120

  @AdrianoEscarabotePosted almost 2 years ago

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

  Instead of using a for, prefer to use the forEach method, it will make your code cleaner!

  I took all the elements and with the spread operator I stored them all separately in an array, so I could use forEach.

  const ratings = [...rating]
  
  ratings.forEach(element => {
      element.addEventListener("click", function(){
          let activeRating = document.getElementsByClassName("active");
          if (activeRating.length == 0) {
              element.classList.toggle("active");
          } else {
              activeRating[0].classList.remove("active");
              element.classList.toggle("active");
          }
          
          ratingSelection = this.innerHTML;
      });
  })
  

  The rest is great!

  I hope it helps... 👍

  Marked as helpful

  1
• 

  Ronald Sayre•260

  @RJ3605Posted almost 2 years ago

  Hi Dan, I may be able to help out.

  Please note that I recommend only reading as much as you need and trying the rest yourself. You may even find a new way to do things that is different from my suggestions! If you need more assistance please feel free to reach out to me or check out my version of this challenge on GitHub if you'd like.

  For the thank you screen, you should design the thank you screen as you normally would. Note that both the rating and thank you screens will appear at the same time at this point. Make sure the thank you screen is all within its own parent element, be it a <div> or any other applicable element type. Also, make sure it is separate from your rating element in your HTML code.

  From there you can use HTML or CSS to add the hidden attribute to the thank you parent (HTML) or set the parent to display: none (CSS). (You can search hidden attribute HTML or display: none CSS in your search engine for more details.)

  Then you can add to your event listener in JavaScript to change which element is hidden. You can use JavaScript to change the HTML or CSS you used to remove the code that hides the thank you parent element, and also to add code that hides the rating parent element.

  I noticed you are using a <form> tag with a <button type="submit">. This is good, but you'll notice that clicking the submit button has the default effect of reloading the page. This means that if even if you were to set everything else up correctly, you would only see the second "page" for an instant before the page refreshed. Check out https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/submit for more details.

  You can prevent this default behavior at least two ways that I know of. The first is in JavaScript using the event.preventDefault() method. You can check that out here: https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault . The second method is using HTML. On your <form> tag you can use the onsubmit attribute. That would look like <form onsubmit="return false">. Both methods will prevent the page from reloading.

  Marked as helpful

  1

  ---

  

  Dan•90

  @Daniel3-14Posted almost 2 years ago

  @RJ3605 Thank you for your feedback! That <button type="submit"> issue was indeed driving me nuts for a while before I figured it out!

  1