Top three download button with timer - source code available

No 1 Download button:
-- Automatically download the file after the countdown is over
-- Also the manual download link.

Source Code:

Html code:

          <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
    <div class="download-containerjjjjjj">
        <a href="#" class="download-btnjjjjjjjjjjjjjf">Download Code <i class="fas fa-download"></i></a>
        <div class="countdownjjjjjjjjjjjjj"></div>
        <div class="pleaseWait-textjjjjjj">Please wait ...</div>
        <div class="manualDownload-textjjjjjj">
            If the download didn't start automatically, <a href="Download link" class="manualDownload-link" target="_top">click
                here</a>
        </div>
    </div>

CSS code:

           @import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Poppins", sans-serif;
        }
        body {
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
        }
        .download-containerjjjjjj {
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 0 0.5rem;
        }

        .download-btnjjjjjjjjjjjjjf {
            background: #4285f4;
            color: #ffff;
            text-decoration: none;
            width: 260px;
            padding: 18px 0;
            text-align: center;
            font-size: 1.3rem;
            font-weight: 400;
            border-radius: 5px;
            box-shadow: 0 5px 25px rgba(1, 1, 1, 0.15);
        }
        .download-btnjjjjjjjjjjjjjf:hover {
            background: #2345f4;
        }
        .download-btnjjjjjjjjjjjjjf i {
            margin-left: 5px;
        }

        .countdownjjjjjjjjjjjjj {
            margin-bottom: 20px;
            font-size: 14px;
            font-weight: 700;
        }
        .countdownjjjjjjjjjjjjj span {
            color: #0693f6;
            font-size: 1.5em;
            font-weight: 800;
        }
        .pleaseWait-textjjjjjj,
        .manualDownload-textjjjjjj {
            font-size: 13px;
            font-weight: 600;
            display: none;
        }
        .manualDownload-link {
            text-decoration: none;
            color: #0693f6;
            font-weight: 800;
        }

JavaScript code:

      const download = document.querySelector('.download-btnjjjjjjjjjjjjjf');
        const countdownjjjjjjjjjjjjj = document.querySelector('.countdownjjjjjjjjjjjjj');
        const pleaseWaitText = document.querySelector('.pleaseWait-textjjjjjj');
        const manualDownloadText = document.querySelector('.manualDownload-textjjjjjj');
        const manualDownloadLink = document.querySelector('.manualDownload-link');
        var timeLeft = 10;
        download.addEventListener('click', () => {
            download.style.display = "none";
            countdownjjjjjjjjjjjjj.innerHTML = `Download will begin in ${timeLeft} seconds`;
            var downloadTimer = setInterval(function timeCount() {
                timeLeft--;
                countdownjjjjjjjjjjjjj.innerHTML = `Download will begin in ${timeLeft} seconds`;
                if (timeLeft <= 0) {
                    clearInterval(downloadTimer);
                    pleaseWaitText.style.display = "block";
                    let download_href = "Download link";
                    window.location.href = download_href;
                    manualDownloadLink.href = download_href;
                    setTimeout(() => {
                        pleaseWaitText.style.display = "none";
                        manualDownloadText.style.display = "block";
                    }, 1000);
                }
            }, 1000);
        });

No 2 Download button:
-- Automatically download the file after the countdown is over
-- Detected double download.

Source Code:

Html code:

         <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" />

    <Center>
        <button class="download-btn" data-timer="5">
            <span class="icon material-symbols-rounded">vertical_align_bottom</span>
            <span class="text">Download Files</span>
        </button>
    </Center>

CSS code:

           @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
        .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;
            margin-top: 300px;
        }
        .download-btn:hover {
            background: #2382f6;
        }
        .download-btn.timer {
            color: #000;
            background: none;
            transition: none;
            font-size: 14px;
            pointer-events: none;
        }
        .download-btn.timer b {
            color: #4A98F7;
            padding: 0 8px;
        }
        .download-btn .icon {
            font-size: 2rem;
        }
        .download-btn .text {
            font-size: 16px;
            padding-left: 5px;
        }

JavaScript code:

        const downloadBtn = document.querySelector(".download-btn");
        const fileLink = "Download link";

        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 ${timer} seconds`;
            const initCounter = setInterval(() => {
                if (timer > 0) {
                    timer--;
                    return downloadBtn.innerHTML = `Your download will begin in ${timer} seconds`;
                }
                clearInterval(initCounter);
                location.href = fileLink;
                downloadBtn.innerText = "Your file is downloading...";
                setTimeout(() => {
                    downloadBtn.classList.replace("timer", "disable-timer");
                    downloadBtn.innerHTML = `vertical_align_bottom
                                    Download Again`;
                }, 3000);
            }, 1000);
        }

        downloadBtn.addEventListener("click", initTimer);

No 3 Download button:
-- Automatically download the file after the countdown is over
-- Pop Up window.

Source Code:

Html code:

         <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" />

    <Center>
        <button class="download-btn" data-timer="5">
            <span class="icon material-symbols-rounded">vertical_align_bottom</span>
            <span class="text">Download Files</span>
        </button>
    </Center>

CSS code:

           @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
        .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;
            margin-top: 300px;
        }
        .download-btn:hover {
            background: #2382f6;
        }
        .download-btn.timer {
            color: #000;
            background: none;
            transition: none;
            font-size: 14px;
            pointer-events: none;
        }
        .download-btn.timer b {
            color: #4A98F7;
            padding: 0 8px;
        }
        .download-btn .icon {
            font-size: 2rem;
        }
        .download-btn .text {
            font-size: 16px;
            padding-left: 5px;
        }

JavaScript code:

        const downloadBtn = document.querySelector(".download-btn");
        const fileLink = "Download link";

        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 ${timer} seconds`;
            const initCounter = setInterval(() => {
                if (timer > 0) {
                    timer--;
                    return downloadBtn.innerHTML = `Your download will begin in ${timer} seconds`;
                }
                clearInterval(initCounter);
                location.href = fileLink;
                downloadBtn.innerText = "Your file is downloading...";
                setTimeout(() => {
                    downloadBtn.classList.replace("timer", "disable-timer");
                    downloadBtn.innerHTML = `vertical_align_bottom
                                    Download Again`;
                }, 3000);
            }, 1000);
        }

        downloadBtn.addEventListener("click", initTimer);