diff --git a/Sprint-3/quote-generator/assets/SPACE.mp3 b/Sprint-3/quote-generator/assets/SPACE.mp3 new file mode 100644 index 000000000..0a5fe2ba3 Binary files /dev/null and b/Sprint-3/quote-generator/assets/SPACE.mp3 differ diff --git a/Sprint-3/quote-generator/quote_generator_example.png b/Sprint-3/quote-generator/assets/quote_generator_example.png similarity index 100% rename from Sprint-3/quote-generator/quote_generator_example.png rename to Sprint-3/quote-generator/assets/quote_generator_example.png diff --git a/Sprint-3/quote-generator/assets/stars.gif b/Sprint-3/quote-generator/assets/stars.gif new file mode 100644 index 000000000..587ac2e3d Binary files /dev/null and b/Sprint-3/quote-generator/assets/stars.gif differ diff --git a/Sprint-3/quote-generator/assets/stars.webp b/Sprint-3/quote-generator/assets/stars.webp new file mode 100644 index 000000000..cb7f28c7d Binary files /dev/null and b/Sprint-3/quote-generator/assets/stars.webp differ diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 30b434bcf..5781c3008 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -3,13 +3,20 @@ - Title here + + Quote generator app + -

hello there

-

-

- +
+

Random Quotes 🔊

+

+

+
+ + +
+
diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 4a4d04b72..8d8ab4add 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -15,10 +15,9 @@ // --------------- // pickFromArray(['a','b','c','d']) // maybe returns 'c' -// You don't need to change this function -function pickFromArray(choices) { - return choices[Math.floor(Math.random() * choices.length)]; -} + + +// ========================= array quotes ====================== // A list of quotes you can use in your app. // DO NOT modify this array, otherwise the tests may break! diff --git a/Sprint-3/quote-generator/script.js b/Sprint-3/quote-generator/script.js new file mode 100644 index 000000000..c7792940a --- /dev/null +++ b/Sprint-3/quote-generator/script.js @@ -0,0 +1,89 @@ +// --- Configuration & Global Variables --- +const backgroundSound = new Audio("assets/SPACE.mp3"); +let isSoundStarted = false; // Using 'let' as the value changes to true once music plays +let quoteInterval; // Using 'let' to store/clear the interval ID + +// --- DOM Elements --- +const button = document.querySelector("#new-quote"); +const secondButton = document.querySelector("#playButton"); +const quoteText = document.querySelector("#quote"); +const quoteAuthor = document.querySelector("#author"); + +// --- Logic Functions --- + +/** + * Picks a random quote from the array and updates the DOM elements. + */ +function randomQuoteGenerate() { + if (typeof quotes !== "undefined") { + const randomArr = quotes[Math.floor(Math.random() * quotes.length)]; + if (quoteText && quoteAuthor) { + quoteText.textContent = randomArr.quote; + quoteAuthor.textContent = randomArr.author; + } + } +} + +/** + * Attempts to play the background audio if not in a test environment. + */ +function playSound() { + // Check for 'jsdom' to prevent errors during automated testing + if (!navigator.userAgent.includes("jsdom") && !isSoundStarted) { + backgroundSound + .play() + .then(() => { + isSoundStarted = true; + }) + .catch(() => + console.log("Waiting for user interaction to play audio...") + ); + } +} + +// --- Callbacks (Event Handler Functions) --- + +/** + * Handles manual quote changes via button click. + */ +function changeQuote() { + randomQuoteGenerate(); + playSound(); +} + +/** + * Toggles the automatic quote generator on or off. + */ +function toggleAutomaticQuote() { + if (quoteInterval) { + // Stop the interval if it's already running + clearInterval(quoteInterval); + quoteInterval = null; + secondButton.textContent = "Play Auto-Quotes"; + } else { + // Start the interval and update every 2 seconds + randomQuoteGenerate(); + quoteInterval = setInterval(randomQuoteGenerate, 2000); + secondButton.textContent = "Stop"; + playSound(); + } +} + +// --- Initialization --- + +/** + * Sets up the initial state and attaches event listeners once the window has loaded. + */ +window.addEventListener("load", () => { + // Generate the first quote immediately on load + randomQuoteGenerate(); + + // Attach event listeners to the buttons + if (button) { + button.addEventListener("click", changeQuote); + } + + if (secondButton) { + secondButton.addEventListener("click", toggleAutomaticQuote); + } +}); diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index 63cedf2d2..36fc2d1b0 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -1 +1,81 @@ -/** Write your CSS in here **/ +body { + background-image: url("./assets/stars.webp"); + background-size: cover; + background-position: center; + background-attachment: fixed; + margin: 0; + min-height: 100vh; + display: flex; + justify-content: center; + align-items: center; + font-family: Arial, sans-serif; + padding: 10px; +} + +#container-quote { + background: rgba(0, 0, 0, 0.1); + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + padding: 1.2rem; + border-radius: 15px; + border: 1px solid rgba(255, 255, 255, 0.15); + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); + width: 90%; + max-width: 300px; + min-height: auto; + display: flex; + flex-direction: column; + text-align: center; +} + +h1 { + font-size: 1.1rem; + margin: 0 0 0.8rem 0; + color: #ffffff; + opacity: 0.9; +} + +#quote { + font-size: 1.1rem; + font-style: italic; + color: #3bffeb; + line-height: 1.4; + margin-bottom: 0.5rem; + min-height: 50px; + display: flex; + align-items: center; + justify-content: center; +} + +#author { + font-size: 0.8rem; + font-weight: bold; + color: #cbd5e0; + margin-bottom: 1.2rem; +} + +.buttons-wrapper { + display: flex; + gap: 8px; + width: 100%; +} + +#new-quote, #playButton { + flex: 1; + background-color: rgba(3, 251, 255, 0.1); + color: white; + border: 1px solid rgba(59, 255, 235, 0.3); + border-radius: 6px; + padding: 8px 10px; + font-size: 0.75rem; + font-family: Arial, sans-serif; + cursor: pointer; + transition: all 0.3s ease; +} + +#new-quote:hover, +#playButton:hover { + background-color: #3bffeb; + color: #000593; + transform: translateY(-2px); +} \ No newline at end of file