HTML CSS & JAVASCRIPT, YouTube

Responsive Countdown Timer – New Year Countdown Clock

Responsive Countdown Timer using Html CSS & vanilla Javascript - New Year Countdown Clock

Coding BD given here Responsive Countdown Timer using Html CSS & vanilla Javascript. We create 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.

New Year Countdown Clock

😍😍 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>Time Count</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="imgBox"></div>
        <div class="countdownBox">
            <h2>Countdown to New Year <br/> <span>20<i>22</i></span></h2>
            <div class="countdown">
                <div id="day"></div>
                <div id="hour"></div>
                <div id="minute"></div>
                <div id="second"></div>
            </div>
        </div>
    </div>

    <script>
        const countDate = new Date('jan 1, 2022 00:00:00').getTime();

        function newYear() {
           const now = new Date().getTime(); 
           gap = countDate - now;


           const second = 1000;
           const minute = second * 60;
           const hour = minute * 60;
           const day = hour * 24;

           const d= Math.floor(gap / (day));
           const h= Math.floor((gap % (day)) / (hour));
           const m= Math.floor((gap % (hour)) / (minute));
           const s= Math.floor((gap % (minute)) / (second));

            document.getElementById('day').innerText = d;
            document.getElementById('hour').innerText = h;
            document.getElementById('minute').innerText = m;
            document.getElementById('second').innerText = s;
        }

        setInterval(function(){
            newYear()
        })
    </script>
</body>
</html>
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,[email protected],100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');
*{
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
}

.container{
    position: relative;
    width: 100%;
    height: 100vh;
    background: #AEB0B1;
    display: flex;
}

.container .imgBox{
    position: relative;
    width: 35%;
    height: 100%;
    background: url(watch.jpg);
    background-size: cover;
}

.container .countdownBox{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: calc(100% - 450px);
}

.container .countdownBox h2{
    text-align: center;
    font-size: 1.5em;
    color: #010204;
    text-transform: uppercase;
    letter-spacing: 4px;
    font-weight: 500;
    line-height: 4em;
}

.container .countdownBox h2 span{
    font-size: 6em;
    font-weight: 700 ;
}

.container .countdownBox h2 span i{
    font-style: initial;
    color: #5f6263;
}

.container .countdownBox .countdown{
    margin-top: 30px;
    background: rgba(0, 0, 0, 0.1);
    width: 100%;
    height: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container .countdownBox .countdown div{
    position: relative;
    width: 100%;
    text-align: center;
    color: #010204;
    font-size: 2.5em;
    font-weight: 500;
    margin: 0 15px;
    margin-top: -20px;
}

.container .countdownBox .countdown div::before{
    content: 'text';
    position: absolute;
    bottom: -35px;
    left: 0;
    width: 100%;
    height: 35px;
    color: #fff;
    font-size: 0.35em;
    font-weight: 500;
    line-height: 35px;
    letter-spacing: 4px;
    text-transform: uppercase;
}

.container .countdownBox .countdown div#day::before{
    content: 'days';
}
.container .countdownBox .countdown div#hour::before{
    content: 'hours';
}
.container .countdownBox .countdown div#minute::before{
    content: 'minutes';
}
.container .countdownBox .countdown div#second::before{
    content: 'seconds';
    color: #606061;
}

.container .countdownBox .countdown div#second{
    color: #5b5c5c;
}

@media (max-width: 991px) {
    .container .imgBox{
        display: none;
    }
    .container .countdownBox{
        width: 100%;
    }
}
@media (max-width: 600px) {
    .container .countdownBox h2{
        font-size: 1.1em;
    }
    .container .countdownBox .countdown{
        height: 100px;
    }
    .container .countdownBox .countdown div{
        width: 80px;
        font-size: 2em;
        font-weight: 500;
        margin: 0 5px;
        margin-top: -20px;
    }
    
}

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.