updated display setting

Author: TzeMingHo

Sprint-3/quote-generator/index.html

@@ -17,7 +17,12 @@
     <div id="poster">
       <p id="quote"></p>
       <p id="author"></p>
-      <button type="button" id="new-quote">New quote</button>
+      <div id="button-field">
+        <button type="button" id="new-quote">New quote</button>
+      </div>
+      <div id="display-notice">
+        <p id="auto-play-notice" style="display: none">Auto-Play: On</p>
+      </div>
     </div>
   </body>
 </html>

Sprint-3/quote-generator/quotes.js

@@ -499,15 +499,21 @@ function updateQuoteAndAuthor() {
 }
 
 function autoUpdateQuoteAndAuthor() {
-  let autoQuote = document.getElementById("toggle-btn");
+  const autoQuote = document.getElementById("toggle-btn");
+  const newQuoteButton = document.getElementById("new-quote");
+  const autoDisplayNotice = document.getElementById("auto-play-notice");
   let intervalId;
   autoQuote.addEventListener("change", () => {
     if (autoQuote.checked) {
+      newQuoteButton.style.display = "none";
+      autoDisplayNotice.style.display = "block";
       intervalId = setInterval(() => {
         updateQuoteAndAuthor();
       }, 3000);
     } else {
       clearInterval(intervalId);
+      newQuoteButton.style.display = "block";
+      autoDisplayNotice.style.display = "none";
     }
   });
 }

Sprint-3/quote-generator/style.css

@@ -35,6 +35,21 @@ body {
   width: 90%;
 }
 
+#button-field {
+  display: flex;
+  justify-content: end;
+  margin-bottom: -10px;
+}
+
+#display-notice {
+  display: flex;
+  justify-content: end;
+}
+
+#auto-display-notice {
+  font-size: 12px;
+}
+
 button {
   border-radius: 8px;
   font-size: medium;