Merge pull request steam-bell-92#743 from Ishita-varshney/feature/gui-bubble-sort-binary-search

feat: Add Binary Search and Bubble Sort GUI Visualizer

Author: steam-bell-92

package-lock.json

@@ -96,6 +96,18 @@ <h3>AP/GP/AGP/HP Recognizer</h3>
                         <h3>Armstrong Numbers</h3>
                         <p>Check special number properties!</p>
                     </div>
+                    <div class="project-card" data-category="utilities" data-project="binary-search" data-tags="search,algorithm,binary,sorted,visualizer">
+                        <img class="card-banner" src="assets/banners/binary-search.jpg" alt="Binary Search" loading="lazy">
+                        <div class="card-actions"><button class="btn-play">Try It</button></div>
+                        <h3>Binary Search</h3>
+                        <p>Visualize binary search step by step!</p>
+                    </div>
+                    <div class="project-card" data-category="utilities" data-project="bubble-sort" data-tags="sort,algorithm,bubble,visualizer,array">
+                        <img class="card-banner" src="assets/banners/bubble-sort.jpg" alt="Bubble Sort" loading="lazy">
+                        <div class="card-actions"><button class="btn-play">Try It</button></div>
+                        <h3>Bubble Sort</h3>
+                        <p>Watch bubble sort in real-time!</p>
+                    </div>
                     <div class="project-card" data-category="games" data-project="blackjack(21)" data-tags="game,casino,card,random">
                         <img class="card-banner" src="assets/banners/blackjack21.jpg" alt="BlackJack21" loading="lazy">
                         <div class="card-actions"><button class="btn-play">Play Now</button></div>
@@ -650,6 +662,8 @@ <h3>Legal</h3>
 <script src="js/projects/dice-rolling.js"></script>
 <script src="js/projects/coin-flip.js"></script>
 <script src="js/projects/number-guessing.js"></script>
+<script src="js/projects/binary-search.js"></script>
+<script src="js/projects/bubble-sort.js"></script>
 <script src="js/projects/hangman.js"></script>
 <script src="js/projects/flames.js"></script>
 <script src="js/projects/fibonacci.js"></script>

web-app/assets/banners/binary-search.jpg

@@ -12,6 +12,8 @@ function getProjectHTML(projectName) {
         'flames': () => getFlamesHTML(),
         'emoji-memory': () => getEmojiMemoryGameHTML(),
         'fibonacci': () => getFibonacciHTML(),
+        'binary-search': () => getBinarySearchHTML(),
+        'bubble-sort': () => getBubbleSortHTML(),
         'progression-recognizer': () => getProgressionRecognizerHTML(),
         'pascal-triangle': () => getPascalTriangleHTML(),
         'armstrong': () => getArmstrongHTML(),
@@ -3439,6 +3441,8 @@ function initializeProject(projectName) {
         'dots-boxes': 'initDotsBoxes',
         'emoji-memory': 'initEmojiMemoryGame',
         'fibonacci': 'initFibonacci',
+        'binary-search': 'initBinarySearch',
+        'bubble-sort': 'initBubbleSort',
         'progression-recognizer': 'initProgressionRecognizer',
         'pascal-triangle': 'initPascalTriangle',
         'armstrong': 'initArmstrong',