My first JS challenge ever

Community feedback

• Account deleted

  To fix that issue you need to use :focus in CSS instead of active. Using Focus will make that something happens only if you click on it, and it will end if you click away.

  0

  ---

  

  P

  Islam Soliman•440

  @simokitkatPosted about 2 years ago

  @JustKooba I tried :focus now but it's still the same unfortunately.

  0

  Account deleted

  @simokitkat sadly i dont know how to fix it. You can check my design maybe you'll find a solution there.

  1

  

  March•190

  @marchin7Posted about 2 years ago

  @simokitkat The :focus CSS pseudo-class doesn't work on divs. You'd need to change it for <button> or <li> in order to work.

  1

  

  P

  Islam Soliman•440

  @simokitkatPosted about 2 years ago

  @marchin7 & @JustKooba Thank you both so much for trying to help me yesterday, I searched more on google regarding the issue in my code and it turns out that even after changing the pseudo class :active to :focus it wasn't working because of the following: The :focus pseudo class works automatically on interactive tags such as <button> and <a> so to fix my issue I had one of two options: 1- add the tabindex attribute, google it guys, I didn't know about it myself, but now I do and it did fix the issue. 2- a more semantic solution was to change the <div> elements to <button> elements and it would have worked too.

  I also added the preventDefault() method to the submit button in case the user doesn't choose any of the five ratings, just to make the application even better.

  1