Skip to content
Submitted over 1 year ago

RESULT SUMMARY - REACT & TAILWINDCSS

Sameer Singh•560
@SameerJS6
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Results summary component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hello, Frontend Community,

This is my official solution for the Result Summary Component. This challenge was fun to do as it only involved CSS and the UI was quite beautiful.

I added some extra features to make it even cooler, such as:

  • SVG icons for titles and buttons
  • A background pattern to give the body some texture
  • A gradient animation for the result container and circle
  • A loading animation to make it more interactive.

If you have any opinions or feedback, please leave a comment. Thanks for checking it out! SameerJS6.

Community feedback

  • Grace•31,090
    @grace-snowPosted over 1 year ago

    Hi

    The background image makes this unreadable for me.

    And do you think each item of the results would be clickable? What do you think would happen on click? The content looks static to me, but I can see transitions as I touch each one on mobile, which makes me think they’re interactive

    1
    Sameer Singh•560
    @SameerJS6Posted over 1 year ago

    First of all, thank you @grace-snow for pointing this out. Here are some clarifications:

    • In this whole component, there is only one clickable element, i.e. the Continue Button, but it does not take the user anywhere.
    • Second, the results are not meant to be clicked, but they do interact when hovered or clicked on mobile.
    • Third, regarding the background image, I agree with you. However, the whole intention of adding it was to make the component look nice.
    0
    Grace•31,090
    @grace-snowPosted over 1 year ago

    @SameerJS6 the problem is, by doing this you have made it fail WCAG accessibility requirements. If it's unreadable, it becomes exclusionary to many

    Similarly, adding hovers to non-interactive elements is unexpected UX. People try to click on them, but will then presume they are broken. I have had this exact bug reported several times when I was starting out over 10 years ago - You learn quickly to focus on eliminating confusion like that for users

    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