In today’s digital era, providing users with seamless and intuitive experiences on websites is crucial. One common feature is the ability to download files, but sometimes it’s necessary to implement additional functionality, such as a timer before allowing the download. In this article, we’ll walk through how to create a download file button with a timer using HTML, CSS, and JavaScript.
- Begin by creating a new folder. You have the freedom to name this folder as you wish.
- Inside this folder, create the following files:
- An HTML file named “index.html”. Ensure that the filename is “index” and it has the extension “.html”.
- A CSS file named “style.css”. Ensure that the filename is “style” and it has the extension “.css”.
- A JavaScript file named “script.js”. Ensure that the filename is “script” and it has the extension “.js”.
Step 1: Setting Up the HTML Structure
Let’s start by creating the HTML structure for our webpage. We’ll need a button for downloading the file and a timer to indicate when the download will become available.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Download Button with Timer</title>
<link rel="stylesheet" href="down.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="down.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>
Step 2: Styling with CSS
Next, let’s add some basic styling to make our button and timer visually appealing.
/* 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: #000000;
}
.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;
}Step 3: Adding JavaScript Functionality
Now, let’s add JavaScript functionality to start a countdown timer when the button is clicked. Once the timer reaches zero, the download link will become available.
If you wish to watch tutorial and learn you can watch it now below
const downloadBtn = document.querySelector(".download-btn");
const fileLink = "Add-Your-Own-file-path-here";
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);Step 4: Testing the Application
Now, save your HTML, CSS, and JavaScript files, and open the HTML file in your web browser. Clicking the “Download File” button will start the timer, and after 5 seconds, the download link will become available for the user to download the file.
Conclusion
In this tutorial, we’ve learned how to create a download file button with a timer using HTML, CSS, and JavaScript. This feature can be useful for scenarios where you want to restrict immediate access to a downloadable file, providing users with a countdown before allowing them to download. Experiment with different timer durations and styles to suit your specific requirements.
Leave a Reply