Resposive Interactive rating component

Community feedback

• 

  Wendy•1,970

  @wendyhamelPosted over 2 years ago

  Hi, it looks dark on the preview because the screenshot was made during the animation of the card. I think it's somewhere in the animation when the screenshot was made.

  The animations are smooth. But a bit slow for my taste. I like the fade in on page load better than the scroll and fad in of the second card.

  You could also add a tiny animation on the hover states of the buttons, the color hange is instant now and it can feel a lot softer if you add a very slow transition, I like to use a duration of 150ms for interactive elements.

  Your javascript is very readable.

  Maybe take a look at the report and improve the accessibility, those 3 issues are easely fixed!

  I hope this was helpful to you, Have fun coding!

  Marked as helpful

  2

  ---

  

  MazzCode•120

  @MazzGuillePosted over 2 years ago

  @wendyhamel Thanks wendy!! I'll check that out!

  0
• 

  Matt•180

  @mslee017Posted over 2 years ago

  Well done! If I had to nitpick anything, I would say to check the responsiveness a bit. From 375px to 700px where you have your media query, the card keeps on growing, and then it shrinks again. Maybe try a max with on the card container for the two breakpoints they specify (375px and 1440px I think)? Javascript and everything else looks good :)

  Marked as helpful

  1

  ---

  

  MazzCode•120

  @MazzGuillePosted over 2 years ago

  @mslee017 Thanks bro, highly appreciate it

  0
• 

  Shashree Samuel•9,260

  @shashreesamuelPosted over 2 years ago

  Hey good job completing this challenge

  Keep up the good work

  Your solution looks great however I think your card itself is a bit too dark because of the animation that you have on the card. The screenshot is taken before the animation happens that's why it appears to be dark.

  In terms of your accessibility issues simply wrap all your content between main tags

  I hope this helps

  Cheers Happy coding 👍

  Marked as helpful

  1

  ---

  

  MazzCode•120

  @MazzGuillePosted over 2 years ago

  @TheCoderGuru now I get it, because initial opacity is set to 0, that's why it looks like that in the preview. I'll try out the main tag you mentioned, thanks!

  0
• 

  MazzCode•120

  @MazzGuillePosted over 2 years ago

  I dont know why it looks so dark in the preview, please open the link so you can see it properly, also, let me know your thought on the animations please.

  0