interactive-rating-component

Community feedback

• 

  Darko•980

  @dtomicic

  Posted about 3 years ago

  Congrats on finishing your second project.

  I've taken a look at your project and everything looks good except a few things with your JS.

  First you should avoid changing the style the way you did with element.style.display = "none", instead what you should do is make a class in CSS (for example class show) and then you toggle that class to an element through JS like this:

  CSS

  .element {
     display: none;
  }
  
  .show {
     display: flex;
  }
  

  JS

  element.classList.toggle("show");
  

  So now when you click the submit button your element will go from display:none; to display:flex; and if you click the submit button again (which isn't possible in this design but I'm telling you for future reference) the element would have an attribute display:none; so basically you're toggling between two states. You can read more about it in depth here

  Also another thing I've found is that no matter what rating you pick in the end screen it always show you picked out 5/5 since you've hardcoded that part, what I would suggest is make on submit check which button was selected (was it the one with the rating 1, rating 2 etc.) and then depending on that set the rating on the end screen (you can do that with innerHtml and some if/else statement).

  And the last thing I would recommend is to seperate your JS from your HTML meaning you should write JS in it's own file no matter how little of JS code you have.

  Once again congrats and keep on learning 👍

  01

  Marked as helpful
• 

  Ahmad Fardous Azimi•190

  @azimifardous

  Posted about 3 years ago

  One thing that I've noticed is the rating numbers are actually don't work when you submit. It doesn't matter which number/rate you select it shows the 5 out of 5. If you wanna solve that you can check my solution.

  01