YaBoiSmokey
New member
0
0%
5
Months of Service
0%
Hello everyone, today I bring you a download button with a second timer for your page links. This code includes a 20-second timer that you can customize to your liking. The code is responsive and made with HTML, CSS, and JavaScript. I hope you enjoy it.
HTML:
```
<button id="download-button" data-link="https://www.your-link-here.com/download" target="_blank">Download</button>
<div id="timer"></div>
<div id="loading"></div>
```
CSS:
```
#download-button {}
#timer {}
#loading {}
@media screen and (max-width: 768px) {
#timer {}
}
```
JavaScript:
```
const downloadBtn = document.getElementById('download-button');
const timer = document.getElementById('timer');
const loading = document.getElementById('loading');
downloadBtn.addEventListener('click', function() {
let timeLeft = 20;
const countdown = setInterval(function() {
if (timeLeft === 0) {
clearInterval(countdown);
// Put your download logic here
} else {
timer.innerHTML = timeLeft + ' seconds remaining...';
timeLeft--;
}
}, 1000);
});
```
Note: The code may not open in a popup window, but a notification for the link will be activated.
Demo
HTML:
```
<button id="download-button" data-link="https://www.your-link-here.com/download" target="_blank">Download</button>
<div id="timer"></div>
<div id="loading"></div>
```
CSS:
```
#download-button {}
#timer {}
#loading {}
@media screen and (max-width: 768px) {
#timer {}
}
```
JavaScript:
```
const downloadBtn = document.getElementById('download-button');
const timer = document.getElementById('timer');
const loading = document.getElementById('loading');
downloadBtn.addEventListener('click', function() {
let timeLeft = 20;
const countdown = setInterval(function() {
if (timeLeft === 0) {
clearInterval(countdown);
// Put your download logic here
} else {
timer.innerHTML = timeLeft + ' seconds remaining...';
timeLeft--;
}
}, 1000);
});
```
Note: The code may not open in a popup window, but a notification for the link will be activated.
Demo