Frontend Mentor - Launch countdown timer solution

This is a solution to the Launch countdown timer challenge on Frontend Mentor

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Useful resources
• Author
• Acknowledgments

Note: Delete this note and update the table of contents based on what sections you keep.

Overview

The challenge

Users should be able to:

• See a live countdown timer that ticks down every second (start the count at 7 days)
• Bonus: Desktop and mobile version

Screenshot

Links

• Solution URL: The code
• Live Site URL: If you want to see the app live

My process

Built with

• Mobile-first workflow
• React - JS library
• Next.js - React framework
• Tailwind CSS - For styles
• Flexbox
• CSS Grid

What I learned

This was one of my first Next project, and my first tailwind so I basically learned how to use Next, how to use React with TS and not JS, how to implement tailwind

This is how we implement Tailwind, it applies CSS for us, md: is a breakpoint to adapt the css on large device like desktop

      <h1
        className="mt-48 font-redhat text-2xl font-bold tracking-wide text-white 
        md:mt-32 md:text-3xl md:tracking-widest"
      >

And this is how the countdown works

  const calculateTimeLeft = () => {
    let date = new Date()
    let difference =
      +new Date(
        `${date.getMonth() + 1}/${date.getDate() + days}/${date.getFullYear()}`
      ) - +new Date()

    let timeLeft: TimeLeft = {
      hours: 0,
      minutes: 0,
      seconds: 0,
      days: 0,
    }

    if (difference > 0) {
      timeLeft = {
        days: Math.floor(difference / (1000 * 60 * 60 * 24)),
        hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
        minutes: Math.floor((difference / 1000 / 60) % 60),
        seconds: Math.floor((difference / 1000) % 60),
      }
    }

    return timeLeft
  }

Useful resources

I used the resources given by frontend mentor to realize the challenge, so screenshots and style guide for font, colors etc... : https://www.frontendmentor.io/challenges/launch-countdown-timer-N0XkGfyz-/hub/launch-countdown-timer-S1M3hmsB9

Author

• Website - Simon Mollet
• Frontend Mentor - @MolletSimon
• Linkedin - Simon Mollet