Submitted almost 2 years ago

Responsive countdown timer made using Vanilla JS + Sass

#accessibility#sass/scss

Curtis Simpson• 550

@crsimpson5

Preview site View code

This is a solution for...

Launch countdown timer

HTML
CSS
JS

3intermediate

View challenge

Design comparison

SolutionDesign

Solution retrospective

Hey everyone 👋

This challenge was a lot of fun, and there was a lot to learn in this seemingly small project. I learned about using JS Date objects to make the timer and some new CSS properties to make the flip animation, such as transform-style and perspective, which are used for the 3D effect. I also used grid and responsive typography to make sure it looked good at any screen size.

I followed Web Dev Simplified's Countdown Timer video, and also looked at Dorian Camilleri's CodePen to see how to make the 3D animations. Definitely check these out, I wouldn't have been able to make this without their help!

Community feedback

Elaine• 11,420

@elaineleung

Posted almost 2 years ago

Hi Curtis, I just want to say excellent work and thank you for the resources; I'm definitely bookmarking this for future reference! I'd be interested to see what's going on with those HTML validation errors as I don't see what's wrong with your use of transform; I think I've either gotten those errors myself or see other have them, and it's a bit of a head scratcher. Anyway, great job once again!

Marked as helpful

Curtis Simpson• 550

@crsimpson5

Posted almost 2 years ago

@elaineleung Hey Elaine, I'm also unsure about the validation errors. I believe they are coming from Font Awesome, and if that's the case there's not much I can do about them. Thanks for the 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