Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Countdown Timer - SCSS, JS

#accessibility#gulp#sass/scss
P
Daveβ€’ 5,245

@dwhenson

Desktop design screenshot for the Launch countdown timer coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View challenge

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

P
ApplePieGiraffeβ€’ 30,545

@ApplePieGiraffe

Posted

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

P
ApplePieGiraffeβ€’ 30,545

@ApplePieGiraffe

Posted

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
P
Daveβ€’ 5,245

@dwhenson

Posted

@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
P
Daveβ€’ 5,245

@dwhenson

Posted

@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

@trafiki

Posted

Quick question, What did you use for the animation?

0

P
Daveβ€’ 5,245

@dwhenson

Posted

@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

@trafiki

Posted

@dwhenson Okay thank you

0

Please log in to post a comment

Log in with GitHub
Discord logo

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