Countdown w/ Flip Animation & Customizable Dates
Design comparison
Solution retrospective
Hi Everyone!
I put a lot of effort into getting the flip animation right. Let me know what you think!
I also added a bonus feature that lets you customize the date you're counting down to. Just pass in an ISO 8601 Date String into the date query param to use it.
Countdown to Christmas 2021: https://countdown.cloworm.vercel.app/?date=2021-12-25T05:00:00.000Z
Countdown to 2022: https://countdown.cloworm.vercel.app/?date=2022-01-01T05:00:00.000Z
Community feedback
- @SahasSauravPosted almost 4 years ago
Hey, great job and really love the way you are using svg. Everything looks fabulous and responsive
1@clowormPosted almost 4 years agoThank you for noticing! Seemed like the best way to handle the cutouts in the number cards
1@SahasSauravPosted almost 4 years ago@cloworm can help me to learn to how to use svg like this?
0@clowormPosted almost 4 years agoGive this article a look: https://css-tricks.com/scooped-corners-in-2018/
1 - @ApplePieGiraffePosted almost 4 years ago
Hey, nice job on this challenge, Chloe Echikson! 👍
Everything looks great and responds well! 👏 The flipping animation is very nice! 🤩 It's also cool that you added two versions of this countdown challenge! 😃
Keep coding (and happy coding, too)! 😁
And happy holidays! 🎄
1@clowormPosted almost 4 years ago@ApplePieGiraffe Thanks very much! You are the person that actually inspired me to be creative with my solutions since I saw your X-mas themed Todo submission :)
2 - @grace-snowPosted almost 4 years ago
Very nice work, this is great!
1@grace-snowPosted almost 4 years agoTo solve all your report errors, I think you can just use a class or custom attribute on your cards so you're not using IDs. If used for styling, you could use
className
or if used for data you could use something likedata-id=""
It's important not to duplicate ids, they need to be unique.
Hope that helps
1@clowormPosted almost 4 years ago@grace-snow Thanks for the advice! Just made sure all of the ids are unique and am now passing all tests :)
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