how to create download button with time counting down
Creating a Download Timer with JavaScript
In this tutorial, we'll show you how to create a simple download timer using HTML, CSS, and JavaScript.
HTML: Structure of the Page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Download Timer</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="download-button-container">
<button class="download-button">
Download
<span class="download-icon">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M19 14l-7 7m0 0l-7-7m7 7V3"/>
</svg>
</span>
</button>
<div class="download-info">
<h3>Your download link will appear in 5 seconds.</h3>
</div>
</div>
<script src="main.js"></script>
</body>
</html>CSS: Styling the Page
/* style.css */
.download-button-container {
width: 100%;
max-width: 600px;
background: #eee;
margin: 24px auto;
padding: 16px;
text-align: center;
font-family: "Montserrat", sans-serif;
border-radius: 10px;
box-shadow: inset 0 10px 15px -3px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
align-items: center;
}
.download-button-container .download-button {
display: flex;
align-items: center;
gap: 8px;
width: 200px;
justify-content: center;
font-family: "Montserrat", sans-serif;
font-size: 16px;
font-weight: 300;
text-transform: uppercase;
letter-spacing: 2px;
background: #ef233c;
border: none;
padding: 8px;
cursor: pointer;
color: #fff;
}
.download-button-container .download-button.active .download-icon {
animation: bounceAnim 700ms infinite alternate;
}
.download-button-container .download-icon {
width: 16px;
}
.download-info h3 {
color: #023047;
margin-bottom: 12px;
}
.download-info {
height: 0;
overflow: hidden;
transition: all 400ms ease;
}
.download-button-container .download-button.active + .download-info {
height: 90px;
}
.download-info .download-link {
font-size: 14px;
text-transform: uppercase;
font-weight: 300;
color: #023047;
letter-spacing: 4px;
text-underline-offset: 5px;
}
@keyframes bounceAnim {
to {
transform: translateY(4px);
}
}JavaScript: Adding the Functionality
// main.js
const downloadButton = document.querySelector(".download-button-container .download-button");
const downloadHeading = document.querySelector(".download-info h3");
const downloadInfo = document.querySelector(".download-info");
let downloadTimer;
let remainingTime = 5;
let linkDisplayed = false;
const showDownloadLink = () => {
if (!linkDisplayed) {
const downloadLink = document.createElement("a");
downloadLink.href = "#";
downloadLink.innerHTML = "Click Here";
downloadLink.classList.add("download-link");
downloadInfo.appendChild(downloadLink);
}
linkDisplayed = true;
};
downloadButton.addEventListener("click", () => {
downloadButton.classList.add("active");
downloadTimer = setInterval(() => {
remainingTime--;
if (remainingTime <= 0) {
clearInterval(downloadTimer);
showDownloadLink();
downloadHeading.innerHTML = "Here is the download link.";
} else {
downloadHeading.innerHTML = `Your download link will appear in ${remainingTime} seconds.`;
}
}, 1000);
});
