Interactive Reating PAge using css and js

Community feedback

• 

  Raj Prasad Sanjel•980

  @RajSanjelPosted over 2 years ago

  I saw that you have two files one index.html and another thank.html. I would say you can do it in one file. You can listen for submit button click and change inner html using using innerHTML.

  And about all buttons changing color you can see if it has been clicked or not. You code for reference at https://github.com/RajSanjel/Interactive-rating-component/blob/main/js/handelFeedback.js. There you can see that it adds class of rated when I click on the number. And it checks for if user has rated before or no. If user has rated then it removes the class rated from old clicked number and assigns it to new number clicked. Hope this helps. If you have any confusion you are free to ask.

  Marked as helpful

  0

  ---

  

  Akanchha Singh•80

  @Akanchha112Posted over 2 years ago

  @RajSanjel Thanks, It was helpful. There is a little bit confusion. why did you make two classes named 'thank-you hidden' and use them twice in js for the same code can't we just make one and use it?

  document.querySelector('.ask-section').classList.add('thank-you')

  document.querySelector('.thank-you').classList.remove('hidden')

  0

  

  Raj Prasad Sanjel•980

  @RajSanjelPosted over 2 years ago

  @Akanchha112

  document.querySelector('.ask-section').classList.add('hidden')
  document.querySelector('.thank-you').classList.remove('hidden')
  

  You are confused there? If you see in my html you can see that I have both rating-section and thank you section in same file. So 1st line adds the hidden class to the rating-section classed as ask-section and then removes the hidden class from thank-you section making it visible. In the code you provided i.e

  document.querySelector('.ask-section').classList.add('thank-you')
  document.querySelector('.thank-you').classList.remove('hidden')
  

  the thing is it adds thank-you class to the ask-section which is not what we want to happen if you see in css thank-you is styled for the content after rating is given and hidden class is to hide the section.

  If you confused about document.querySelector() you can read about it in https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

  I think I messed up a little bit in explaning but still hoping you understand. If you are still confused you are free to ask.

  Marked as helpful

  0

  

  Akanchha Singh•80

  @Akanchha112Posted over 2 years ago

  @RajSanjel Thank you so much. Well, I got some idea about how to do it from your explanation :).

  0

  

  Raj Prasad Sanjel•980

  @RajSanjelPosted over 2 years ago

  @Akanchha112 You are welcome.

  0