Submitted 11 months ago

Responsive layout with CountUp.js, html and css

Jaz• 190

@arfernn

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Age calculator app

HTML
CSS
JS

2junior

View challenge

Design comparison

SolutionDesign

Solution retrospective

This one was interesting! some surprises found while dealing with dates and how to properly validate the corner cases (February with 28 days, or 30/31 days)

I've used a mobile first approach with vanilla JS and CSS, the data validation is done with JS and the error feedback has been introduced using the :invalid and ::before / ::after pseudoelements.

The count up is animated using a lightweight library, https://inorganik.github.io/countUp.js/

Quite happy with the result, feedback is more than welcome!

Community feedback

Please log in to post a comment

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