Creating a Dynamic Download and Link Generation Feature

In this blog post, we'll explore how to create a dynamic feature that includes a download button, a scroll-down functionality, and a link generation button with URL parameter support. This can be particularly useful for websites that want to guide users through a specific flow or process.

The Demo

Before we dive into the implementation details, let's see the feature in action:

This is the demo area. The buttons above will change as you interact with them.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor, nisl nec ultricies lacinia, nisl nisl aliquam nisl, nec aliquam nisl nisl sit amet nisl.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.

How It Works

1. Initially, only the "Download" button is visible at the top.
2. When clicked, it changes to "Wait 3 seconds..." and becomes disabled.
3. After 3 seconds, it disappears and the "Scroll Down" button appears in its place.
4. Clicking the "Scroll Down" button smoothly scrolls to the bottom of the demo container.
5. The "Generate Link" button appears at the bottom of the demo container after scrolling down.
6. Clicking the "Generate Link" button checks for a URL parameter. If present, it redirects to that URL. If not, it prompts for a URL and opens it in a new tab.

The Code

Here's the JavaScript code that makes this feature work:

const downloadBtn = document.getElementById('downloadBtn');
const scrollDownBtn = document.getElementById('scrollDownBtn');
const generateLinkBtn = document.getElementById('generateLinkBtn');

downloadBtn.addEventListener('click', () => {
    downloadBtn.textContent = 'Wait 3 seconds...';
    downloadBtn.disabled = true;
    setTimeout(() => {
        downloadBtn.style.display = 'none';
        scrollDownBtn.style.display = 'inline-block';
    }, 3000);
});

scrollDownBtn.addEventListener('click', () => {
    generateLinkBtn.scrollIntoView({
        behavior: 'smooth',
        block: 'end'
    });
    generateLinkBtn.style.display = 'block';
});

generateLinkBtn.addEventListener('click', () => {
    const urlParams = new URLSearchParams(window.location.search);
    const urlParam = urlParams.get('url');
    
    if (urlParam) {
        window.location.href = urlParam.startsWith('http') ? urlParam : 'https://' + urlParam;
    } else {
        const url = prompt('Enter the URL you want to open:');
        if (url) {
            window.open(url.startsWith('http') ? url : 'https://' + url, '_blank');
        }
    }
});

This code sets up event listeners for each button, handling the transitions and actions as the user interacts with the feature. The "Generate Link" button now checks for a URL parameter and redirects if present.

Conclusion

This dynamic feature provides an interactive way to guide users through a process, from initiating a download to generating a link or redirecting based on URL parameters. It can be customized and expanded to fit various use cases and user experiences.