Advice Generator App builded with Flexbox, JSON, JS and CSS
Design comparison
Solution retrospective
I made some alterations from the original design, including:
- Scrollbar when the text overflow: sometimes the advice text overflows the space so I add it.
- Animation for the dice and loading: I think that adding animation in some elements would give more "life" to it. By the end, I was not 100% satisfied with the animations but I thinkt that works in general.
- Constructing the icons: I know that is not recommended to do, but I find a fun activity trying to get the icons and details in pure CSS.
It was a very fun challenge!
Feedbacks are welcome!!
Community feedback
- @Shashank1003Posted almost 2 years ago
Hi Tiago! this solution looks good, you are handling long text nicely. But if you look at the small text on the small screen, it seems like the text is flying on the top with a lot of empty space at the bottom. To fix this, you can vertically align the advice text at the center (use flexbox) and give some margin-bottom to slightly uplift it.
0 - @schifferedsonPosted almost 2 years ago
Muito bom cara, fiz esse hoje mais cedo... estou aprendendo javascript, ainda está hard mas acredito que com a prática a dificuldade vá embora. 😊
0
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