Create A Download Button with Timer in HTML CSS and JavaScript

Last Updated : 29 Jul, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

In this article, we will discuss how to create a Download button with a timer attached to it using HTML, CSS, and Javascript.

Our goal is to create a button that has a timer attached to it. The download should only start after the timer has run out, which we will achieve using the setTimeout and setInterval functions of JavaScript. We will use these functions to create a timer that waits for the required amount of time before initiating the download when the button is clicked.

Screenshot-2023-11-16-115014
Preview

Approach

  • Create a HTML structure with heading, button, and countdown div, assigning unique IDs for styling and scripting.
  • Apply CSS to enhance the visual appearance, adjusting properties like padding, font size, and background color.
  • Use document.getElementById or document.querySelector to select specific HTML elements for interaction.
  • Attach a click event listener to the download button to initiate the timer logic.
  • Add a timer using setInterval, updating the countdown display, and triggering the download process after a specified duration.

Note: Add your download link to the required url in the downloadLink variable in Javascript file to initiate the download. In this we have a file called sample_text_file.txt in the dowload_content folder.

Example: In this example, we will design a webpage to see the download of a file from a download button.

HTML 
<!DOCTYPE html> 
<html lang="en"> 

<head> 
	<meta charset="UTF-8" /> 
	<meta name="viewport" content= 
		"width=device-width, initial-scale=1.0" /> 

	<title>Download Button with Timer</title> 
	
	<style> 
		body { 
			display: flex; 
			flex-direction: column; 
			align-items: center; 
			justify-content: center; 
			height: 100vh; 
			margin: 0; 
			font-family: sans-serif; 
		} 

		h1 { 
			color: #308d46; 
		} 

		#downloadButton { 
			padding: 10px 20px; 
			font-size: 16px; 
			background-color: #007bff; 
			color: #fff; 
			border: none; 
			cursor: pointer; 
		} 

		#countdown { 
			display: none; 
			font-size: 24px; 
			margin-top: 20px; 
		} 
	</style> 
</head> 

<body> 
	<h1>GeeksForGeeks</h1> 

	<h4> 
		This is a download button 
		with a timer attached 
	</h4> 

	<button id="downloadButton"> 
		Download 
	</button> 
	
	<div id="countdown"></div> 

	<script> 
		const downloadButton = document.getElementById("downloadButton"); 
		const countdown = document.getElementById("countdown"); 
		const downloadLink = "download_content/sample_text_file.txt"; 

		let timer; 
		let countdownValue = 5; 

		downloadButton.addEventListener("click", function () { 
			countdown.style.display = "block"; 

			timer = setInterval(function () { 

				if (countdownValue <= 0) { 
					clearInterval(timer); 
					countdown.innerHTML = "Downloading..."; 
					setTimeout(function () { 
						const a = document.createElement("a"); 
						a.style.display = "none"; 
						a.href = downloadLink; 
						a.setAttribute("download", ""); 
						document.body.appendChild(a); 
						a.click(); 
					}, 1000); 
				} else { 
					countdown.innerHTML = 
				`Starting download in ${countdownValue} seconds...`; 
				} 
				countdownValue--; 
			}, 1000); 
		}); 
	</script> 
</body> 

</html>

Output:


Next Article
How to Trigger a File Download when Clicking an HTML Button or JavaScript?
author
ragul21
Improve
Article Tags :

Similar Reads