confitti

CSS/styles.css

@@ -251,3 +251,65 @@ body.dark-theme{
 .setting-page:hover{
   color: rgb(150, 141, 141)
 }
+* Definition Alert Styles */
+.definition-alert {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  padding: 20px;
+  border-radius: 12px;
+  max-width: 400px;
+  margin: 0 auto 10px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  backdrop-filter: blur(10px);
+  cursor: pointer;
+  transition: all 0.3s ease;
+  text-align: left;
+  line-height: 1.6;
+  font-size: 14px;
+}
+
+.definition-alert:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
+}
+
+.win-definition {
+  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+  border-color: rgba(79, 172, 254, 0.5);
+}
+
+.lose-definition {
+  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
+  border-color: rgba(250, 112, 154, 0.5);
+}
+
+.definition-alert strong {
+  font-weight: 700;
+  font-size: 16px;
+  display: block;
+  margin-bottom: 8px;
+}
+
+.definition-alert::before {
+  content: "💡 Click to dismiss";
+  position: absolute;
+  top: 5px;
+  right: 10px;
+  font-size: 10px;
+  opacity: 0.7;
+}
+
+/* Dark theme adjustments */
+.dark-theme .definition-alert {
+  border-color: rgba(255, 255, 255, 0.1);
+}
+
+/* Mobile responsiveness */
+@media (max-width: 480px) {
+  .definition-alert {
+    max-width: 90%;
+    font-size: 13px;
+    padding: 15px;
+  }
+}

script.js

@@ -242,9 +242,10 @@ function shakeTiles(tiles) {
 
 function checkWinLose(guess, tiles) {
   if (guess === targetWord) {
-    showAlert("Congratulations Sara, You win!", 5000)
+    showAlert("Congratulations, You win!", 5000)
     danceTiles(tiles)
     celebrateWithConfetti()
+    showWordDefinition(targetWord, true)
     stopInteraction()
     return
   }
@@ -252,57 +253,149 @@ function checkWinLose(guess, tiles) {
   const remainingTiles = guessGrid.querySelectorAll(":not([data-letter])")
   if (remainingTiles.length === 0) {
     showAlert(targetWord.toUpperCase(), null)
+    showWordDefinition(targetWord, false)
     stopInteraction()
   }
 }
+
+// Function to fetch and display word definition
+async function showWordDefinition(word, isWin = true) {
+  try {
+    console.log(`Fetching definition for: ${word}`)
+    
+    const response = await fetch(`https://api.dictionaryapi.dev/api/v2/entries/en/${word}`)
+    
+    if (!response.ok) {
+      throw new Error(`API request failed: ${response.status}`)
+    }
+    
+    const data = await response.json()
+    
+    // Extract the first definition
+    const firstMeaning = data[0]?.meanings?.[0]
+    const definition = firstMeaning?.definitions?.[0]?.definition
+    const partOfSpeech = firstMeaning?.partOfSpeech
+    const example = firstMeaning?.definitions?.[0]?.example
+    
+    if (definition) {
+      // Create definition display
+      let definitionText = `📖 **${word.toUpperCase()}** (${partOfSpeech || 'word'})\n${definition}`
+      
+      if (example) {
+        definitionText += `\n\n💡 Example: "${example}"`
+      }
+      
+      // Show definition in a styled alert
+      showDefinitionAlert(definitionText, isWin)
+      
+    } else {
+      throw new Error('No definition found')
+    }
+    
+  } catch (error) {
+    console.error('Error fetching definition:', error)
+    
+    // Fallback message
+    const fallbackMsg = `📖 **${word.toUpperCase()}**\nDefinition not available at the moment.`
+    showDefinitionAlert(fallbackMsg, isWin)
+  }
+}
+
+// Special alert function for definitions
+function showDefinitionAlert(message, isWin = true) {
+  const alert = document.createElement("div")
+  alert.innerHTML = message.replace(/\n/g, '<br>').replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
+  alert.classList.add("alert", "definition-alert")
+  
+  if (isWin) {
+    alert.classList.add("win-definition")
+  } else {
+    alert.classList.add("lose-definition")
+  }
+  
+  alertContainer.prepend(alert)
+  
+  // Auto-hide after 8 seconds (longer for reading)
+  setTimeout(() => {
+    alert.classList.add("hide")
+    alert.addEventListener("transitionend", () => {
+      alert.remove()
+    })
+  }, 8000)
+  
+  // Click to dismiss
+  alert.addEventListener('click', () => {
+    alert.classList.add("hide")
+    alert.addEventListener("transitionend", () => {
+      alert.remove()
+    })
+  })
+}
+
 // Confetti celebration function
 function celebrateWithConfetti() {
-  // Initial burst from the center
-  confetti({
-    particleCount: 100,
-    spread: 70,
-    origin: { y: 0.6 }
-  })
+  console.log('Confetti celebration triggered!')
+  
+  // Check if confetti library is loaded
+  if (typeof confetti === 'undefined') {
+    console.error('Confetti library not loaded! Make sure to include the script tag.')
+    return
+  }
 
-  // Side cannons effect
-  setTimeout(() => {
+  try {
+    // Initial burst from the center
     confetti({
-      particleCount: 50,
-      angle: 60,
-      spread: 55,
-      origin: { x: 0 }
+      particleCount: 100,
+      spread: 70,
+      origin: { y: 0.6 }
     })
-    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)
+    // 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)
 
-  // Final cascade
-  setTimeout(() => {
-    confetti({
-      particleCount: 200,
-      spread: 100,
-      origin: { y: 0.4 },
-      colors: ['#ff6b6b', '#4ecdc4', '#45b7d1', '#96ceb4', '#ffeaa7', '#dda0dd']
-    })
-  }, 600)
+    // 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)
+    
+    console.log('Confetti animation started successfully!')
+    
+  } catch (error) {
+    console.error('Error triggering confetti:', error)
+  }
 }
+
 function danceTiles(tiles) {
   tiles.forEach((tile, index) => {
     setTimeout(() => {