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(() => {