Display "Auto-Play: ON" when Random quote every minute setting is ticked

Author: anosidium

Sprint-3/quote-generator/index.html

@@ -22,7 +22,7 @@
           Random quote every minute
         </label>
       </div>
-
     </blockquote>
+    <p id="autoplay-status">Auto-Play: ON</p>
   </body>
 </html>

Sprint-3/quote-generator/quotes.js

@@ -506,13 +506,16 @@ document.getElementById("new-quote").addEventListener("click", () => {
 let autoQuoteIntervalID = null;
 
 document.getElementById("auto-quote").addEventListener("change", function () {
+  const autoplayStatus = document.getElementById("autoplay-status");
+
   if (this.checked) {
-    newRandomQuote();
     const oneMinute = 60 * 1000;
     autoQuoteIntervalID = setInterval(newRandomQuote, oneMinute);
+    autoplayStatus.style.display = "block";
   } else {
     clearInterval(autoQuoteIntervalID);
     autoQuoteIntervalID = null;
+    autoplayStatus.style.display = "none";
   }
 });
 

Sprint-3/quote-generator/style.css

@@ -82,4 +82,19 @@ body {
 .auto-refresh input {
     transform: scale(1.2);
     margin-right: 10px;
+}
+
+#autoplay-status {
+    position: fixed;
+    bottom: 10px;
+    right: 15px;
+    font-size: 1rem;
+    color: white;
+    background: rgba(0, 0, 0, 0.4);
+    padding: 6px 10px;
+    border-radius: 5px;
+    display: none;
+    /* hidden by default */
+    pointer-events: none;
+    /* so clicks pass through */
 }