Advice Generator App (SASS + JS + BEM + Mobile-first)

Community feedback

• 

  Mohamed Abdul Rahman•240

  @mdabdulrahmanPosted about 2 years ago

  Hi @MelvinAguilar,

  Your solution is really awesome 🎉 but one thing box shadow for dice button is showing only in bottom but in the design it should be all around the dice add this box-shadow:0 0px 35px 1px #52ffa8; CSS box-shadow code to dice button it will make box-shadow all around the dice button

  Marked as helpful

  1

  ---

  

  Melvin Aguilar 🧑🏻‍💻•61,160

  @MelvinAguilarPosted about 2 years ago

  @mdabdulrahman Hey, there! 👋 Thank you for the suggestion. I'll keep it in mind. 👍

  1
• 

  Abhijith Muthyala•760

  @abhijithmuthyalaPosted almost 2 years ago

  Hi, the loading spinner looks great! Few things I noticed:

  • The loading spinner keeps animating even when it is not visible, which might be unnecessary. Changing the animation declaration on .loader::before to .loader.visible::before would only animate it when it is visible.

  • While operating through keyboard (Enter / Spacebar), the focus state on the button is lost. I think it would be better to reset the focus back onto the button for better accessibility.

  • I've also been learning about accessibility, and from what I understand, setting aria-live to polite instead of assertive would be better since it doesn't interrupt what the screen reader is currently reading - More info on MDN. I used aria-live='polite' on the new advice text in my solution and the screen reader(NVDA) reads out the new advice.

  Marked as helpful

  0

  ---

  

  Melvin Aguilar 🧑🏻‍💻•61,160

  @MelvinAguilarPosted almost 2 years ago

  @abhijithmuthyala Thank you very much!!!

  1