Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted over 2 years ago

Results Summary Component (HTML | CSS | JS Vanilla => animejs library)

Cheosphere•1,040
@Cheosphere
A solution to the Results summary component challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


...made with a lot of love 🤘🏻🙂

Code
Select a file

Please log in to post a comment

Log in with GitHub

Community feedback

  • Hannibal•410
    @johanLib
    Posted over 1 year ago

    the perfect solution doesn't exi...

    Good Job man 🎊

  • madhukar-30•340
    @madhukar-30
    Posted almost 2 years ago

    pretty cool animations 👏

  • Pranshu Sahu•770
    @Pranshu-Sahu
    Posted over 2 years ago

    Genius Solution without any error

  • Carlos Eduardo Riese•80
    @carlosriese
    Posted almost 2 years ago

    Hey man, whats up?

    I love to see your challenges solutions and how it's looks like exactly like the challenge request. My goal as "Ever evolving" Frontend dev is reach a similar level of work like yours. Can i ask you something? How you get those results? Its your experience as dev and/or you unlock the pro resources (like figma) to improve your accuracy in the challenges? tks

  • ABU-BAKAR-S•380
    @ABU-BAKAR-S
    Posted over 1 year ago

    Your project is awesome bro. Go ahead. I want to try the animation like this.

  • Theunis•210
    @theYuun
    Posted over 1 year ago

    You certainly have a way with animation! Very cool!

  • John•410
    @MiyaoCat
    Posted over 1 year ago

    Love the animation!

  • verakissyou17•540
    @verakissyou17
    Posted over 1 year ago

    Hi! You did a great job and your design is almost perfect. The animation is a plus and is very cute. Congratulations for your project! ☺☺☺

  • P
    enzmrg 💫•920
    @enzo-mir
    Posted over 1 year ago

    "a lot of love" for sure ! Well done !

  • Mateusz•440
    @MatPawluk
    Posted over 1 year ago

    Pixel perfect , Awesome!

  • AskTiba•120
    @AskTiba
    Posted over 1 year ago

    Now that's so good it's inspiring. I will definitely have look through your work process in the code. Good job.

  • Gavharoy_004•340
    @gavharoyabdurahimova
    Posted over 1 year ago

    Hello, simply wonderful!! I liked how you compared it to 1:1.

  • turboo-sy•250
    @turboo-sy
    Posted almost 2 years ago

    hey bro i like ur solution man it amazing <3 , so please tell how to get height and width ....etc, for any solution its really hard for me to try it without any help , thank you so so much <3

  • vishwa3•290
    @vishwa3
    Posted almost 2 years ago

    Animations are rad 😎

  • subodh16728•100
    @subodh16728
    Posted almost 2 years ago

    Wow just wow! Speechless

  • NaQu•570
    @NaQu2003
    Posted almost 2 years ago

    Hi, it looks great! I wanted to ask also how you do it that your websites look 1:1 to designs?

  • Jordan KRARIA•270
    @JOJOK63
    Posted almost 2 years ago

    Great work ! It was so clean

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
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

How does the accessibility report work?

When a solution is submitted, we use axe-core to run an automated audit of your code.

This picks out common accessibility issues like not using semantic HTML and not having proper heading hierarchies, among others.

This automated audit is fairly surface level, so we encourage to you review the project and code in more detail with accessibility best practices in mind.

How does the CSS report work?

When a solution is submitted, we use stylelint to run an automated check on the CSS code.

We've added some of our own linting rules based on recommended best practices. These rules are prefixed with frontend-mentor/ which you'll see at the top of each issue in the report.

The report will audit all CSS, SCSS and Less files in your repository.

How does the HTML validation report work?

When a solution is submitted, we use html-validate to run an automated check on the HTML code.

The report picks out common HTML issues such as not using headings within section elements and incorrect nesting of elements, among others.

Note that the report can pick up “invalid” attributes, which some frameworks automatically add to the HTML. These attributes are crucial for how the frameworks function, although they’re technically not valid HTML. As such, some projects can show up with many HTML validation errors, which are benign and are a necessary part of the framework.

How does the JavaScript validation report work?

When a solution is submitted, we use eslint to run an automated check on the JavaScript code.

The report picks out common JavaScript issues such as not using semicolons and using var instead of let or const, among others.

The report will audit all JS and JSX files in your repository. We currently do not support Typescript or other frontend frameworks.

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub