diff --git a/CSS/styles.css b/CSS/styles.css
index 05a3933..4416662 100644
--- a/CSS/styles.css
+++ b/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;
+ }
+}
\ No newline at end of file
diff --git a/script.js b/script.js
index 45e3e0f..735e33a 100644
--- a/script.js
+++ b/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, '
').replace(/\*\*(.*?)\*\*/g, '$1')
+ 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(() => {