Skip to content
Submitted about 3 years ago

Countdown Timer - SCSS, JS

Dave•5,295
@dwhenson
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Launch countdown timer
  • HTML
  • CSS
  • JS
3intermediate

Design comparison

SolutionDesign

Solution retrospective

I had to do a lot of mental gymnastics to get the animation working on this one. I feel like a need to lie down for about a week now. Any feedback or suggestions most welcome.

Just updated this one as I noticed that the JS refresh was overwriting the transitions. It works now but the JS is not ideal and very repetitive.

Community feedback

  • ApplePieGiraffe•30,545
    @ApplePieGiraffePosted about 3 years ago

    Hey, Dave! 👋

    It's been a while! I've been rather quiet lately since I've been pretty busy. But I'm happy to notice you submitted another solution! 🎉 You've done a great job on this one!

    I haven't completed this challenge, yet, but I think you've done really well on the flipping animation. And you've nailed the design and the responsiveness of the site! 👏

    Tiny thing (but it's all I can suggest, really)—you might have forgotten to add a favicon to your solution. 😅

    Also, you might want to consider adding some sr-only text inside the links in the footer of the page just so screen readers have something to read for the purpose of each link. 😉

    And, of course, keep coding (and happy coding, too)! 😄

    Marked as helpful
    1
    ApplePieGiraffe•30,545
    @ApplePieGiraffePosted about 3 years ago

    Also—just wanted to say, you've improved a lot since joining Frontend Mentor! That's been amazing to see especially since this site has been such a help to myself and it's always great to watch others grow here, too! 😀

    Keep going with these challenges! 👍

    1
    Dave•5,295
    @dwhensonPosted about 3 years ago

    @ApplePieGiraffe nice to hear from you again!! Thanks for the tips - yes, usually add those announcements in the icon only links. My brain must have been mushed from all that rotating - and I never thought about the favicon - I'll look into that!

    1
    Dave•5,295
    @dwhensonPosted about 3 years ago

    @ApplePieGiraffe Thank so much for the kind words.

    For me this site has just been the best thing ever! So useful. I get to learn something then try it out immediately - and then really learn it!

    I've been pushing on SSGs lately and hope to update a solution or two using them in the next day or two.

    1
  • Akerele Tunde•165
    @trafikiPosted about 3 years ago

    Quick question, What did you use for the animation?

    0
    Dave•5,295
    @dwhensonPosted about 3 years ago

    @trafiki I just used the in-built CSS animation properties, to add a rotateX at the right interval - the JS is a total mess - but I think it's working....

    0
    Akerele Tunde•165
    @trafikiPosted about 3 years ago

    @dwhenson Okay thank you

    0

Please log in to post a comment

Log in with GitHub

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