refactor: remove unnecessary comments

Author: Tarawally

Sprint-3/quote-generator/app.js

@@ -1,86 +1,52 @@
 /* globals quotes, pickFromArray */
 
-// Defines the auto-play interval duration (60 seconds) as a constant for maintainability.
 const AUTO_PLAY_INTERVAL_MS = 60000;
-
-// Tracks the state of the auto-play timer.
-// Initializes as null to indicate no active timer.
 let autoPlayIntervalId = null;
 
-// Caches DOM references to avoid repeated lookups during runtime.
 const quoteElement = document.getElementById('quote');
 const authorElement = document.getElementById('author');
 const newQuoteButton = document.getElementById('new-quote');
 const autoPlaySwitch = document.getElementById('auto-play-switch');
 const autoPlayStatus = document.getElementById('auto-play-status');
 
-// Retrieves a random quote from the data source and updates the DOM.
-// Updates both the quote text and the author name.
 function displayNewQuote() {
-  // Selects a random quote object from the global 'quotes' array.
   const randomQuote = pickFromArray(quotes);
-
-  // Updates the HTML elements with the new quote text and author name.
   quoteElement.innerText = randomQuote.quote;
   authorElement.innerText = randomQuote.author;
 }
 
-// Initiates the auto-play feature.
-// Establishes a recurring timer to refresh the displayed quote.
 function startAutoPlay() {
-  // Clears any existing timer to prevent overlapping intervals.
   if (autoPlayIntervalId) {
     clearInterval(autoPlayIntervalId);
   }
-
-  // Activates the visual status indicator for auto-play.
   autoPlayStatus.classList.add('active');
-
-  // Schedules the 'displayNewQuote' function to execute every 60 seconds.
-  autoPlayIntervalId = setInterval(function () {
-    displayNewQuote();
-  }, AUTO_PLAY_INTERVAL_MS);
+  autoPlayIntervalId = setInterval(displayNewQuote, AUTO_PLAY_INTERVAL_MS);
 }
 
-// Terminates the auto-play feature.
-// Clears the active timer and resets the state.
 function stopAutoPlay() {
-  // Verifies if a timer exists before attempting to clear it.
   if (autoPlayIntervalId) {
     clearInterval(autoPlayIntervalId);
     autoPlayIntervalId = null;
   }
-
-  // Deactivates the visual status indicator.
   autoPlayStatus.classList.remove('active');
 }
 
-// Manages the state change when the auto-play switch is toggled.
-// Routes execution to start or stop auto-play based on the switch state.
 function handleAutoPlayToggle(event) {
-  // Evaluates the checked state of the toggle switch.
   if (event.target.checked) {
     startAutoPlay();
   } else {
     stopAutoPlay();
   }
 }
 
-// Attaches a click event listener to the "New quote" button.
-// Triggers a manual update of the quote and resets the auto-play timer if active.
 newQuoteButton.addEventListener('click', function () {
   displayNewQuote();
-
-  // Restarts the auto-play timer if the feature is currently enabled.
-  // Ensures the full interval elapses before the next automatic update.
   if (autoPlaySwitch.checked) {
     startAutoPlay();
   }
 });
 
-// Attaches a change event listener to the auto-play toggle switch.
-// Invokes the handler function whenever the user interacts with the switch.
 autoPlaySwitch.addEventListener('change', handleAutoPlayToggle);
 
-// Initializes the view by displaying a random quote upon page load.
-displayNewQuote();
+// Initial display on load.
+displayNewQuote();

Sprint-3/quote-generator/style.css

@@ -1,5 +1,3 @@
-/** Write your CSS in here **/
-
 :root {
   --bg-color: #f5ac2d;
   --card-bg: #fff;
@@ -26,7 +24,6 @@ body {
 
 .container {
   background: var(--card-bg);
-  /* Applies a simple crisp shadow for visibility, maintaining the flat design aesthetic */
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
   max-width: 700px;
   padding: 3rem 4rem;
@@ -36,46 +33,45 @@ body {
 }
 
 h1 {
-  display: none; /* Hides the title as it is not visible in the reference design */
+  display: none;
 }
 
 #quote {
   color: var(--text-color);
   font-size: 1.8rem;
   line-height: 1.4;
   margin-bottom: 1.5rem;
-  padding-left: 3rem; /* Reserves space for the decorative quote icon */
+  padding-left: 3rem; /* Space for quote icon. */
   position: relative;
   text-align: left;
 }
 
 #quote::before {
   color: var(--primary-color);
-  content: '“'; /* Renders a large curved quote mark */
-  font-family: sans-serif; /* Uses sans-serif for the quote mark for better visual appeal */
+  content: '“';
+  font-family: sans-serif;
   font-size: 6rem;
   left: -1rem;
   line-height: 1;
-  opacity: 1; /* Maintains solid opacity matching the design */
+  opacity: 1;
   position: absolute;
   top: -1.5rem;
 }
 
 #author {
   color: var(--text-color);
   font-size: 1.1rem;
-  font-style: italic; /* Applies italics to distinguish the author name */
+  font-style: italic;
   margin-bottom: 2.5rem;
   text-align: right;
 }
 
-/* Appends a dash before the author name if not dynamically added by JS */
 #author::before {
   content: '- ';
 }
 
 .controls {
-  align-items: flex-end; /* Aligns controls to the right to match typical progression flows */
+  align-items: flex-end;
   display: flex;
   flex-direction: column;
 }
@@ -96,13 +92,12 @@ button:hover {
   opacity: 0.9;
 }
 
-/* Auto-play Switch - adjusts layout to fit the theme */
 .auto-play-container {
   align-items: center;
   align-self: flex-end;
   display: flex;
   gap: 1rem;
-  margin-top: 1rem; /* Separates the switch from the main action button */
+  margin-top: 1rem;
 }
 
 .switch-label {
@@ -126,8 +121,8 @@ button:hover {
 }
 
 .slider {
-  background-color: #e4e4e4; /* Sets light grey background for the 'off' state */
-  border-radius: 0; /* Maintains square/rectangular shape for a standard toggle look */
+  background-color: #e4e4e4;
+  border-radius: 0;
   bottom: 0;
   cursor: pointer;
   left: 0;