PhilopaterHany / Launching-Soon-Template

Launch Countdown Timer - Frontend Mentor Challenge

Frontend Mentor - Launch Countdown Timer

This is a solution to the Launch Countdown Timer Challenge. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

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

Overview

The challenge

Users should be able to:

• See hover states for all interactive elements on the page.
• See a live countdown timer that ticks down every second.
• Bonus: When a number changes, make the card flip from the middle. ⭐ (not added yet)

Screenshot

• Desktop Screenshot
• Mobile Screenshot

Links

• Solution URL: Frontend Mentor
• Live Site URL: Github Pages

My process

Built with

• Semantic HTML5 markup
• CSS3 custom properties
• Vanilla JavaScript

What I learned

<div>
    <div class="number">
        <p id="days-p"></p>
        <div class="background top"></div>
        <div class="background bottom"></div>
        <div class="bullet left"></div>
        <div class="bullet right"></div>
    </div>
    <span>days</span>
</div>

const daysEle = document.getElementById("days-p");
const hoursEle = document.getElementById("hours-p");
const minutesEle = document.getElementById("minutes-p");
const secondsEle = document.getElementById("seconds-p");

let currDate = new Date();
let countDownDate = new Date(`Aug 4, ${currDate.getFullYear()} 00:00:01`);

const timer = setInterval(() => {
    let dateDiff = countDownDate.getTime() - new Date().getTime();

    if (dateDiff <= 0) {
        countDownDate = new Date(`Aug 4, ${currDate.getFullYear() + 1} 00:00:01`);
    }

    let days = Math.floor(dateDiff / (1000 * 60 * 60 * 24));
    let hours = Math.floor((dateDiff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    let minutes = Math.floor((dateDiff % (1000 * 60 * 60)) / (1000 * 60));
    let seconds = Math.floor((dateDiff % (1000 * 60)) / 1000);

    daysEle.innerHTML = days < 10 ? `0${days}` : days;
    hoursEle.innerHTML = hours < 10 ? `0${hours}` : hours;
    minutesEle.innerHTML = minutes < 10 ? `0${minutes}` : minutes;
    secondsEle.innerHTML = seconds < 10 ? `0${seconds}` : seconds;

}, 1000);

Author

• Website - Portfolio Is Coming Out Soon!
• Frontend Mentor - @PhilopaterHany
• Twitter - @PhilopaterHany4
• Linkedin - @phth
• Facebook - Philopater Hany
• Discord - #8178