confitti

index.html

@@ -7,6 +7,7 @@
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css">
     <link rel="stylesheet" href="CSS/styles.css">
     <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
+    <script src="https://cdn.jsdelivr.net/npm/@tsparticles/confetti@3.0.3/tsparticles.confetti.bundle.min.js"></script>
     <script src="script.js" defer></script>
     <title>Wordle for Sara</title>
 </head>
@@ -27,11 +28,11 @@
             <i class='bx bx-share-alt share-stats' title="Stats" id="Stats-button"></i>
         </div>
         <div class="icons__container bd-grid">
-            <a href="https://www.youtube.com/watch?v=UkOKCWDJ4iA">
+            <a href="https://www.youtube.com/watch?v=UkOKCWDJ4iA" target="_blank" rel="noopener noreferrer">
-                <i class='bx bxs-heart setting-page' title="I love You" id="Setting-button"
+                <i class='bx bxs-heart setting-page' title="I love You" id="Setting-button"></i>
-                    href="https://www.youtube.com/watch?v=UkOKCWDJ4iA"></i>
           </a>
         </div>
+
     </section>
     <div class="alert-container" data-alert-container></div>
     <div data-guess-grid class="guess-grid">

script.js

@@ -244,6 +244,7 @@ function checkWinLose(guess, tiles) {
   if (guess === targetWord) {
     showAlert("Congratulations Sara, You win!", 5000)
     danceTiles(tiles)
+    celebrateWithConfetti()
     stopInteraction()
     return
   }
@@ -254,7 +255,54 @@ function checkWinLose(guess, tiles) {
     stopInteraction()
   }
 }
+// Confetti celebration function
+function celebrateWithConfetti() {
+  // Initial burst from the center
+  confetti({
+    particleCount: 100,
+    spread: 70,
+    origin: { y: 0.6 }
+  })
 
+  // Side cannons effect
+  setTimeout(() => {
+    confetti({
+      particleCount: 50,
+      angle: 60,
+      spread: 55,
+      origin: { x: 0 }
+    })
+    confetti({
+      particleCount: 50,
+      angle: 120,
+      spread: 55,
+      origin: { x: 1 }
+    })
+  }, 200)
+
+  // Stars effect
+  setTimeout(() => {
+    confetti({
+      particleCount: 30,
+      spread: 360,
+      startVelocity: 30,
+      decay: 0.9,
+      scalar: 1.2,
+      shapes: ['star'],
+      colors: ['#ff6b6b', '#4ecdc4', '#45b7d1', '#96ceb4', '#ffeaa7']
+    })
+  }, 400)
+
+  // Final cascade
+  setTimeout(() => {
+    confetti({
+      particleCount: 200,
+      spread: 100,
+      origin: { y: 0.4 },
+      colors: ['#ff6b6b', '#4ecdc4', '#45b7d1', '#96ceb4', '#ffeaa7', '#dda0dd']
+    })
+  }, 600)
+}
 function danceTiles(tiles) {
   tiles.forEach((tile, index) => {
     setTimeout(() => {