HTML CSS & JAVASCRIPT, YouTube

Countdown Timer using Html CSS & vanilla Javascript

Countdown Timer using Html CSS & vanilla Javascript - Countdown Clock

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.

Countdown Timer using Html CSS & vanilla Javascript

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

😍😍 Check Others Programming Video👇

➡️How To Create a Simple Animation Movie Using HTML & CSS: https://youtu.be/7uj3nh-Dn6Y  

➡️ CSS 3d Layered Image Hover Effects CSS: https://www.youtube.com/watch?v=0qdWV… 

➡️Responsive website html css javascript | part( 1 ): https://www.youtube.com/watch?v=g0ART… 

➡️ Responsive Services Section: https://www.youtube.com/watch?v=wvLky

➡️ CSS Clip Path Hover Circle Hover Effects: https://www.youtube.com/watch?v=cRSgo

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

➡️  Neon Light Button Animation Effects on Hover | CSS Snake Border: https://www.youtube.com/watch?v=GtVSF… 

➡️ Responsive Box Model Web Design Using CSS Flexbox: https://www.youtube.com/watch?v=03RuV… 

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

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

➡️Scroll top button : https://www.youtube.com/watch?v=9fDEJ… 

➡️ Animated Eid Mubarak 2021 using Html CSS & JavaScript: https://www.youtube.com/watch?v=60H2g

Here is all Source code. You can follow this steps:

  1. Create 1 folder
  2. create 1 HTML file: index.html
  3. create 1 CSS file: style.css
  4. copy HTML code and pest HTML file, copy CSS code and past CSS file
  5. Now give a smile and jump out loud. 😍😍
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Coming soon Time</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
   <div class="loading top">
       <div class="loading-inner">
           <h1>Web <span style="color: #009468">Solution</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, 2021 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;
}

You can download Free Image Here: Unsplash

Don’t Forget to Follow me on all Social Network

YouTube: https://www.youtube.com/channel/UCw9etYfx-25oKB_qt1fFNWw

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

LinkedIn: https://www.linkedin.com/in/sajjat-ho… 

GitHub: https://github.com/cgsaleh8383

You can see Image Hover Effect

#codingbd#newyear#htmlcss

Related Posts

Leave a Reply

Your email address will not be published.