feat: Add "I'm Feeling Lucky" Random User Button (#104)

* feat: imple Random User Button

* Update docs/script.js

Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>

* Update docs/script.js

Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>

---------

Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
Co-authored-by: Max Base <[email protected]>

Author: 3 people

docs/script.js

@@ -61,6 +61,7 @@ function parseUserCard(card) {
     const name = card.querySelector('strong').textContent.toLowerCase();
     const login = card.querySelector('span:nth-of-type(2)').textContent.toLowerCase();
     const location = extractLocation(card);
+    const languages = (card.querySelector('.languages')?.textContent || '').toLowerCase();
     const followers = parseInt(card.getAttribute('data-followers') || '0');
     const following = parseInt(card.getAttribute('data-following') || '0');
     const repos = parseInt(card.getAttribute('data-repos') || '0');
@@ -76,6 +77,7 @@ function parseUserCard(card) {
         name,
         login,
         location,
+        languages,
         followers,
         following,
         repos,
@@ -148,8 +150,31 @@ function setupEventListeners() {
             element.addEventListener(eventType, onFilterChange);
         }
     });
+
+    const randomUserBtn = document.getElementById('randomUserBtn');
+    if (randomUserBtn) {
+        randomUserBtn.addEventListener('click', pickRandomUser);
+    }
 }
+function pickRandomUser() {
+    const usersToPickFrom = filteredUsers.length > 0 ? filteredUsers : allUsers;
 
+    if (usersToPickFrom.length === 0) {
+        alert('No users found to pick from!');
+        return;
+    }
+
+    const randomIndex = Math.floor(Math.random() * usersToPickFrom.length);
+    const randomUser = usersToPickFrom[randomIndex];
+    randomUser.card.classList.add('visible');
+    randomUser.card.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    randomUser.card.classList.remove('highlight');
+    void randomUser.card.offsetWidth; // Force reflow to re-trigger CSS animation
+    randomUser.card.classList.add('highlight');
+    setTimeout(() => {
+        randomUser.card.classList.remove('highlight');
+    }, 2000);
+}
 /**
  * Handle any filter change event
  */
@@ -266,7 +291,8 @@ function matchesSearch(user, searchTerm) {
     if (!searchTerm) return true;
     return user.name.includes(searchTerm) ||
         user.login.includes(searchTerm) ||
-        user.location.includes(searchTerm);
+        user.location.includes(searchTerm) ||
+        user.languages.includes(searchTerm);
 }
 
 /**

docs/styles.css

@@ -248,6 +248,30 @@ h1 {
     color: #667eea;
 }
 
+.btn-random {
+    width: 100%;
+    padding: 12px;
+    background: #ff9f43; /* bright orange for distinctiveness */
+    border: 2px solid rgba(255,255,255,0.5);
+    color: white;
+    border-radius: 6px;
+    cursor: pointer;
+    font-weight: 600;
+    transition: all 0.3s;
+    margin-bottom: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    font-size: 1rem;
+}
+
+.btn-random:hover {
+    background: #ffb168;
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(255, 159, 67, 0.4);
+}
+
 .results-info {
     text-align: center;
     color: white;
@@ -338,6 +362,18 @@ h1 {
     box-shadow: 0 10px 20px rgba(0,0,0,0.25);
 }
 
+.card.highlight {
+    animation: pulse-highlight 2s ease-in-out;
+    box-shadow: 0 0 0 4px #ff9f43, 0 10px 20px rgba(0,0,0,0.25);
+    z-index: 10;
+}
+
+@keyframes pulse-highlight {
+    0% { transform: scale(1); }
+    50% { transform: scale(1.05); }
+    100% { transform: scale(1); }
+}
+
 .card img {
     width: 100%;
     display: block;