feat: port budget tracker to web app with local storage

README.md

@@ -284,6 +284,7 @@ The browser app currently exposes 39 projects:
 ### Utilities
 
 - AI Resume Analyzer
+- Budget Tracker
 - Color Palette Suggestor
 - Morse Code
 - Number Converter
@@ -299,7 +300,6 @@ These standalone Python project files do not have a browser counterpart yet and
 - [math/Happy-Number/Happy-Number.py](math/Happy-Number/Happy-Number.py)
 - [math/Matrix-Calculator/Matrix-Calculator.py](math/Matrix-Calculator/Matrix-Calculator.py)
 - [math/Quadratic-Solver/Quadratic-Solver.py](math/Quadratic-Solver/Quadratic-Solver.py)
-- [utilities/Budget-Tracker/budget_tracker.py](utilities/Budget-Tracker/budget_tracker.py)
 - [utilities/Caesar-Cipher/Caesar-Cipher.py](utilities/Caesar-Cipher/Caesar-Cipher.py)
 - [utilities/Fake-News-Headline-Generator/Fake-News-Headline-Generator.py](utilities/Fake-News-Headline-Generator/Fake-News-Headline-Generator.py)
 

web-app/generate_banners.py

@@ -573,6 +573,7 @@ def draw_o(ox, oy):
     ("AI Resume Analyzer", "utilities", "resume-analyzer.webp"),
     ("Caesar Cipher", "utilities", "caesar-cipher.webp"),
     ("Unit Converter", "utilities", "unit-converter.webp"),
+    ("Budget Tracker", "utilities", "budget-tracker.webp"),
 ]
 
 # Run generation

web-app/index.html

@@ -874,6 +874,7 @@ <h3>Legal</h3>
     <script defer src="js/hero-canvas.js"></script>
     <script defer src="js/projects/war-card-game.js"></script>
     <script defer src="js/projects/number-sliding-puzzle.js"></script>
+    <script defer src="js/projects/budget-tracker.js"></script>
     <script>
       lucide.createIcons();
     </script>
@@ -1122,6 +1123,13 @@ <h3>Legal</h3>
           },
 
           // UTILITIES (10+)
+          {
+            project: "budget-tracker",
+            title: "Budget Tracker",
+            category: "utilities",
+            desc: "Track income and expenses, view categories, and persist data locally",
+            tags: "utility,finance,tracker,money"
+          },
           {
             project: "morse-code",
             title: "Morse Code",

web-app/js/projects.js

@@ -1596,6 +1596,26 @@ function getProjectHTML(projectName) {
 
 const projectInstructions = {
   // GAMES
+  "war-card-game": {
+    title: "⚔️ How to Play War Card Game",
+    steps: [
+      "Enter names or check the option to play against the CPU.",
+      "Each player starts with a deck of 26 cards.",
+      "Click 'Draw / Battle' to draw the top card from both decks.",
+      "The player with the higher card rank wins the round and gets a point.",
+      "Ace is the highest, 2 is the lowest.",
+      "Play continues until all cards are drawn. The player with the most points wins!"
+    ]
+  },
+  "number-sliding-puzzle": {
+    title: "🧩 How to Play Number Sliding Puzzle",
+    steps: [
+      "Use arrow keys (← ↑ → ↓) or click/tap on tiles next to the empty space to slide them.",
+      "Arrange the numbers in ascending order from 1 to 8, with the blank space at the bottom right.",
+      "A moves counter keeps track of your steps.",
+      "Click the Reset button to restart the game."
+    ]
+  },
   "2048-game": {
     title: "🎮 How to Play 2048",
     steps: [
@@ -1864,6 +1884,16 @@ const projectInstructions = {
       "Click any color to copy its hex code"
     ]
   },
+  "budget-tracker": {
+    title: "💰 How to Use Budget Tracker",
+    steps: [
+      "Select the transaction type (Income or Expense) from the dropdown.",
+      "Enter a category, description (optional), and positive amount value.",
+      "Click 'Add Transaction' to log it in your dashboard.",
+      "Analyze spending behavior through dynamic category-wise progress bars.",
+      "Clear individual records using the delete action or wipe out all history securely."
+    ]
+  },
   "morse-code": {
     title: "📻 How to Use Morse Code",
     steps: [
@@ -3158,6 +3188,10 @@ function initializeProject(projectName) {
     "color-palette": "initColorPalette",
     "math-quiz": "initMathQuiz",
     "resume-analyzer": "initResumeAnalyzer",
+    "caesar-cipher": "initCaesarCipher",
+    "war-card-game": "initWarCardGame",
+    "number-sliding-puzzle": "initNumberSlidingPuzzle",
+    "budget-tracker": "initBudgetTracker"
     "caesar-cipher": "initCaesarCipher"
   };