Complete Task to Unlock Download Button

 Here I am going to share the way to lock the download button. The visitor must complete one of these tasks to unlock the download button.

Complete Task to Download

First of all paste the following code above </head> tag. The follow the steps below.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

Step 1: Paste the below CSS code above the ]]></b:skin> tag in the Blogger template.

.container {
            width: 300px;
            padding: 25px;
            text-align: center;
            margin: 0 auto;
            margin-top: 75px;
            background-color: #ffffff;
            border-radius: 10px;
            box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
        }
        .button {
            display: flex;
            align-items: left;
            justify-content: left;
            padding: 10px 20px;
            margin: 10px 0;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            color: white;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: 300px;
        }
        .button i {
            margin-right: 10px;
        }
        .subscribe {
            background-color: #ff0000;
        }
        .telegram {
            background-color: #0088cc;
        }
        .like {
            background-color: #ff4500;
        }
        .download {
            background-color: grey;
            cursor: not-allowed;
        }
        .unlocked {
            background-color: #00c851;
            cursor: pointer;
        }
        .spinner {
            animation: spin 1s linear infinite;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        

Step 2: Add the below Javascript code to the page.

<script>
        let tasksCompleted = 0;

        function handleClick(task, url) {
            window.open(url, '_blank');
            const button = document.getElementById(task);
            button.innerHTML = '<i class="fas fa-spinner spinner"></i> Checking...';
            button.disabled = true;
            tasksCompleted++;
            setTimeout(() => {
                button.innerHTML = `<i class="fas fa-check"></i> ${task.charAt(0).toUpperCase() + task.slice(1)} Completed`;
                checkAllTasks();
            }, 10000);
        }

        function checkAllTasks() {
            if (tasksCompleted > 0) {
                const downloadButton = document.getElementById('download');
                downloadButton.classList.remove('download');
                downloadButton.classList.add('unlocked');
                downloadButton.disabled = false;
                downloadButton.innerHTML = '<i class="fas fa-unlock"></i> Download';
                downloadButton.onclick = function() {
                    window.location.href = 'https://example.com/download-link'; // Change this to your download link
                }
            }
        }
    </script>
    

This is all done. But there are 2 more JavaScript available

The following JavaScript will delay the checking process by 1.5 seconds (recommended).

<script>
        let tasksCompleted = 0;

        function handleClick(task, url) {
            window.open(url, '_blank');
            const button = document.getElementById(task);
            button.disabled = true;
            setTimeout(() => {
                button.innerHTML = '<i class="fas fa-spinner spinner"></i> Checking...';
                tasksCompleted++;
                setTimeout(() => {
                    button.innerHTML = `<i class="fas fa-check"></i> ${task.charAt(0).toUpperCase() + task.slice(1)} Completed`;
                    checkAllTasks();
                }, 10000);
            }, 1500);
        }

        function checkAllTasks() {
            if (tasksCompleted > 0) {
                const downloadButton = document.getElementById('download');
                downloadButton.classList.remove('download');
                downloadButton.classList.add('unlocked');
                downloadButton.disabled = false;
                downloadButton.innerHTML = '<i class="fas fa-unlock"></i> Download';
                downloadButton.onclick = function() {
                    window.location.href = 'https://example.com/download-link'; // Change this to your download link
                }
            }
        }
    </script>
    

And if we use the below JavaScript then this will check the domain of the current website. If the domain or domains match then this will work properly. But if not then it will redirect the website to another website. As the JavaScript code can be stolen easily. Su just obfuscates the code before use. Then even if someone steals the code, they won't be able to use it.

<script>
        function checkDomain() {
            const allowedDomains = ['example.com', 'demo.example.com'];
            const currentDomain = window.location.hostname;

            if (!allowedDomains.includes(currentDomain)) {
                window.location.href = 'https://google.com';
            }
        }

        let tasksCompleted = 0;

        function handleClick(task, url) {
            window.open(url, '_blank');
            const button = document.getElementById(task);
            button.disabled = true;
            setTimeout(() => {
                button.innerHTML = '<i class="fas fa-spinner spinner"></i> Checking...';
                tasksCompleted++;
                setTimeout(() => {
                    button.innerHTML = `<i class="fas fa-check"></i> ${task.charAt(0).toUpperCase() + task.slice(1)} Completed`;
                    checkAllTasks();
                }, 10000);
            }, 1500);
        }

        function checkAllTasks() {
            if (tasksCompleted > 0) {
                const downloadButton = document.getElementById('download');
                downloadButton.classList.remove('download');
                downloadButton.classList.add('unlocked');
                downloadButton.disabled = false;
                downloadButton.innerHTML = '<i class="fas fa-unlock"></i> Download';
                downloadButton.onclick = function() {
                    window.location.href = 'https://example.com/download-link'; // Change this to your download link
                }
            }
        }

        // Check the domain when the page loads
        checkDomain();
    </script>
    

This script can work any platform. Also the fontawesome must be linked for the icons to work.