Ticker

6/recent/ticker-posts

Create A Download Button with Timer in HTML CSS & JavaScript

Ai February 11, 2023

 

Create A Download Button with Timer in HTML CSS & JavaScript

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.

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);
    Ai

    Posted by Ai

    Post a Comment

    0 Comments

    Please do not enter any spam link in the comment box.