@AgataLiberska
Posted
Hi @mathew12tan, congrats on your first JS challenge, well done! Here's what I noticed:
-
it would be good to add some margin on the bottom on mobile devices - on smaller viewports the card reaches right to the bottom of the screen. Adding some space will make it look more professional :)
-
If you use divs as the clickable element, it won't be accessible to keyboard users. Try using a button instead - this is my favourite article about this
-
It would be great if there was some animation/transition to reveal the answer, but the display property is not animatable. One way to work around this would be to create a keyframes animation that animates both display and opacity, or you could just try to toggle between
height: 0toheight: max-content;
Hope this helps :)
@mathew12tan
Posted
Hi @AgataLiberska,
Thank you very much on your time to comment on my solution.
I edited my code on mobile view, using button for click event, added transition to reveal answer, change my approach on images and minor details..
Thank you again 😊, Mathew
@AgataLiberska
Posted
@mathew12tan well done, it looks great!
