Interactive rating, HTML/CSS/JS

Community feedback

• 

  Agata Liberska•3,995

  @AgataLiberskaPosted over 2 years ago

  Hello :)

  I think you made this a bit more difficult for yourself going for buttons with ratings where this really is a small form with 5 radio inputs - So I would visually hide the inputs themselves (key word is visually , display:none wouldn't be a great choice) and style the labels to be the circles you click and then pass this to the submit event :)

  And if you want to change the look of the buttons after pressing one, loop or forEach is an ok choice, but I would simplify your code by having an 'active' class and then just using classList.toggle('active')

  hope this helps :)

  Marked as helpful

  2

  ---

  

  kefiiiiR•70

  @kefiiiiRPosted over 2 years ago

  @AgataLiberska Hi Agata, yes, now that you mentioned it, radio input would be better choice.

  For the toggle function, that would toggle onclick on each button but it would not remove the active state from others (if I would change the rating). Or am I missing something?

  0

  

  Bolu•240

  @t3ch-spawnPosted over 2 years ago

  @kefiiiiR Hey there, if i understand what you mean by the active states of the buttons, you mean when they turn gray? You can achieve that by using the pseudo class "focus". For example.... ".button:focus{ background-color: gray;} Hope this helps :)

  Marked as helpful

  0

  

  kefiiiiR•70

  @kefiiiiRPosted over 2 years ago

  @gLitCH1904 Hi Bolu, yes, that is exactly what I meant. I was so focused on JS that I forgot about this.

  On the other hand, it changes colour back to normal state when you click anywhere else. So eventually, it does not completely cover the needs of this challenge I suppose.

  Thank you!

  1

  

  Agata Liberska•3,995

  @AgataLiberskaPosted over 2 years ago

  @kefiiiiR ahh of course you're right, I take that back :D

  btw I was thinking that I saw a toggle for something using buttons but I can't find that article - I think it was like an on-off toggle for a state, using aria-pressed for accessibility and for styling, that could also be something to research possibly? :)

  1

  

  Bolu•240

  @t3ch-spawnPosted over 2 years ago

  @kefiiiiR You're welcome! I also had the same exact issue and i didn't want to use another for-loop so i looked up a solution and found this lol

  0

  

  kefiiiiR•70

  @kefiiiiRPosted over 2 years ago

  @gLitCH1904 I edited my response to your previous comment: On the other hand, it changes colour back to normal state when you click anywhere else. So eventually, it does not completely cover the needs of this challenge I suppose.

  That might be something to think about. I don't know about other solution without JS.

  0

  

  kefiiiiR•70

  @kefiiiiRPosted over 2 years ago

  @AgataLiberska That might be something to look at. Maybe next time, as for now, I consider this challenge done :D

  Thank you for all your feedback though.

  0