Responsive countdown timer made using Vanilla JS + Sass
Design comparison
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
- @elaineleungPosted over 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 helpful2@crsimpson5Posted over 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! 😊
1
Please log in to post a comment
Log in with GitHubJoin 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