Skip to content

Commit 50889d7

Browse files
adityai0adityai0
authored
Merge pull request #557 from DevamshReddy-coder/leaderboard-enhancement
Enhanced Leaderboard Section
2 parents 414ec9d + b38b7fa commit 50889d7

File tree

3 files changed

+351
-243
lines changed

3 files changed

+351
-243
lines changed

‎index.html‎

Lines changed: 35 additions & 139 deletions
Original file line numberDiff line numberDiff line change
@@ -358,150 +358,46 @@ <h5 class="card-Header">JavaScript Mini Projects</h5>
358358
<!-- ================================ Challenge Section End Here ================================ -->
359359

360360
<!-- ================================ Leaderboard Section Starts Here ================================ -->
361-
<section id="leaderboardSection">
362-
<div class="container">
363-
<h3 data-aos-duration="650" data-aos="fade-up" class="secHeader"><span class="">Top Coder</span> of the Week</h3>
364-
<p data-aos-duration="650" data-aos="fade-up" class="leaderboard-Para">
365-
Meet our top coders who accepted challenges, wrote great code,
366-
contributed to open source, and stood out as the best performers of
367-
the week.
368-
</p>
369-
<div class="row">
370-
<!-- ======= owl cousel =========== -->
371-
<div data-aos-duration="650" data-aos="fade-up" class="owl-carousel owl-theme">
372-
<!-- === top coder 1 === -->
373-
<div class="item">
374-
<div class="card leaderboard-Card">
375-
<div class="card-body leaderBoard-Container">
376-
<div class="leaderBoard-userContainer">
377-
<img
378-
src="assets/images/leaderboard-section/user-1.png"
379-
class="img-fluid leaderboard-Img"
380-
alt="user 1"
381-
/>
382-
</div>
383-
384-
<h5 class="card-title userName">Rahul</h5>
385-
386-
<div class="leaderboradUser-RankContainer">
387-
<p class="rankPosition">
388-
<i class="fa-solid fa-award"></i> 1st Rank
389-
</p>
390-
<p class="rankPoints">
391-
<i class="fa-solid fa-medal"></i> 1080 Points
392-
</p>
393-
</div>
394-
</div>
395-
</div>
396-
</div>
397-
398-
<!-- === top coder 2 === -->
399-
<div class="item">
400-
<div class="card leaderboard-Card">
401-
<div class="card-body leaderBoard-Container">
402-
<div class="leaderBoard-userContainer">
403-
<img
404-
src="assets/images/leaderboard-section/user-2.png"
405-
class="img-fluid leaderboard-Img"
406-
alt="user 2"
407-
/>
408-
</div>
409-
410-
<h5 class="card-title userName">Manisha</h5>
411-
412-
<div class="leaderboradUser-RankContainer">
413-
<p class="rankPosition">
414-
<i class="fa-solid fa-award"></i> 2nd Rank
415-
</p>
416-
<p class="rankPoints">
417-
<i class="fa-solid fa-medal"></i> 1060 Points
418-
</p>
419-
</div>
420-
</div>
421-
</div>
422-
</div>
423-
424-
<!-- === top coder 3 === -->
425-
<div class="item">
426-
<div class="card leaderboard-Card">
427-
<div class="card-body leaderBoard-Container">
428-
<div class="leaderBoard-userContainer">
429-
<img
430-
src="assets/images/leaderboard-section/user-1.png"
431-
class="img-fluid leaderboard-Img"
432-
alt="user 3"
433-
/>
434-
</div>
435-
436-
<h5 class="card-title userName">Pankaj</h5>
437-
438-
<div class="leaderboradUser-RankContainer">
439-
<p class="rankPosition">
440-
<i class="fa-solid fa-award"></i> 3rd Rank
441-
</p>
442-
<p class="rankPoints">
443-
<i class="fa-solid fa-medal"></i> 1055 Points
444-
</p>
445-
</div>
446-
</div>
447-
</div>
448-
</div>
449-
450-
<!-- === top coder 4 === -->
451-
<div class="item">
452-
<div class="card leaderboard-Card">
453-
<div class="card-body leaderBoard-Container">
454-
<div class="leaderBoard-userContainer">
455-
<img
456-
src="assets/images/leaderboard-section/user-2.png"
457-
class="img-fluid leaderboard-Img"
458-
alt="user 4"
459-
/>
460-
</div>
361+
<section id="leaderboardSection" class="leaderboard-wrapper">
362+
<div class="leaderboard-list">
363+
<h2>
364+
<span class="highlight">Top Coder</span> of the Week
365+
</h2>
366+
<p>
367+
Meet our top coders who accepted challenges, wrote great code,
368+
contributed to open source, and stood out as the best performers of the week.
369+
</p>
461370

462-
<h5 class="card-title userName">Simarn</h5>
371+
<div class="leaderboard-row rank-1">
372+
<span class="rank">#1</span>
373+
<img src="assets/images/leaderboard-section/user-1.png" alt="User 1" class="leaderboard-Img">
374+
<span class="userName">Rahul <span class="badge gold">🏆</span></span>
375+
<span class="points">1250 pts</span>
376+
</div>
463377

464-
<div class="leaderboradUser-RankContainer">
465-
<p class="rankPosition">
466-
<i class="fa-solid fa-award"></i> 4th Rank
467-
</p>
468-
<p class="rankPoints">
469-
<i class="fa-solid fa-medal"></i> 1030 Points
470-
</p>
471-
</div>
472-
</div>
473-
</div>
474-
</div>
378+
<div class="leaderboard-row rank-2">
379+
<span class="rank">#2</span>
380+
<img src="assets/images/leaderboard-section/user-2.png" alt="User 2" class="leaderboard-Img">
381+
<span class="userName">Manisha <span class="badge silver">🥈</span></span>
382+
<span class="points">1180 pts</span>
383+
</div>
475384

476-
<!-- === top coder 5 === -->
477-
<div class="item">
478-
<div class="card leaderboard-Card">
479-
<div class="card-body leaderBoard-Container">
480-
<div class="leaderBoard-userContainer">
481-
<img
482-
src="assets/images/leaderboard-section/user-1.png"
483-
class="img-fluid leaderboard-Img"
484-
alt="user 5"
485-
/>
486-
</div>
385+
<div class="leaderboard-row rank-3">
386+
<span class="rank">#3</span>
387+
<img src="assets/images/leaderboard-section/user-1.png" alt="User 3" class="leaderboard-Img">
388+
<span class="userName">Pankaj <span class="badge bronze">🥉</span></span>
389+
<span class="points">1100 pts</span>
390+
</div>
487391

488-
<h5 class="card-title userName">Rahul</h5>
392+
<div class="leaderboard-row">
393+
<span class="rank">#4</span>
394+
<img src="assets/images/leaderboard-section/user-2.png" alt="User 4" class="leaderboard-Img">
395+
<span class="userName">Simran</span>
396+
<span class="points">980 pts</span>
397+
</div>
398+
</div>
399+
</section>
489400

490-
<div class="leaderboradUser-RankContainer">
491-
<p class="rankPosition">
492-
<i class="fa-solid fa-award"></i> 5th Rank
493-
</p>
494-
<p class="rankPoints">
495-
<i class="fa-solid fa-medal"></i> 1020 Points
496-
</p>
497-
</div>
498-
</div>
499-
</div>
500-
</div>
501-
</div>
502-
</div>
503-
</div>
504-
</section>
505401
<!-- ================================ Leaderboard Section End Here ================================ -->
506402

507403
<!-- ================================ About Section Start Here ================================ -->

‎scripts/app.js‎

Lines changed: 66 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,19 @@
1-
import { saveUserProgress, loadUserProgress, saveCompletedChallenges, loadCompletedChallenges } from './data.js';
1+
import {
2+
saveUserProgress,
3+
loadUserProgress,
4+
saveCompletedChallenges,
5+
loadCompletedChallenges
6+
} from './data.js';
27

38
console.log('app script loaded');
49

10+
// ------------------- Challenge Form + Preview ------------------- //
511
const form = document.getElementById('challengeForm');
612
const preview = document.getElementById('preview');
713

814
if (form && preview) {
915
const descriptionField = document.getElementById('description');
16+
1017
descriptionField.addEventListener('input', () => {
1118
const raw = descriptionField.value;
1219
const formatted = raw
@@ -54,7 +61,8 @@ class Router {
5461
'/challenges': 'pages/challenges.html',
5562
'/editor': 'editor.html',
5663
'/profile': 'pages/profile.html',
57-
'/coding': 'editor.html'
64+
'/coding': 'editor.html',
65+
'/leaderboard': 'pages/leaderboard.html' // ✅ added leaderboard
5866
};
5967
this.init();
6068
}
@@ -66,6 +74,7 @@ class Router {
6674

6775
document.querySelectorAll('[data-route]').forEach(el => {
6876
el.setAttribute('tabindex', '0');
77+
6978
el.addEventListener('click', (e) => {
7079
e.preventDefault();
7180
const route = el.getAttribute('data-route');
@@ -111,6 +120,8 @@ class Router {
111120
return 'editor.html';
112121
case 'profile.html':
113122
return 'pages/profile.html';
123+
case 'leaderboard.html':
124+
return 'pages/leaderboard.html';
114125
default:
115126
return 'index.html';
116127
}
@@ -172,7 +183,8 @@ if (navToggle && navMenu) {
172183
line3.style.transform = isOpen ? 'rotate(-45deg) translate(6px, -6px)' : 'rotate(0deg)';
173184
});
174185
}
175-
// --- Profile Page Logic ---
186+
187+
// ------------------- Profile Page Logic ------------------- //
176188
document.addEventListener("DOMContentLoaded", () => {
177189
const avatarInput = document.getElementById('upload-avatar');
178190
const avatarPreview = document.getElementById('avatarPreview');
@@ -212,3 +224,54 @@ document.addEventListener("DOMContentLoaded", () => {
212224
});
213225
}
214226
});
227+
// ------------------- Leaderboard Logic ------------------- //
228+
document.addEventListener("DOMContentLoaded", () => {
229+
const leaderboardContainer = document.getElementById("leaderboardContainer");
230+
231+
if (!leaderboardContainer) return; // ✅ Only run on leaderboard section
232+
233+
// Dummy leaderboard data (replace later with API/DB)
234+
let leaderboardData = [
235+
{ name: "Alice", points: 1250, img: "assets/leaderboard-section/user-1.png" },
236+
{ name: "Bob", points: 1100, img: "assets/leaderboard-section/user-2.png" },
237+
{ name: "Charlie", points: 980, img: "assets/leaderboard-section/user-3.png" },
238+
{ name: "David", points: 900, img: "assets/leaderboard-section/user-4.png" },
239+
{ name: "Eva", points: 870, img: "assets/leaderboard-section/user-5.png" }
240+
];
241+
242+
243+
function renderLeaderboard() {
244+
leaderboardContainer.innerHTML = "";
245+
246+
// Sort users by points (descending)
247+
leaderboardData.sort((a, b) => b.points - a.points);
248+
249+
leaderboardData.forEach((user, index) => {
250+
const card = document.createElement("div");
251+
card.classList.add("leaderBoard-Container");
252+
253+
card.innerHTML = `
254+
<img src="${user.img}" alt="${user.name}" class="leaderboard-Img">
255+
<h5 class="userName">${user.name}</h5>
256+
<div class="leaderboradUser-RankContainer">
257+
<p class="rankPosition ${index === 0 ? 'rank-1' : index === 1 ? 'rank-2' : index === 2 ? 'rank-3' : ''}">
258+
#${index + 1}
259+
</p>
260+
<p class="rankPoints">${user.points} pts</p>
261+
</div>
262+
`;
263+
leaderboardContainer.appendChild(card);
264+
});
265+
}
266+
267+
// Initial render
268+
renderLeaderboard();
269+
270+
// Simulate live updates every 5s
271+
setInterval(() => {
272+
leaderboardData.forEach(user => {
273+
user.points += Math.floor(Math.random() * 15); // simulate score changes
274+
});
275+
renderLeaderboard();
276+
}, 5000);
277+
});

0 commit comments

Comments
 (0)