If you have downloaded source codes of any project on this site, then you know there is a download button that starts the timer for particular seconds, and the file download only after the timer is finished.
In this blog, you’ll learn how to create this Download Button with Timer in HTML CSS & JavaScript. I believe the codes and logic behind creating a timer-based download button won’t be difficult for you to understand if you already have basic knowledge of JavaScript.
If you have a website then you can use this download button to download files for the users. Otherwise, you can create this button to improve your coding skills in HTML CSS & JavaScript.
Video Tutorial of Download Button with Timer
I hope you’ve watched the video tutorial till the end and understood the codes and logic behind creating this Timer-based Download Button using HTML CSS & Vanilla JavaScript.
If you haven’t watched the video, you can follow the given steps to create this download button by yourself. Otherwise, go to the bottom of this blog post to download the source code files of it.
Steps to Create A Download Button with Timer in JavaScript
To create A Download Button with Timer, follow the given steps line by line:
- Create a folder. You can put any name of this folder and create the below-mentioned files inside this folder.
- Create a index.html file. The file name must be index and its extension .html
- Create a style.css file. The file name must be style and its extension .css
- Create a script.js file. The file name must be script and its extension .js
First, paste the following codes into your index.html file. If you look at the line.no 15 in the codes, there you can see data-timer=”10″. This is the number of seconds for the timer to run where 10 means the timer will run from 10 to 0 seconds. So, change it according to your need.
<!DOCTYPE html>
<!-- Coding By CodingNepal - youtube.com/codingnepal -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Download Button with Timer | CodingNepal</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Google Font Link for Icons only -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
<script src="script.js" defer></script>
</head>
<body>
<button class="download-btn" data-timer="10">
<span class="icon material-symbols-rounded">vertical_align_bottom</span>
<span class="text">Download Files</span>
</button>
</body>
</html>
Second, paste the following codes into your style.css file.
/* Import Google font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
display: flex;
min-height: 100vh;
align-items: center;
justify-content: center;
background: #E3F2FD;
}
.download-btn{
outline: none;
border: none;
color: #fff;
display: flex;
cursor: pointer;
padding: 16px 25px;
border-radius: 6px;
align-items: center;
white-space: nowrap;
background: #4A98F7;
transition: all 0.2s ease;
}
.download-btn:hover{
background: #2382f6;
}
.download-btn.timer{
color: #000;
background: none;
transition: none;
font-size: 1.6rem;
pointer-events: none;
}
.download-btn.timer b{
color: #4A98F7;
padding: 0 8px;
}
.download-btn .icon{
font-size: 2rem;
}
.download-btn .text{
font-size: 1.5rem;
padding-left: 10px;
}
Last, paste the following codes into your script.js file.
const downloadBtn = document.querySelector(".download-btn");
const fileLink = "https://drive.google.com/uc?export=download&id=1aYiaLn3YOjL-_o5QBCy7tU1epqA6gZoi";
const initTimer = () => {
if(downloadBtn.classList.contains("disable-timer")) {
return location.href = fileLink;
}
let timer = downloadBtn.dataset.timer;
downloadBtn.classList.add("timer");
downloadBtn.innerHTML = `Your download will begin in <b>${timer}</b> seconds`;
const initCounter = setInterval(() => {
if(timer > 0) {
timer--;
return downloadBtn.innerHTML = `Your download will begin in <b>${timer}</b> seconds`;
}
clearInterval(initCounter);
location.href = fileLink;
downloadBtn.innerText = "Your file is downloading...";
setTimeout(() => {
downloadBtn.classList.replace("timer", "disable-timer");
downloadBtn.innerHTML = `<span class="icon material-symbols-rounded">vertical_align_bottom</span>
<span class="text">Download Again</span>`;
}, 3000);
}, 1000);
}
downloadBtn.addEventListener("click", initTimer);
If you look at the second line in the codes, there is a fileLink variable where I’ve given my Google Drive file link. You’ve to remove that link and paste your own link to download. If you want to give your Google Drive link there then you can replace this “1aYiaLn3YOjL…” ID with your file ID.
Steps to Get Downloadable Id of Google Drive File
To get a file ID, upload your file on Google Drive > Right Click on the File > Click Share > Update General Access to “Anyone with the link” > Click Copy Link > Paste it on the notepad. In this link, you’ll get the file ID. The URL looks like this: https://drive.google.com/file/d/FILE-ID/view?usp=sharing
That’s all, now you’ve successfully created a Download Button with Timer using HTML CSS & JavaScript. If you want to download the codes of this Download Button, you can download them by clicking on the give download button.
But, only download it if you read the blog completely because you need to do some changes to the codes which I’ve mentioned above.
