Add recent user activity display

coderatiiita · coderatiiita · commit 5942d805ff6f · 2025-06-21T02:54:16.000+05:30
diff --git a/script.js b/script.js
@@ -9,6 +9,7 @@ async function getUser(username) {
         const { data } = await axios.get(APIURL + username);
         createUserCard(data, username);
         getRepos(username);
+        getEvents(username);
     } catch(err) {
         if(err.response.status === 404) {
             createErrorCard('No profile with this username');
@@ -25,6 +26,15 @@ async function getRepos(username) {
     }
 }
 
+async function getEvents(username) {
+    try {
+        const { data } = await axios.get(APIURL + username + '/events');
+        addEventsToCard(data);
+    } catch(err) {
+        showEventError('Problem fetching activity');
+    }
+}
+
 function createUserCard(user, username) {
     const cardHTML = `
     <div class="card">
@@ -44,6 +54,7 @@ function createUserCard(user, username) {
             </ul>
 
             <div id="repos"></div>
+            <div id="events" class="events"></div>
         </div>
     </div>`;
     main.innerHTML = cardHTML;
@@ -68,9 +79,30 @@ function addReposToCard(repos) {
             repoEl.href = repo.html_url;
             repoEl.target = '_blank';
             repoEl.innerText = repo.name;
-            
+
             reposEl.appendChild(repoEl);
-        }); 
+        });
+}
+
+function addEventsToCard(events) {
+    const eventsEl = document.getElementById('events');
+    if (!events.length) {
+        eventsEl.innerHTML = '<p>No recent public activity</p>';
+        return;
+    }
+
+    const list = document.createElement('ul');
+    events.slice(0, 5).forEach(ev => {
+        const item = document.createElement('li');
+        item.innerText = `${ev.type} - ${ev.repo.name}`;
+        list.appendChild(item);
+    });
+    eventsEl.appendChild(list);
+}
+
+function showEventError(msg) {
+    const eventsEl = document.getElementById('events');
+    eventsEl.innerHTML = `<p>${msg}</p>`;
 }
 
 form.addEventListener('submit', (e) => {
diff --git a/styles.css b/styles.css
@@ -101,6 +101,23 @@ body {
     display: inline-block;
 }
 
+.events {
+    margin-top: 1rem;
+}
+
+.events ul {
+    list-style-type: none;
+    padding: 0;
+}
+
+.events li {
+    background-color: #212a72;
+    font-size: 0.7rem;
+    padding: 0.25rem 0.5rem;
+    margin-bottom: 0.25rem;
+    border-radius: 4px;
+}
+
 @media(max-width: 500px) {
     .card {
         flex-direction: column;
