Javascript Download Multiple Files

<div class="container">
  <h1>Download Multiple Files</h1>
  <p class="subtitle">Click the button below to download all files</p>

  <div class="file-list" id="fileList"></div>

  <div class="btn-group">
    <button class="btn btn-primary" id="downloadBtn">Download All Files</button>
    <button class="btn btn-secondary" id="resetBtn">Reset</button>
  </div>

  <div class="progress-info" id="progressInfo"></div>
</div>

 * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        .container {
            background: white;
            border-radius: 12px;
            padding: 32px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            max-width: 600px;
            width: 100%;
        }

        h1 {
            font-size: 24px;
            color: #2d3748;
            margin-bottom: 8px;
        }

        .subtitle {
            color: #718096;
            font-size: 14px;
            margin-bottom: 24px;
        }

        .file-list {
            background: #f7fafc;
            border-radius: 8px;
            padding: 16px;
            margin-bottom: 20px;
        }

        .file-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px;
            background: white;
            border-radius: 6px;
            margin-bottom: 8px;
            transition: all 0.2s;
        }

        .file-item:last-child {
            margin-bottom: 0;
        }

        .file-item:hover {
            transform: translateX(4px);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        .file-info {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .file-icon {
            width: 40px;
            height: 40px;
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
        }

        .file-details h3 {
            font-size: 15px;
            color: #2d3748;
            margin-bottom: 2px;
        }

        .file-details p {
            font-size: 12px;
            color: #718096;
        }

        .file-status {
            font-size: 12px;
            padding: 4px 10px;
            border-radius: 12px;
            font-weight: 600;
        }

        .status-ready {
            background: #c6f6d5;
            color: #22543d;
        }

        .status-downloading {
            background: #bee3f8;
            color: #2c5282;
        }

        .status-completed {
            background: #9ae6b4;
            color: #22543d;
        }

        .btn-group {
            display: flex;
            gap: 12px;
        }

        .btn {
            flex: 1;
            padding: 14px;
            border: none;
            border-radius: 8px;
            font-size: 15px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
        }

        .btn-primary {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            color: white;
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(240, 147, 251, 0.4);
        }

        .btn-secondary {
            background: #e2e8f0;
            color: #4a5568;
        }

        .btn-secondary:hover {
            background: #cbd5e0;
        }

        .btn:active {
            transform: translateY(0);
        }

        .btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .progress-info {
            text-align: center;
            margin-top: 16px;
            color: #4a5568;
            font-size: 14px;
        }

        const files = [
            { name: 'Document.pdf', size: '2.4 MB', url: 'data:text/plain;charset=utf-8,Sample PDF Content', icon: '📄' },
            { name: 'Image.jpg', size: '1.8 MB', url: 'data:text/plain;charset=utf-8,Sample Image Data', icon: '🖼️' },
            { name: 'Spreadsheet.xlsx', size: '856 KB', url: 'data:text/plain;charset=utf-8,Sample Excel Content', icon: '📊' },
            { name: 'Presentation.pptx', size: '3.2 MB', url: 'data:text/plain;charset=utf-8,Sample PowerPoint Content', icon: '📽️' },
            { name: 'Archive.zip', size: '5.1 MB', url: 'data:text/plain;charset=utf-8,Sample Archive Content', icon: '📦' }
        ];

        let fileStatuses = files.map(() => 'ready');

        function renderFiles() {
            const fileList = document.getElementById('fileList');
            fileList.innerHTML = files.map((file, index) => `
                <div class="file-item">
                    <div class="file-info">
                        <div class="file-icon">${file.icon}</div>
                        <div class="file-details">
                            <h3>${file.name}</h3>
                            <p>${file.size}</p>
                        </div>
                    </div>
                    <span class="file-status status-${fileStatuses[index]}" id="status-${index}">
                        ${fileStatuses[index] === 'ready' ? 'Ready' : 
                          fileStatuses[index] === 'downloading' ? 'Downloading...' : 
                          'Downloaded ✓'}
                    </span>
                </div>
            `).join('');
        }

        function downloadFile(url, filename) {
            return new Promise((resolve) => {
                const link = document.createElement('a');
                link.href = url;
                link.download = filename;
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
                
                setTimeout(resolve, 300);
            });
        }

        async function downloadAllFiles() {
            const downloadBtn = document.getElementById('downloadBtn');
            const progressInfo = document.getElementById('progressInfo');
            
            downloadBtn.disabled = true;
            
            for (let i = 0; i < files.length; i++) {
                fileStatuses[i] = 'downloading';
                renderFiles();
                progressInfo.textContent = `Downloading file ${i + 1} of ${files.length}...`;
                
                await downloadFile(files[i].url, files[i].name);
                
                fileStatuses[i] = 'completed';
                renderFiles();
            }
            
            progressInfo.textContent = `All ${files.length} files downloaded successfully! ✓`;
            downloadBtn.disabled = false;
        }

        function resetDownloads() {
            fileStatuses = files.map(() => 'ready');
            renderFiles();
            document.getElementById('progressInfo').textContent = '';
        }

        document.getElementById('downloadBtn').addEventListener('click', downloadAllFiles);
        document.getElementById('resetBtn').addEventListener('click', resetDownloads);

        renderFiles();