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