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
@SahasSaurav
Posted
Hey, great job and really love the way you are using svg. Everything looks fabulous and responsive
@cloworm
Posted
Thank you for noticing! Seemed like the best way to handle the cutouts in the number cards
@SahasSaurav
Posted
@cloworm can help me to learn to how to use svg like this?
@cloworm
Posted
Give this article a look: https://css-tricks.com/scooped-corners-in-2018/
@ApplePieGiraffe
Posted
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! 🎄
@cloworm
Posted
@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 :)
@ApplePieGiraffe
Posted
@cloworm
:) 👍
Very nice work, this is great!
To 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 like data-id=""
It's important not to duplicate ids, they need to be unique.
Hope that helps
@cloworm
Posted
@grace-snow Thanks for the advice! Just made sure all of the ids are unique and am now passing all tests :)
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
