Countdown Clock using Html CSS & vanilla Javascript

Countdown Clock using Html CSS & vanilla Javascript

Coding BD given here Countdown Timer using Html CSS & vanilla Javascript – Countdown Clock. We created a New Year Countdown Clock. It is the most important part Of Pure css countdown timer animation. We have given more importance to vanilla Javascript. We have used a responsive countdown timer because they need high effects. Thank you so much.

Create a Payoneer Account & Earn 25$:→  https://www.payoneer.com/raf/?rid=75EACA0E-2937-4D6B-A225-4255EB9B758A 

Create a Fiverr Account & Earn 100$:→ http://www.fiverr.com/s2/83f49a18f7 

😍😍 If You like this video Please like, share and subscribe This video.😍😍 

😍😍 Check Others Programming Video👇

➡️How To Create Login Form In HTML and CSS: https://www.youtube.com/watch?v=51t-kR8MUvY 

➡️ contact page design with map using html css: https://www.youtube.com/watch?v=RC2-bq4fBYI 

➡️  Pure sliding tabs using html and css: https://www.youtube.com/watch?v=QonCizKyHrs

➡️ Animated Background Image Loop Animation: https://www.youtube.com/watch?v=7HyTFr5kNSU&t=284s 

➡️  water wave background animation effects: https://www.youtube.com/watch?v=dnCfBet94r8&t=49s 

➡️ How to Download Source code in Coding BD: https://www.youtube.com/watch?v=WXAZ-BScKBE&t=3s  

➡️ Responsive website html css javascript | part( 1 ): https://www.youtube.com/watch?v=g0ART2Jc3yw&t=3s 

➡️ Responsive Services Section:  https://www.youtube.com/watch?v=wvLkyrkoS_w&t=69s 

➡️ Plane animation only html css: https://www.youtube.com/watch?v=XcYlfp8sFX0 

➡️ CSS Responsive CARD Hover Effects & Adding Stroke to Text | Html5 CSS3 2021: https://www.youtube.com/watch?v=QVMJ5PdX7Ag&t=14s 

➡️  Neon Light Button Animation Effects on Hover | CSS Snake Border: https://www.youtube.com/watch?v=GtVSF-efdJQ&t=102s 

➡️ Responsive Box Model Web Design Using CSS Flexbox: https://www.youtube.com/watch?v=03RuVB6B5KQ&t=0s 

➡️ Digital Clock with Animated Progress-bar | HTML CSS & Vanilla Javascript:  https://www.youtube.com/watch?v=6A6HpxMmfX4&t=0s 

➡️ How to create a light to dark mode for HTML CSS & Vanilla Javascript 2021: https://www.youtube.com/watch?v=43FbR6ailIk&t=28s   

➡️Scroll top button : https://www.youtube.com/watch?v=9fDEJkXQIIs&t=77s 

Source code here: ( Countdown Clock using Html CSS & vanilla Javascript )

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Countdown Clock using Html CSS & vanilla Javascript</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
   <div class="loading top">
       <div class="loading-inner">
           <h1>Coding <span style="color: #009468">BD</span></h1>
           <h2>Our <span style="color: #009468">Website</span> is Coming Soon..!</h2>
           <br>
           <br>
           <div class="countdown"></div>
           <br>
           <br>
           <br>
       </div>
   </div>

   <script>
       let countdown = document.querySelector('.countdown');
       let x = setInterval(function() {
           let launchDate = new Date('june 30, 2022 13:00:00').getTime();
           let now = new Date().getTime();
           let distance = launchDate - now;
           let days = Math.floor(distance / (1000 * 60 * 60 * 24));
           let hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
           let mins = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
           let seconds = Math.floor((distance % (1000 * 60)) / 1000);
           countdown.innerHTML = `
            <div>${days}<span>Days</span></div>
            <div>${hours}<span>Hours</span></div>
            <div>${mins}<span>Minutes</span></div>
            <div>${seconds}<span>Seconds</span></div>
           `
       })
   </script>
</body>

</html>
@import url("https://fonts.googleapis.com/css2?family=Bubblegum+Sans&display=swap");
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Bubblegum Sans", cursive;
}

body {
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url(./runze-shi-1kIyfRdLMxI-unsplash.jpg);
    background-size: cover;
    height: 100vh;
    overflow: hidden;
}

.loading-inner {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    padding-top: 50px;
}

.loading h1 {
    font-size: 80px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #fff;
}

.loading h2 {
    font-size: 30px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #fff;
    margin: 20px 0;
}

.loading p {
    font-size: 70px;
    color: #fff;
}

.countdown {
    font-size: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.countdown div {
    padding:  20px;
    background: #009468;
    opacity: 0.7;
    color: #fff;
    margin:  5px;
    width: 200px;
    -webkit-box-reflect: below 1px linear-gradient(transparent, #000120);
}

.countdown span {
    display: block;
    font-size: 25px;
}

.top {
    margin-top: 120px!important;
}

Don’t Forget to Follow me on all Social Network,

Facebook Page: https://www.facebook.com/codingbd816 

LinkedIn: https://www.linkedin.com/in/sajjat8383/ 

Instagram: https://www.instagram.com/codingbd/ 
GitHub: https://github.com/cgsaleh8383

You can see How to create a light to dark mode for HTML CSS & Vanilla Javascript

Leave a Comment

Your email address will not be published.