Countdown Timer 01

by bvotcode

HTML

<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Countdown</title>
    <!-- Google Font -->
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
    <!-- Stylesheet -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="countdownstyle">
        <div class="box">
            <span class="num" id="day-box">00</span>
            <span class="text">Days</span>
        </div>
        <div class="box">
            <span class="num" id="hr-box">00</span>
            <span class="text">Hours</span>
        </div>
        <div class="box">
            <span class="num" id="min-box">00</span>
            <span class="text">Minutes</span>
        </div>
        <div class="box">
            <span class="num" id="sec-box">00</span>
            <span class="text">Seconds</span>
        </div>
    </div>

    <!-- Script -->
    <script src="script.js"></script>
</body>
</html>

CSS

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "Poppins",sans-serif;
    color: #ffffff;
}
body{
    background-color: #111111;
}
.countdownstyle{
    width: 80vw;
    display: flex;
    justify-content: space-around;
    gap: 10px;
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
}
.box{
    width: 28vmin;
    height: 28vmin;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    position: relative;
    box-shadow: 15px 15px 30px rgba(0,0,0,0.5);
    font-size: 16px;
}
.box:after{
    content: "";
    position: absolute;
    background-color: rgba(255,255,255,0.12);
    height: 100%;
    width: 50%;
    left: 0;
}
span.num{
    background-color: #202020;
    height: 100%;
    width: 100%;
    display: grid;
    place-items: center;
    font-weight: 600;
    font-size: 5em;
}
span.text{
    font-size: 1.2em;
    background-color: #2887e3;
    display: block;
    width: 100%;
    text-align: center;
    padding: 0.5em 0;
    font-weight: 400;
}
@media screen and (max-width: 1024px){
    .countdownstyle{
        width: 85vw;
    }
    .box{
        height: 26vmin;
        width: 26vmin;
        font-size: 12px;
    }
}
@media screen and (max-width: 768px){
    .countdownstyle{
        width: 90vw;
        flex-wrap: wrap;
        gap: 30px;
    }
    .box{
        width: calc( 50% - 40px );
        height: 30vmin;
        font-size: 14px;
    }
}
@media screen and (max-width: 480px){
    .countdownstyle{
        gap: 15px;
    }
    .box{
        width: 100%;
        height: 25vmin;
        font-size: 8px;
    }
    .span.text{
        font-size: 1.5em;
    }
}

JavaScript

let dayBox = document.getElementById("day-box");
let hrBox = document.getElementById("hr-box");
let minBox = document.getElementById("min-box");
let secBox = document.getElementById("sec-box");

//Format: Date(year, month, day, hour, minute)
//Year is counter from 0 to 11
let endDate = new Date(2024,8,5,16,30);
//Output value in milliseconds
let varendTime = endDate.getTime();

function countdownblock(endTime){
    let todayDate = new Date(endTime);
    //Output value in milliseconds
    let todayTime = todayDate.getTime();

    let remainingTime = endTime - todayTime;

    //60sec => 1000 milliseconds
    let oneMin = 60 * 1000;
    //1hr => 60 minutes
    let oneHr = 60 * oneMin;
    //1 day => 24 hours
    let oneDay = 24 * oneHr;

    //Function to format number if it is single digit
    let addZeroes = num => num < 10 ? `0${num}` : num;

    //If end dat is before today date
    if(endTime < todayTime){
        clearInterval(i);
        document.querySelector(".countdownstyle").innerHTML = `<h1>Countdown had expired!</h1>`;
    }
    //If end date is not before today date
    else{
        //Calculating remaining days, hrs,mins ,secs
        let daysLeft = Math.floor(remainingTime / oneDay);
        let hrsLeft = Math.floor((remainingTime % oneDay) / oneHr);
        let minsLeft = Math.floor((remainingTime % oneHr) / oneMin);
        let secsLeft = Math.floor((remainingTime % oneMin) / 1000);

        //Displaying Valurs
        dayBox.textContent = addZeroes(daysLeft);
        hrBox.textContent = addZeroes(hrsLeft);
        minBox.textContent = addZeroes(minsLeft);
        secBox.textContent = addZeroes(secsLeft);
    }
}
let i = setInterval(1,1000);
countdownblock(varendTime);