Skip to content
Submitted almost 4 years ago

Launch Countdown Timer - React.JS / SCSS

Dennis Griffin•1,320
@dgdev1024
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

Had to compromise a bit on the timer display animation, but I think you'll like what I came up with. This one was a fun one. I even threw in a little secret: You can customize the point in time the timer is counting down to by setting '-fm-lct-target-date' in your browser's localStorage to a valid JavaScript date string, something like this:

localStorage.setItem('-fm-lct-target-date', '6-23-2021 12:00 AM');

Let me know what you think about this one. Hope you like it!

Community feedback

  • Josh•200
    @JoshAnabaPosted almost 4 years ago

    this is cool , I love the animation :)

    1
  • ApplePieGiraffe•30,545
    @ApplePieGiraffePosted almost 4 years ago

    Hi, Dennis Griffin! 👋

    Nice to see you complete another challenge! 😀 You've done a good job on this one and adding that extra point of functionality was a nice touch! 👏

    I'd just like to suggest allowing the background image at the bottom of the page to grow with the width of the screen to avoid having empty space to the sides of the image when the screen width increases in the desktop layout. 😉

    Keep coding (and happy coding, too)! 😁

    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