countdown 02

by bvotcode

HTML

<!DOCTYPE html>

<!-- Coding By Royal 420 KE | youtube.com/royal420ke -->

<html lang="en">

<head>

    <meta charset="UTF-8">

   

    <link rel="stylesheet" href="style.css">

</head>

<body>

    <div id="time">

        <div class="circle" style="--clr:#ff2972">

            <div class="dots day_dot"></div>

            <svg>

                <circle cx="70" cy="70" r="70"></circle>

                <circle cx="70" cy="70" r="70" id="dd"></circle>

            </svg>

            <div id="days">00<br><span>Days</span></div>

        </div>

        <div class="circle" style="--clr:#fff">

            <div class="dots hr_dot"></div>

            <svg>

                <circle cx="70" cy="70" r="70"></circle>

                <circle cx="70" cy="70" r="70" id="hh"></circle>

            </svg>

            <div id="hours">00</div>

        </div>

        <div class="circle" style="--clr:#fee800">

            <div class="dots min_dot"></div>

            <svg>

                <circle cx="70" cy="70" r="70"></circle>

                <circle cx="70" cy="70" r="70" id="mm"></circle>

            </svg>

            <div id="minutes">00</div>

        </div>

        <div class="circle" style="--clr:#04fc43">

            <div class="dots sec_dot"></div>

            <svg>

                <circle cx="70" cy="70" r="70"></circle>

                <circle cx="70" cy="70" r="70" id="ss"></circle>

            </svg>

            <div id="seconds">00</div>

        </div>

    </div>

    <h2 class="newYear">2023<br><span>Happy New 

        Year</span></h2>



</body>

</html>

CSS

*{

    margin: 0;

    padding: 0;

    box-sizing: border-box;

    font-family: sans-serif;

}

body{

    display: flex;

    justify-content: center;

    align-items: center;

    min-height: 100vh;

    background: #2f363e;

}

#time{

    display: flex;

    gap: 30px;

}

#time .circle{

    position: relative;

    width: 150px;

    height: 150px;

    display: flex;

    justify-content: center;

    align-items: center;

}

#time .circle svg{

    position: relative;

    width: 150px;

    height: 150px;

    transform: rotate(270deg);

}

#time .circle svg circle{

    width: 100%;

    height: 100%;

    fill: transparent;

    stroke-linecap: round;

    stroke-width: 8;

    stroke: #282828;

    transform: translate(5px,5px);

}

#time .circle svg circle:nth-child(2){

    stroke: var(--clr);

    stroke-dasharray: 440;

    stroke-dashoffset: 440;

}

#time div{

    position: absolute;

    text-align: center;

    color: #fff;

    font-weight: 300;

    font-size: 1.5em;

}

#time div span{

    position: absolute;

    transform: translateX(-50%) translateY(0px);

    font-size: 0.35em;

    text-transform: uppercase;

    font-weight: 300;

    letter-spacing: 0.1em;

}

#time .dots{

    position: absolute;

    width: 100%;

    height: 100%;

    border-radius: 50%;

    display: flex;

    justify-content: center;

    align-items: flex-start;

    z-index: 1000;

}

#time .dots::before{

    content: '';

    position: absolute;

    top: -3px;

    width: 15px;

    height: 15px;

    background: var(--clr);

    border-radius: 50%;

    box-shadow: 0 0 20px var(--clr),

    0 0 60px var(--clr);

}

.newYear{

    font-size: 8em;

    font-weight: 500;

    color: #fff;

    text-align: center;

    line-height: 0.6em;

    display: none;

}

.newYear span{

    font-size: 0.5em;

    font-weight: 300;

}

JavaScript

let days = document.getElementById('days');

        let hours = document.getElementById('hours');

        let minutes = document.getElementById('minutes');

        let seconds = document.getElementById('seconds');



        let dd = document.getElementById('dd');

        let hh = document.getElementById('hh');

        let mm = document.getElementById('mm');

        let ss = document.getElementById('ss');



        let day_dot = document.querySelector('.day_dot');

        let hr_dot = document.querySelector('.hr_dot');

        let min_dot = document.querySelector('.min_dot');

        let sec_dot = document.querySelector('.sec_dot');



        let endDate = '10/10/2024 00:00:00';

        //date format i.e., mm/dd/yyyy



        let x = setInterval(function(){

            let now = new Date(endDate).getTime();

            let countDown = new Date().getTime();

            let distance = now - countDown;

            //time calculation for remaining days,hours, seconds



        let d = Math.floor(distance / (1000 * 60 * 60 *

        24));

        let h = Math.floor((distance % (1000 * 60 * 60 *

        24)) / (1000 * 60 * 60));

        let m = Math.floor((distance % (1000 * 60 * 

        60)) / (1000 * 60 ));

        let s = Math.floor((distance % (1000 * 60 )) / (1000));



        //lets output the result in the elements with id 

        days.innerHTML = d + "<br><span>Days</span>";

        hours.innerHTML = h + "<br><span>Hours</span>";

        minutes.innerHTML = m + "<br><span>Minutes</span>";

        seconds.innerHTML = s + "<br><span>Seconds</span>";



        //lets animate stroke

        dd.style.strokeDashoffset = 440 - (440 * d) / 365;

        //365 days in a year

        hh.style.strokeDashoffset = 440 - (440 * h) / 24;

        //there is 24hours in a day

        mm.style.strokeDashoffset = 440 - (440 * m) / 60;

        //60 minutes in an hour

        ss.style.strokeDashoffset = 440 - (440 * s) / 60;

        //60...