You are currently viewing Countdown Timer With Download Button Using Html, CSS & Javascript

Countdown Timer With Download Button Using Html, CSS & Javascript

Countdown Timer With Download Button Using Html, CSS & Javascript

Countdown Timer With Download Button Using Html, CSS & Javascript
Countdown Timer With Download Button Using Html, CSS & Javascript

 

Welcome To Code With Random Blog. In This Blog, We Learn How To Create A Countdown Timer With Download Button. We Use Html, Css, And Javascript For This Countdown Timer With Download Button.

I Hope You Enjoy Our Blog So Let’s Start With A Basic Html Structure For The Countdown Timer With Download Button.

Html Code For Countdown Timer With Download Button

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
<div class="download-container">
<a href="#" class="download-btn">Download files <i class="fas fa-download"></i></a>
<div class="countdown"></div>
<div class="pleaseWait-text">Please wait ...</div>
<div class="manualDownload-text">
If the download didn't start automatically, <a href="#" class="manualDownload-link" target="_top">click here</a>
</div>
</div>

There Is All The Html Code For The Countdown Timer With Download Button. Now, You Can See An Output Without Css And Javascript For Countdown Timer With Download Button.

Play Unlimited Quiz Of HTML, CSS, and JavaScript – Click Here

Then We Write Css And Javascript For Countdown Timer With Download Button.

Only Html Code Output Of Countdown Timer With Download Button

Countdown Timer With Download Button Using Html, CSS & Javascript
Countdown Timer With Download Button Using Html, CSS & Javascript

Css Code For Countdown Timer With Download Button

@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.download-container {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 0 0.5rem;
}
.download-btn {
background: #4285f4;
color: #fff;
text-decoration: none;
width: 260px;
padding: 18px 0;
text-align: center;
font-size: 1.3rem;
font-weight: 400;
border-radius: 5px;
box-shadow: 0 5px 25px rgba(1, 1, 1, 0.15);
}
.download-btn:hover {
background: #2345f4;
}
.download-btn i {
margin-left: 5px;
}
.countdown {
margin-bottom: 20px;
font-size: 1.5rem;
font-weight: 700;
}
.countdown span {
color: #0693f6;
font-size: 1.5em;
font-weight: 800;
}
.pleaseWait-text,
.manualDownload-text {
font-size: 1.1rem;
font-weight: 600;
display: none;
}
.manualDownload-link {
text-decoration: none;
color: #0693f6;
font-weight: 800;
}

Html + Css Updated Output Of Countdown Timer With Download Button

Countdown Timer With Download Button Using Html CSS Javascript
Countdown Timer With Download Button Using Html CSS Javascript

 

Javascript Code Of Countdown Timer With Download Button

const download = document.querySelector('.download-btn');
const countdown = document.querySelector('.countdown');
const pleaseWaitText = document.querySelector('.pleaseWait-text');
const manualDownloadText = document.querySelector('.manualDownload-text');
const manualDownloadLink = document.querySelector('.manualDownload-link');
var timeLeft = 10;
download.addEventListener('click', () => {
download.style.display = "none";
countdown.innerHTML = `Download will begin automatically in <span>${timeLeft}</span> seconds`;
var downloadTimer = setInterval(function timeCount() {
timeLeft--;
countdown.innerHTML = `Download will begin automatically in <span>${timeLeft}</span> seconds`;
if (timeLeft <= 0) {
clearInterval(downloadTimer);
pleaseWaitText.style.display = "block";
let download_href = "https://drive.google.com/file/d/11v_l0nZ7ha2H-S2KP1nFcZQA1OS6PrXe/view?usp=sharing";
window.location.href = download_href;
manualDownloadLink.href = download_href;
setTimeout(() => {
pleaseWaitText.style.display = "none";
manualDownloadText.style.display = "block";
}, 1000);
}
}, 1000);
});

Final Output Of Countdown Timer With Download Button

Countdown Timer With Download Button Using Html CSS Javascript
Countdown Timer With Download Button Using Html CSS Javascript

 

Countdown Timer With Download Button Using Html CSS Javascript
Countdown Timer With Download Button Using Html CSS Javascript

 

Countdown Timer With Download Button Using Html CSS Javascript
Countdown Timer With Download Button Using Html CSS Javascript
Here Is Our Updated Output With Completing Javascript. Hope You Like The Countdown Timer With Download Button. You Can See The Output Video And Project Screenshots.10+ Javascript Project Ideas For Beginners( Project Source Code)See Our Other Blogs And Gain Knowledge In Front-end Development.

Thank You !

In This Post, We Learn How To Create A Countdown Timer With Download Button Using Html Css Javascript. If We Made A Mistake Or Any Confusion, Please Drop A Comment To Reply Or Help You In Easy Learning.

Written By – Code With Random/anki
Code By – Teja Devisetti

Leave a Reply