Skip to content
Submitted about 4 years ago

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

tediko•6,700
@tediko
A solution to the Launch countdown timer challenge
Preview (opens in new tab)Code (opens in new tab)

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! 😁

Code

Please log in to post a comment

Log in

Community feedback

  • Bonrey•1,130
    @Bonrey

    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! 😉

  • Anna Leigh•5,135
    @brasspetals

    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.
  • Thomas•185
    @thomas-auffroy

    Great job !

  • ApplePieGiraffe•30,525
    @ApplePieGiraffe

    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)! 😂

  • P
    Marko Nikolajević•1,095
    @MarkoNikolajevic

    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 :)

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