quotes function been upadated

Author: RomanSanaye

Sprint-3/quote-generator/index.html

@@ -11,22 +11,20 @@
       <div class="header">
         <h1>Quote Generator</h1>
       </div>
-
       <div class="quote-box">
-        <p id="quote"></p>
-        <p id="author"></p>
+        <p>" <span id="quote"></span> "</p>
+        <p>-- <span id="author"></span> --</p>
       </div>
-
       <div class="bottom-controls">
         <div class="button">
           <button type="button" id="new-quote">New quote</button>
         </div>
         <div class="autoplay-container">
           <label for="autoplay">
             <input type="checkbox" id="autoplay" />
-            Auto-play
+            Auto-play :
           </label>
-          <span id="autoplay-status">Auto-play: OFF</span>
+          <span id="autoplay-status"> OFF</span>
         </div>
       </div>
     </div>

Sprint-3/quote-generator/quotes.js

@@ -487,51 +487,74 @@ const quotes = [
 
 // call pickFromArray with the quotes array to check you get a random quote
 
-// Function to pick a random quote
-function pickFromArray() {
+// Picks a random quote object from the quotes array
+function pickFromArray(quotes) {
+  const randomIndex = Math.floor(Math.random() * quotes.length);
+  return quotes[randomIndex];
+}
+
+// Renders a quote object into the DOM
+function renderQuote(quote) {
   const quoteEl = document.getElementById("quote");
   const authorEl = document.getElementById("author");
-  const randomIndex = Math.floor(Math.random() * quotes.length);
 
-  quoteEl.textContent = `" ${quotes[randomIndex].quote} "`;
-  authorEl.textContent = `-- ${quotes[randomIndex].author} --`;
-  return randomIndex;
+  if (!quoteEl || !authorEl || !quote) return;
+
+  quoteEl.textContent = quote.quote;
+  authorEl.textContent = quote.author;
 }
 
-// Setup function for browser only
+// Sets up the application, event listeners, and initial state
 function setupQuoteApp() {
   const button = document.getElementById("new-quote");
   const autoplayCheckbox = document.getElementById("autoplay");
   const autoplayStatus = document.getElementById("autoplay-status");
 
-  // Don't call pickFromArray here for Jest test
-  if (typeof window !== "undefined" && window.document) {
-    pickFromArray();
+  if (!button || !autoplayCheckbox || !autoplayStatus) return;
+
+  let autoplayInterval = null;
 
-    button.addEventListener("click", () => pickFromArray());
+  // Show first quote on page load
+  renderQuote(pickFromArray(quotes));
 
-    let autoplayInterval = null;
-    autoplayCheckbox.addEventListener("change", () => {
-      if (autoplayCheckbox.checked) {
-        autoplayInterval = setInterval(pickFromArray, 5000);
-        autoplayStatus.textContent = "Auto-play: ON";
-        autoplayStatus.style.color = "#4CAF50";
-      } else {
-        clearInterval(autoplayInterval);
-        autoplayInterval = null;
-        autoplayStatus.textContent = "Auto-play: OFF";
-        autoplayStatus.style.color = "brown";
-      }
-    });
+  // Handles generating and rendering a new quote
+  function handleNewQuote() {
+    renderQuote(pickFromArray(quotes));
   }
+
+  // Button click generates a new quote
+  button.addEventListener("click", handleNewQuote);
+
+  // Toggle autoplay feature
+  autoplayCheckbox.addEventListener("change", () => {
+    if (autoplayCheckbox.checked) {
+      // Start auto-changing quotes every 5 seconds
+      autoplayInterval = setInterval(handleNewQuote, 5000);
+      autoplayStatus.textContent = "ON";
+
+      // Apply ON styling via CSS class
+      autoplayStatus.classList.add("autoplay-on");
+      autoplayStatus.classList.remove("autoplay-off");
+    } else {
+      // Stop auto-changing quotes
+      clearInterval(autoplayInterval);
+      autoplayInterval = null;
+
+      autoplayStatus.textContent = "OFF";
+
+      // Apply OFF styling via CSS class
+      autoplayStatus.classList.add("autoplay-off");
+      autoplayStatus.classList.remove("autoplay-on");
+    }
+  });
 }
 
-// Only run setup in browser environment
+// Initialize app only when DOM is fully loaded (browser environment)
 if (typeof window !== "undefined") {
   window.addEventListener("DOMContentLoaded", setupQuoteApp);
 }
 
-// Export function for Jest tests
+// Export function for Jest testing environment
 if (typeof module !== "undefined") {
   module.exports = pickFromArray;
 }

Sprint-3/quote-generator/style.css

@@ -16,7 +16,7 @@ body {
 }
 
 .container {
-  background: rgba(221, 221, 221, 0.4);
+  background: rgb(206, 202, 202);
   padding: 10px;
   border-radius: 16px;
   width: 100%;
@@ -112,9 +112,14 @@ body {
   cursor: pointer;
 }
 
-#autoplay-status {
+.autoplay-on {
+  color: #4caf50;
   font-weight: bold;
+}
+
+.autoplay-off {
   color: brown;
+  font-weight: bold;
 }
 
 /* Responsive */