Submitted almost 3 years ago

Countdown timer - Mobile first, Flexbox, Sass, JS, backface-visibility

tediko• 6,560

@tediko

Preview site View code

This is a solution for...

Launch countdown timer

HTML
CSS
JS

3intermediate

View challenge

Design comparison

SolutionDesign

Solution retrospective

Hello👋!

Damn! It was really tough challenge. This was my second time i tried to finish it, this time successfully. This is few things I used while creating this project:

Used backface-visibility property. This property defines whether or not the back face of an element should be visible when facing the user. So when i rotate my cards, back of them isn't visible to the user so I can create this nice flip animation.
Added .sr-only element to announce countdown time to screen readers. Also used aria-live="polite" attribute to expose dynamic content changes in a way that can be announced by assistive technologies after every minute of countdown.
For interactive elements like socials icons i used :focus-visible pseudo class (spec). This selector indicate focus when it is helpful to the user - such as in cases where the user interacts with the page via a keyboard or some other non-pointing device.
Implement prefers-reduced-motion CSS media feature which is used to detect if the user has requested that the system minimize the amount of non-essential motion it uses. I used it in my resets so every element with animation apply to that.
I didn't like flip animation when these "holes" on card were done with before/after elements. Instead i created svg-backgrounds for cards and this way card animation also contains these holes - I think it looks way better.
Hats off to Wes Bos, I found his countdown timer tutorial and it was really helpfull to understand how countdown should work. Even tho it was just tip of the iceberg when it comes to JS in this project i think it was very helpful to understand how countdown timer should work.

I ran into a problem with safari where my card flip was looking good both on firefox and chrome, but on safari there was a weird bug where two my animated cards was shown at once. I struggled with if for two days but turned out that I have to use backface-visibility on two rotated cards instead just on one. It seems like safari ignores my z-indexes in this case, and firefox/chrome doesn't - but working good now.

No specific questions here but any additional feedback will be appreciated!

Thanks! 😁

Community feedback

Bonrey• 1,130

@Bonrey

Posted almost 3 years ago

Hi, @tediko! Glad to see you completed this challenge! It is quite a tough one, indeed!

First of all, the countdown animation you added is sublime, and I think there is hardly anything that could be improved. 😅 The site is responsive, and everything works without glitches. 👍🏻

Probably, there is only one bug that I found: on my screen, which is 1280px wide, the social media icons stick to the bottom of the page. Plus, when I scroll the page, a white strip appears at the bottom. You can see what I mean if you set (width, height) to (1024px, 580px) in the DevTools and try to scroll the page to the bottom.

Anyway, the overall look and feel are awesomesauce! So, I'd encourage you to keep coding! You're doing great! 😉

tediko• 6,560

@tediko

Posted almost 3 years ago

@Bonrey Hello! Thank you for kind words. I'll take a look at this bug tommorow, good catch! Looking forward to see yours next solution. 😁

Bonrey• 1,130

@Bonrey

Posted almost 3 years ago

@tediko you're welcome! 😄 Yeah, I'm currently working on a tough CSS challenge. 🙂

Anna Leigh• 5,135

@brasspetals

Posted almost 3 years ago

Another wonderful job! 🎉 The animation is great, and I love how much thought you put into accessibility. Also, thanks for sharing the timer tutorial. 🙏

You literally made your own svg backgrounds for this? 😲 That’s awesome! How did you go about doing that? (I know I could research this on my own, but wondering if you have any good resources. 😅)

I haven’t done this one myself, so can’t give as much thorough feedback as I’d like, but I’ll see what I can find:

I suggest adding a tiny bit of left/right padding to the heading. On small mobile screens (iPhone SE) it touches the sides of the viewport.
Footer positioning could be improved for mobile and tablet portrait layouts. Things get a bit goofy on mobile landscape modes, and the social icons are very close to the timer on iPad portrait mode.

tediko• 6,560

@tediko

Posted almost 3 years ago

@brasspetals Thank you for your feedback, as always! Yeah, like I said I didn't like the animation, it was "flat" without these holes since I did them with pseudo elements firstly. So I just opened adobe XD and I started trying to make this shape. The only thing I watched is this tutorial, which explains how to "subtract" two shapes. Then I created a rectangle, made top borders rounded, then added two small circles in bottom corners and i did the thingy like in this tutorial. You can export them as svg. 😅 I'll take care of these two bugs too, thanks again!

Thomas• 185

@thomas-auffroy

Posted almost 3 years ago

Great job !

tediko• 6,560

@tediko

Posted almost 3 years ago

@thomas-auffroy Thanks!

ApplePieGiraffe• 30,545

@ApplePieGiraffe

Posted almost 3 years ago

Hey there, tediko! 👋

You've done another fantastic job on a challenge! 👏 You nailed the card-flipping animation for this one (and I'll have to bookmark this and check out it when I come around to this challenge)! 🤩 I like the spinning animation you added to the social media icons, too! 😀

It looks like you've put a lot of thought into other details like accessibility and stuff for this challenge (which is great), so all I can say is, really... keep coding (and happy coding, too)! 😂

tediko• 6,560

@tediko

Posted almost 3 years ago

@ApplePieGiraffe Hey APG! Thank you for feedback, as always! At first I didn't know how to approach this card-flipping but when I found backface-visibility and understood how it works then it was easier. Congratulations on your new role on FM! 🥳🔥 Happy coding, too! ☺️

Marko Nikolajević• 1,065

@MarkoNikolajevic

Posted almost 3 years ago

Hi tediko

You did really a great job on this project! I like animations especially ones on social icons :). Your code is clean and clear. Good job adding sr-only for accessibility, this is a good plus.

Your work is almost pixel perfect from the design :)

Good job and keep on coding :)

tediko• 6,560

@tediko

Posted almost 3 years ago

@MarkoNikolajevic Thank you! I try to keep in mind user accessibility so i try my best to improve also in this way, even though it's a long way :D. Happy coding too!

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