Challenge: Progress Button

Front-End Challenges Club - Challenge #004


We’re starting the new year with a beauty of a challenge. It might look straightforward from the outset, but as usual with a Front-End Challenges Club challenge, as we dig into the details, there’s a lot to consider.

The brief permalink

Take the design assets and re-create this progress button with whatever front-end technology you want. Consider how state is managed and how the button works when there is no JavaScript available. If you do the legwork upfront, you’ll make the whole process a lot easier with this one.

Make sure that your challenge solution does the following as a minimum:

  • Uses semantic elements
  • Is usable with mouse, touch and keyboard
  • Presents an acceptable focus state (pro-tip: this should be additional to the hover state)
  • Uses aria roles effectively to announce state changes

Bonus points awarded if:

  • You create a solid state management system
  • Your solution is lightweight and performant
  • Your solution is fully accessible
  • You create appropriate transitions and/or animations between states

Assets permalink

I’ve used Figma to design this challenge and you can run it with a completely free account!

Here’s some assets to get you going:

Here are some CSS Custom Properties for your colours:

Code language
CSS
:root {
  --color-primary: #21223e;
  --color-primary-light: #3c3f73;
  --color-success: #0c8d87;
  --color-error: #c01332;
  --color-light: #ffffff;
}

Wrapping up permalink

When you’ve tried building this one for yourself, head over to the solution to see how I built it!

See you at the next one 👋

If you liked this post, you might like these ones, too

  1. Challenge: Progress Stepper

    Front-End Challenges Club - Challenge #008

    Continue
  2. Solution: Email sign-up form

    Front-End Challenges Club - Solution #001

    Continue
  3. Solution: Tabs

    Front-End Challenges Club - Solution #005

    Continue

Become a supporter by joining the Piccalilli Membership

For as little a $5 per month, you can get access to a private, friendly community, get a weekly newsletter and help to make as much content free as possible around here. If you join the $10 per month supporters club, you get access to premium tutorials and free access to mini courses!

Become a member

Sign up for updates

Stay up to date with updates from Piccalilli. You’ll get alerted as soon as any new content gets published. You’ll also get updates on upcoming courses and membership features! You can unsubscribe at any time, too.