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

crowdfunding page with animated progress using atomic design system

Michal 665

@mbart13

Desktop design screenshot for the Crowdfunding product page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


This was tough, definitely not junior, more like intermediate to advanced

I build it with react, styled components and utilised for the first time atomic design system https://atomicdesign.bradfrost.com/chapter-2/

State management done using Context API, you should see updated state after making a pledge

Update: Modal is accesible, I implemented focus trap, also you can close modal using ESC key or clicking outside of modal. I think it should also be screen-reader friendly.

Community feedback

P
tediko 6,680

@tediko

Posted

Hello, Michal! 👋

This is a really good solution. Well done! Forgive me for not having any suggestions. I'll back to this solution when I will do this project myself. Kudos for taking a time to think about accessibility. I like the focus states you put.

Have fun coding! 💪

1

Michal 665

@mbart13

Posted

@tediko Thanks, actually I stole the :focus-visible trick from your solutions :D

0

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