Skip to content
Submitted about 2 years ago

Advice Generator App using CSS Flexbox

Ayoife•300
@Ayoife
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Advice generator app
  • HTML
  • CSS
  • JS
  • API
2junior

Design comparison

SolutionDesign

Solution retrospective

Wow!, my first Junior challenge! , I'm hoping you'll leave an honest review of this solution. And I also added some animations....Were they good?, were they too much?, Let me know in your feedback!. And also, I'm facing a problem with increasing the height of the container as the text increases, I'll be glad if you could help me with that bug. :)

Community feedback

  • Rimsha•240
    @rimshubPosted about 2 years ago

    Hey @Ayoife good solution!! Animations are looking good and smooth.

    Some points i noticed while testing:

    1. The pattern divider overlaps with the dice-icon (button) when text of advice increases. I think you should set some height of paragraph as well, not only width in advice class. OR see if you can set the pattern divider image position to not change when text length increases.

    2. Also, its better idea to go with one animation. It looks too much when type of animation changes with every advice. Otherwise animations really look nice!!

    I hope this helps. Keep going✨

    0
    Ayoife•300
    @AyoifePosted about 2 years ago

    @rimshub Thanks for your feedback, I also thought the animations were too much but I just wanted to add some spice to the project because clicking a button and changing some text wasn't too exciting. And about the divider issue, I'll try to fix that bug. Thanks for viewing my site!

    1

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