Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Advice Generator App builded with Flexbox, JSON, JS and CSS

@Tiago-Marts

Desktop design screenshot for the Advice generator app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
  • API
2junior
View challenge

Design comparison


SolutionDesign

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

@Shashank1003

Posted

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

@schifferedson

Posted

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
Discord logo

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