Skip to content

Commit 29017dd

Browse files
Kashish-010Kashish-010
authored
Merge branch 'main' into main
2 parents 6b49eeb + 50889d7 commit 29017dd

4 files changed

Lines changed: 373 additions & 251 deletions

File tree

‎LEADERBOARD.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
This leaderboard tracks contributors who have completed issues labeled as `level1`, `level2`, or `level3`, along with their merged pull requests.
44

5-
*Last updated: 2025-08-20*
5+
*Last updated: 2025-08-21*
66

77
| Username | Level 1 | Level 2 | Level 3 | PRs Merged |
88
|----------|---------|---------|---------|-------------|
@@ -13,6 +13,7 @@ This leaderboard tracks contributors who have completed issues labeled as `level
1313
| [@cosmicTitiksha](https://github.com/cosmicTitiksha) | 1 | 1 | 0 | 4 |
1414
| [@Shalini22-ui](https://github.com/Shalini22-ui) | 0 | 1 | 0 | 4 |
1515
| [@Shivin1016](https://github.com/Shivin1016) | 2 | 0 | 0 | 2 |
16+
| [@Kashish-010](https://github.com/Kashish-010) | 2 | 0 | 0 | 1 |
1617
| [@RagniNagpal](https://github.com/RagniNagpal) | 1 | 0 | 0 | 2 |
1718
| [@Methika2005](https://github.com/Methika2005) | 2 | 0 | 0 | 1 |
1819
| [@Sanskriti10247](https://github.com/Sanskriti10247) | 1 | 1 | 0 | 1 |

‎index.html‎

Lines changed: 42 additions & 148 deletions
Original file line numberDiff line numberDiff line change
@@ -46,18 +46,18 @@
4646
<link rel="stylesheet" href="styles/owl.carousel.min.css" />
4747
<link rel="stylesheet" href="styles/owl.theme.default.min.css" />
4848
<link rel="stylesheet" href="styles/fontawesome.css" />
49-
50-
<!-- ================ Custom CSS & Libraries ================ -->
49+
<!-- Custom CSS & External Libraries -->
5150
<link
5251
rel="stylesheet"
5352
href="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css"
5453
/>
55-
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
56-
5754
<!-- Global / Main Styles -->
5855
<link rel="stylesheet" href="styles/main.css" />
5956
<link rel="stylesheet" href="./styles.css" />
6057

58+
<!-- External Libraries -->
59+
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
60+
6161
<!-- Optional: Challenge-specific styles -->
6262
<!-- <link rel="stylesheet" href="../styles/challenges.css" /> -->
6363

@@ -73,11 +73,9 @@
7373
margin: 8px 0;
7474
font-size: 24px;
7575
}
76-
77-
.icon-container i {
78-
transition: transform 0.2s ease;
79-
}
80-
76+
.icon-container i {
77+
transition: transform 0.2s ease;
78+
}
8179
.icon-container i:hover {
8280
transform: scale(1.2);
8381
}
@@ -371,150 +369,46 @@ <h5 class="card-Header">JavaScript Mini Projects</h5>
371369
<!-- ================================ Challenge Section End Here ================================ -->
372370

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

475-
<h5 class="card-title userName">Simarn</h5>
382+
<div class="leaderboard-row rank-1">
383+
<span class="rank">#1</span>
384+
<img src="assets/images/leaderboard-section/user-1.png" alt="User 1" class="leaderboard-Img">
385+
<span class="userName">Rahul <span class="badge gold">🏆</span></span>
386+
<span class="points">1250 pts</span>
387+
</div>
476388

477-
<div class="leaderboradUser-RankContainer">
478-
<p class="rankPosition">
479-
<i class="fa-solid fa-award"></i> 4th Rank
480-
</p>
481-
<p class="rankPoints">
482-
<i class="fa-solid fa-medal"></i> 1030 Points
483-
</p>
484-
</div>
485-
</div>
486-
</div>
487-
</div>
389+
<div class="leaderboard-row rank-2">
390+
<span class="rank">#2</span>
391+
<img src="assets/images/leaderboard-section/user-2.png" alt="User 2" class="leaderboard-Img">
392+
<span class="userName">Manisha <span class="badge silver">🥈</span></span>
393+
<span class="points">1180 pts</span>
394+
</div>
488395

489-
<!-- === top coder 5 === -->
490-
<div class="item">
491-
<div class="card leaderboard-Card">
492-
<div class="card-body leaderBoard-Container">
493-
<div class="leaderBoard-userContainer">
494-
<img
495-
src="assets/images/leaderboard-section/user-1.png"
496-
class="img-fluid leaderboard-Img"
497-
alt="user 5"
498-
/>
499-
</div>
396+
<div class="leaderboard-row rank-3">
397+
<span class="rank">#3</span>
398+
<img src="assets/images/leaderboard-section/user-1.png" alt="User 3" class="leaderboard-Img">
399+
<span class="userName">Pankaj <span class="badge bronze">🥉</span></span>
400+
<span class="points">1100 pts</span>
401+
</div>
500402

501-
<h5 class="card-title userName">Rahul</h5>
403+
<div class="leaderboard-row">
404+
<span class="rank">#4</span>
405+
<img src="assets/images/leaderboard-section/user-2.png" alt="User 4" class="leaderboard-Img">
406+
<span class="userName">Simran</span>
407+
<span class="points">980 pts</span>
408+
</div>
409+
</div>
410+
</section>
502411

503-
<div class="leaderboradUser-RankContainer">
504-
<p class="rankPosition">
505-
<i class="fa-solid fa-award"></i> 5th Rank
506-
</p>
507-
<p class="rankPoints">
508-
<i class="fa-solid fa-medal"></i> 1020 Points
509-
</p>
510-
</div>
511-
</div>
512-
</div>
513-
</div>
514-
</div>
515-
</div>
516-
</div>
517-
</section>
518412
<!-- ================================ Leaderboard Section End Here ================================ -->
519413

520414
<!-- ================================ 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)