Skip to content
OverviewSolutions
8
Comments
3
Shashank Gupta
@Shashank1003

All comments

  • Tiago Martins•40
    @Tiago-MartsSubmitted almost 2 years ago

    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!!

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

    2
    Shashank Gupta•195
    @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
  • Shashank Gupta•195
    @Shashank1003Posted about 3 years ago

    Hi, you can add CSS {cursor: pointer} for the items that have some actions on click. It will improve user experience as rn I don't know which elements can be clicked, it just shows the default mouse pointer.

    0
  • Shashank Gupta•195
    @Shashank1003Posted about 3 years ago

    Hey, hover animations aren't very smooth. Try to give at least 100-200 ms animation duration it will look better.

    0