feat: add difficulty badges and filtering

Author: jainiksha

web-app/css/styles.css

@@ -7334,4 +7334,41 @@ color:#22c55e;
 
 margin-left:8px;
 
+}
+.difficulty-badge{
+
+position:absolute;
+
+top:15px;
+
+left:15px;
+
+padding:5px 12px;
+
+border-radius:20px;
+
+font-size:.75rem;
+
+font-weight:700;
+
+color:#fff;
+
+}
+
+.difficulty-badge.beginner{
+
+background:#22c55e;
+
+}
+
+.difficulty-badge.intermediate{
+
+background:#f59e0b;
+
+}
+
+.difficulty-badge.advanced{
+
+background:#ef4444;
+
 }

web-app/index.html

@@ -767,12 +767,13 @@ <h3>Stay Updated</h3>
       const projectsData = [
         // GAMES (20+)
         {
-          project: "number-sliding-puzzle",
-          title: "Number Sliding Puzzle",
-          category: "games",
-          desc: "Arrange tiles in order by sliding them into empty space",
-          tags: "game,puzzle,sliding,numbers",
-        },
+  project: "number-sliding-puzzle",
+  title: "Number Sliding Puzzle",
+  category: "games",
+  difficulty: "Intermediate",
+  desc: "Arrange tiles in order by sliding them into empty space",
+  tags: "game,puzzle,sliding,numbers",
+},
         {
           project: "2048-game",
           title: "2048 Game",
@@ -1190,16 +1191,31 @@ <h3>Stay Updated</h3>
         const starClass = isFavorite ? "fas fa-star" : "far fa-star";
 
         card.innerHTML = `
-            <img class="card-banner" src="assets/banners/${proj.project}.webp?v=2" alt="${proj.title}" loading="lazy">
-            <div class="card-actions">
-                <button class="btn-play" data-project="${proj.project}" aria-label="Play PyMini Logo">Try It</button>
-                <button class="btn-favorite" data-project="${proj.project}" aria-label="Add to favorites">
-                    <i class="${starClass}"></i>
-                </button>
-            </div>
-            <h3>${proj.title}</h3>
-            <p>${proj.desc}</p>
-        `;
+    <div class="difficulty-badge ${proj.difficulty.toLowerCase()}">
+        ${proj.difficulty}
+    </div>
+
+    <img class="card-banner"
+         src="assets/banners/${proj.project}.webp?v=2"
+         alt="${proj.title}"
+         loading="lazy">
+
+    <div class="card-actions">
+        <button class="btn-play"
+                data-project="${proj.project}">
+            Try It
+        </button>
+
+        <button class="btn-favorite"
+                data-project="${proj.project}">
+            <i class="${starClass}"></i>
+        </button>
+    </div>
+
+    <h3>${proj.title}</h3>
+
+    <p>${proj.desc}</p>
+`;
 
         projectsGrid.appendChild(card);
       });

web-app/js/main.js

@@ -1455,6 +1455,22 @@ document.addEventListener("DOMContentLoaded", function () {
        ═══════════════════════════════════════════════════════════════ */
   function wireProjectCard(card) {
     var name = card.getAttribute("data-project");
+    const difficulty =
+card.getAttribute("data-difficulty");
+
+if(difficulty){
+
+const badge=document.createElement("span");
+
+badge.className=
+"difficulty-badge "+
+difficulty.toLowerCase();
+
+badge.textContent=difficulty;
+
+card.appendChild(badge);
+
+}
 
     /* ── Favorite Button ──────────────────────────────────── */
     // Remove any existing favorite button first to avoid duplicates