feat: add export functionality for filtered users in JSON and CSV formats

Author: shihabhasan0161

docs/script.js

@@ -251,6 +251,75 @@ function applyFilters() {
     });
 }
 
+// Export JSON
+function exportFilteredJSON() {
+
+    if (!filteredUsers.length) {
+        alert('No users to export');
+        return;
+    }
+
+    const userData = filteredUsers.map(user => user.raw);
+
+    const jsonString = JSON.stringify(userData, null, 2);
+    const blob = new Blob([jsonString], {type: 'application/json'});
+
+    const url = URL.createObjectURL(blob);
+
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = 'github-faces.json';
+
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+
+    URL.revokeObjectURL(url);
+}
+
+// Export CSV
+function exportFilteredCSV() {
+
+    if (!filteredUsers.length) {
+        alert('No users to export');
+        return;
+    }
+
+    const rows = filteredUsers.map(user => user.raw);
+    const headers = Object.keys(rows[0]);
+
+    const escapeCSV = value => {
+        if (value == null) return '';
+        // if object or array, stringify it
+        const str = 
+            typeof value === 'object'
+                ? JSON.stringify(value).replace(/"/g, '""')
+                : String(value).replace(/"/g, '""');
+
+        return `"${str}"`;
+    }
+
+    
+    const csv = [
+        headers.join(','), 
+        ...rows.map(row => headers.map(h => escapeCSV(row[h])).join(','))
+    ].join('\n');
+
+    const blob = new Blob([csv], {type: 'text/csv;charset=utf-8'});
+
+    const url = URL.createObjectURL(blob);
+
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = 'github-faces.csv';
+
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+
+    URL.revokeObjectURL(url);
+}
+
 /**
  * Get all active filter values from DOM
  * @returns {Object} Active filter values

docs/styles.css

@@ -248,6 +248,24 @@ h1 {
     color: #667eea;
 }
 
+.export-buttons {
+    display: flex;
+    gap: 10px;
+    justify-content: center;
+}
+
+.filters-buttons,
+.export-buttons {
+    width: 100%;
+}
+
+.filters-buttons .btn-apply,
+.filters-buttons .btn-reset,
+.export-buttons .btn-apply {
+    flex: 1;
+}
+
+
 .btn-random {
     width: 100%;
     padding: 12px;
@@ -591,6 +609,15 @@ footer {
         order: -1;
     }
 
+    .export-buttons {
+        width: 100%;
+    }
+
+    .export-buttons .btn-apply {
+        flex: 1;
+        padding: 12px;
+    }
+
     .main-content {
         grid-column: 1;
         grid-row: 2;

layouts/layout.html

@@ -265,6 +265,11 @@ <h2>🔍 Find Your Favorite Developer</h2>
                 <button class="btn-reset" onclick="resetFilters()">Reset</button>
             </div>
 
+            <div class="filters-buttons export-buttons">
+                <button class="btn-apply" onclick="exportFilteredJSON()">Export JSON</button>
+                <button class="btn-apply" onclick="exportFilteredCSV()">Export CSV</button>
+            </div>
+
             <div class="results-info loading-state" id="loadingState" style="display: none;">
                 <div class="loading-spinner"></div>
                 <p>Loading developers...</p>