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

Results summary component with JSON, fetch() & animations

fetch
P
ania•330
@ania221B
A solution to the Results summary component challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


Hello everyone 👋

Here is my version of the Results summary component. I decided to use the JSON file provided to learn how to get data from it. I also added some animations, which proved to be quite of a challenge for me:

  • I used an animation for result from each category - the number is increased, which needs to happen after data loads, so I called a function that increases the number in a then call. This seems clumsy as the function that creates the list items does two things: creates items and triggers the animation
  • because I have animations that trigger one after the other finishes, I ended up with repeated code in animateNumber and increaseNumber functions

I've read that I could trigger one function after another is executed with a Promise, but I'm not comfortable with that. Can I improve the things I described here in another way?

Code
Loading...

Please log in to post a comment

Log in with GitHub

Community feedback

No feedback yet. Be the first to give feedback on ania's solution.

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

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