Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Results Summary Component | ReactJs | CSS | Animations

@AnaCarol2001

Desktop design screenshot for the Results summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

I'm most proud of the CSS-only animation of this project. But, for next time, I would like to use a CSS framework and an animation library.

I'm also glad I discovered how to use the Context Hook to guarantee the correct heading levels and a reusable heading component through the React learn docs and an article from up your a11y.

What challenges did you encounter, and how did you overcome them?

The sequence animation was the biggest challenge of this project. To overcome it, I used the CSS variables and the calc function on the animation-delay property to make the sequence work.

What specific areas of your project would you like help with?

Any tip about how to better structure a React project? Besides that, I would appreciate any feedback.

Community feedback

P
dk 220

@jenna1k

Posted

clean implementation and impressive animation!

Using index.js files in the components and assets folders has a few benefits:

  • Cleaner imports: You can import components and assets directly from the folder name instead of specifying the index.js file. For example: import Button from '@components/Button'; instead of import Button from '@components/Button/Button';.
  • Easier refactoring: If you need to rename a component or asset, you only need to update the index.js file instead of changing the import statements throughout your codebase.
  • Consistent naming: Using index.js maintains a consistent naming convention across your project.
  • Encapsulation: The index.js file can be used to export only the necessary components or assets from the folder, providing a layer of encapsulation.

Marked as helpful

1

@TedJenkler

Posted

Nice animation really impressed, continue the great work

1

Please log in to post a comment

Log in with GitHub
Discord logo

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