Skip to content
Submitted almost 3 years ago

⏳Launch Countdown Timer | HTML-CSS-JavaScript | Canvas | Webpack

bunee•2,020
@buneeIsSlo
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

Wow! I severely underestimated this challenge, trying to create the card flip animation consumed a lot of my time. Not particularly proud of the code on this one, but with some help, I got there in the end.

Features

  • Added particles effect instead of the static stars background.
  • Added animations on page load.

Questions

  1. Is the particles effect smooth on your device?
  2. At the moment, canvas does not resize along with the viewport. Do you know how to fix it?
  3. Did you find any bugs?

of course, I'd be happy to receive any kind of feedback you have for me.

Acknowledgment

  • I'd like to thank @tediko for his solution to this challenge. After studying his code, a lot things became apparent to me.
  • Also shout out to this one person on slack(I'm sorry I lost their username) for showing me this useful codepen

Click here to view the live site

Click here to view the code

P.S. If you have any questions for me, Feel free to comment or message me on slack :)

Community feedback

  • Ollie•580
    @ohermans1Posted over 2 years ago

    Was just looking through a few of these solutions to see how other people have done the flip board and came across yours! Love it, def my favourite.

    Also, the particles are super smooth on my device (Win 11, Chrome) - how did you do them?

    Also cheers for sharing the countdown codepen!

    Marked as helpful
    0
    bunee•2,020
    @buneeIsSloPosted over 2 years ago

    @ohermans1 Thanks! I'm glad you like my solution.

    To be honest, what I've created here is an overengineered solution. I'm sure if you look hard enough you'll find solutions that are way more efficient than mine.

    I found this reddit post showing how to simulate a snowfall with the HTML Canvas element. I went through the code and figured out a way to reverse the animation :P

    I took a look at your solution, and you've done pretty good too. If you're ever stuck on a challenge or aren't sure how to go about implementing a certain feature, you should head over to FEM's slack channel. There are plenty of folks who'd be happy to help you out. That's how I found about the codepen.

    Thanks again for your feedback :)

    1
    Ollie•580
    @ohermans1Posted over 2 years ago

    @buneeIsSlo thanks! I ended up quiting a little early on this challenge! But some of the way there.

    I've been meaning to have a play with html canvas, I'll take a look at your code :)

    Keep up the awesome work, you're smashing it!

    1
  • Naveen Gumaste•10,480
    @NaveenGumastePosted almost 3 years ago

    hay! bunee Nice work

    1
    bunee•2,020
    @buneeIsSloPosted almost 3 years ago

    @Crazimonk Thanks! :)

    1

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