Design comparison
Solution retrospective
Way more javascript that required. Could have just used a details element. But I wanted to put my own spin on it, and provide a solution that only allowed 1 answer to a question be visible at a time.
Also, I was playing around with javascript modules and classes, so there you go!
Community feedback
- @rizwanmustafaPosted over 3 years ago
Good Job on this challenge!
I have a few suggestions:
- Avoid using
height: 100vh;in yourbody. Instead usemin-height: 100vh;. This will guarantee that your body covers the whole page and all content is seen in case the content height exceeds the height of the viewport - Remove the vertical scrollbar on the page by adding
margin: 0; padding: 0;in the styles for*. - Try to add transitions to smoothen the expansion of answers of questions
Happy coding!
0@spotted76Posted over 3 years ago@rizwanmustafa Thanks for the suggestions! I will look into implementing some of those changes.
0@spotted76Posted over 3 years ago@rizwanmustafa Thanks again, transitions added. Was actually much harder than anticipated. Required off-screen calculations, as display:none/block does not appear to be a transition that can be animated.
1 - Avoid using
Please log in to post a comment
Log in with GitHub
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord