refactor: standardise code formatting

Author: Tarawally

Sprint-3/quote-generator/app.js

@@ -8,16 +8,14 @@ const AUTO_PLAY_INTERVAL_MS = 60000;
 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");
+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.
- */
+// 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);
@@ -27,29 +25,25 @@ function displayNewQuote() {
   authorElement.innerText = randomQuote.author;
 }
 
-/**
- * Initiates the auto-play feature.
- * Establishes a recurring timer to refresh the displayed quote.
- */
+// 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");
+  autoPlayStatus.classList.add('active');
 
   // Schedules the 'displayNewQuote' function to execute every 60 seconds.
   autoPlayIntervalId = setInterval(function () {
     displayNewQuote();
   }, AUTO_PLAY_INTERVAL_MS);
 }
 
-/**
- * Terminates the auto-play feature.
- * Clears the active timer and resets the state.
- */
+// 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) {
@@ -58,15 +52,11 @@ function stopAutoPlay() {
   }
 
   // Deactivates the visual status indicator.
-  autoPlayStatus.classList.remove("active");
+  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.
- *
- * @param {Event} event - The change event triggered by the checkbox.
- */
+// 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) {
@@ -78,7 +68,7 @@ function handleAutoPlayToggle(event) {
 
 // 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 () {
+newQuoteButton.addEventListener('click', function () {
   displayNewQuote();
 
   // Restarts the auto-play timer if the feature is currently enabled.
@@ -90,7 +80,7 @@ newQuoteButton.addEventListener("click", function () {
 
 // 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);
+autoPlaySwitch.addEventListener('change', handleAutoPlayToggle);
 
 // Initializes the view by displaying a random quote upon page load.
 displayNewQuote();

Sprint-3/quote-generator/style.css

@@ -1,10 +1,10 @@
 /** Write your CSS in here **/
 
 :root {
+  --bg-color: #f5ac2d;
+  --card-bg: #fff;
   --primary-color: #f5ac2d;
   --text-color: #f5ac2d;
-  --bg-color: #f5ac2d;
-  --card-bg: #ffffff;
   --transition-speed: 0.3s;
 }
 
@@ -15,58 +15,58 @@
 }
 
 body {
-  font-family: Georgia, 'Times New Roman', Times, serif;
+  align-items: center;
   background-color: var(--bg-color);
-  min-height: 100vh;
   display: flex;
+  font-family: Georgia, 'Times New Roman', Times, serif;
   justify-content: center;
-  align-items: center;
+  min-height: 100vh;
   padding: 1rem;
 }
 
 .container {
   background: var(--card-bg);
-  padding: 3rem 4rem;
-  width: 100%;
+  /* 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;
-  text-align: center;
+  padding: 3rem 4rem;
   position: relative;
-  /* Applies a simple crisp shadow for visibility, maintaining the flat design aesthetic */
-  box-shadow: 0 4px 6px rgba(0,0,0,0.1); 
+  text-align: center;
+  width: 100%;
 }
 
 h1 {
   display: none; /* Hides the title as it is not visible in the reference design */
 }
 
 #quote {
+  color: var(--text-color);
   font-size: 1.8rem;
   line-height: 1.4;
-  color: var(--text-color);
   margin-bottom: 1.5rem;
-  position: relative;
   padding-left: 3rem; /* Reserves space for the decorative 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 */
   font-size: 6rem;
-  color: var(--primary-color);
-  position: absolute;
-  top: -1.5rem;
   left: -1rem;
   line-height: 1;
-  font-family: sans-serif; /* Uses sans-serif for the quote mark for better visual appeal */
   opacity: 1; /* Maintains solid opacity matching the design */
+  position: absolute;
+  top: -1.5rem;
 }
 
 #author {
-  font-size: 1.1rem;
   color: var(--text-color);
+  font-size: 1.1rem;
+  font-style: italic; /* Applies italics to distinguish the author name */
   margin-bottom: 2.5rem;
   text-align: right;
-  font-style: italic; /* Applies italics to distinguish the author name */
 }
 
 /* Appends a dash before the author name if not dynamically added by JS */
@@ -75,21 +75,21 @@ h1 {
 }
 
 .controls {
+  align-items: flex-end; /* Aligns controls to the right to match typical progression flows */
   display: flex;
   flex-direction: column;
-  align-items: flex-end; /* Aligns controls to the right to match typical progression flows */
 }
 
 button {
   background-color: var(--primary-color);
-  color: white;
   border: none;
-  padding: 0.8rem 1.5rem;
-  font-size: 1rem;
-  font-family: Arial, sans-serif; 
+  color: #fff;
   cursor: pointer;
-  transition: opacity var(--transition-speed) ease;
+  font-family: Arial, sans-serif;
+  font-size: 1rem;
   font-weight: bold;
+  padding: 0.8rem 1.5rem;
+  transition: opacity var(--transition-speed) ease;
 }
 
 button:hover {
@@ -98,54 +98,54 @@ button:hover {
 
 /* Auto-play Switch - adjusts layout to fit the theme */
 .auto-play-container {
-  display: flex;
   align-items: center;
+  align-self: flex-end;
+  display: flex;
   gap: 1rem;
   margin-top: 1rem; /* Separates the switch from the main action button */
-  align-self: flex-end;
 }
 
 .switch-label {
-  font-weight: normal;
-  font-size: 0.9rem;
   color: var(--text-color);
   font-family: Arial, sans-serif;
+  font-size: 0.9rem;
+  font-weight: normal;
 }
 
 .switch {
-  position: relative;
   display: inline-block;
-  width: 50px;
   height: 26px;
+  position: relative;
+  width: 50px;
 }
 
 .switch input {
+  height: 0;
   opacity: 0;
   width: 0;
-  height: 0;
 }
 
 .slider {
-  position: absolute;
+  background-color: #e4e4e4; /* Sets light grey background for the 'off' state */
+  border-radius: 0; /* Maintains square/rectangular shape for a standard toggle look */
+  bottom: 0;
   cursor: pointer;
-  top: 0;
   left: 0;
+  position: absolute;
   right: 0;
-  bottom: 0;
-  background-color: #e4e4e4; /* Sets light grey background for the 'off' state */
+  top: 0;
   transition: .4s;
-  border-radius: 0; /* Maintains square/rectangular shape for a standard toggle look */
 }
 
 .slider:before {
-  position: absolute;
-  content: "";
+  background-color: #fff;
+  bottom: 3px;
+  content: '';
   height: 20px;
-  width: 20px;
   left: 3px;
-  bottom: 3px;
-  background-color: white;
+  position: absolute;
   transition: .4s;
+  width: 20px;
 }
 
 input:checked + .slider {
@@ -161,15 +161,15 @@ input:checked + .slider:before {
 }
 
 .status-indicator {
+  align-self: flex-end;
+  color: var(--primary-color);
+  font-family: Arial, sans-serif;
   font-size: 0.8rem;
   font-weight: bold;
-  color: var(--primary-color);
-  opacity: 0;
   margin-top: 0.5rem;
-  align-self: flex-end;
-  font-family: Arial, sans-serif;
+  opacity: 0;
 }
 
 .status-indicator.active {
   opacity: 1;
-}
+}