CodeYourFuture · carlosyabreu · Mar 29, 2026 · Mar 29, 2026
diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html
@@ -1,15 +1,37 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Title here</title>
+    <title>Quote generator app</title>
+    <link rel="stylesheet" href="style.css" />
     <script defer src="quotes.js"></script>
   </head>
   <body>
-    <h1>hello there</h1>
-    <p id="quote"></p>
-    <p id="author"></p>
-    <button type="button" id="new-quote">New quote</button>
+    <div class="container">
+      <h1>Quote Generator</h1>
+
+      <div class="quote-container">
+        <p id="quote" class="quote-text"></p>
+        <p id="author" class="author-text"></p>
+      </div>
+
+      <div class="controls">
+        <button type="button" id="new-quote" class="btn btn-primary">
+          New quote
+        </button>
+
+        <div class="auto-play-control">
+          <label for="auto-play-toggle" class="auto-play-label">
+            Auto-play:
+            <span id="auto-play-status" class="status">OFF</span>
+          </label>
+          <label class="toggle-switch">
+            <input type="checkbox" id="auto-play-toggle" />
+            <span class="toggle-slider"></span>
+          </label>
+        </div>
+      </div>
+    </div>
   </body>
 </html>
diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js
@@ -491,3 +491,82 @@ const quotes = [
 ];
 
 // call pickFromArray with the quotes array to check you get a random quote
+
+// My code starts here
+let autoPlayInterval = null;
+let isAutoPlaying = false;
+
+// Function to update the displayed quote
+function updateQuote() {
+  const randomQuote = pickFromArray(quotes);
+  const quoteElement = document.getElementById('quote');
+  const authorElement = document.getElementById('author');
+
+  if (quoteElement && authorElement) {
+    quoteElement.textContent = `"${randomQuote.quote}"`;
+    authorElement.textContent = `— ${randomQuote.author}`;
+  }
+}
+
+// Function to start auto-play
+function startAutoPlay(intervalSeconds = 60) {
+  if (autoPlayInterval) {
+    clearInterval(autoPlayInterval);
+  }
+  autoPlayInterval = setInterval(updateQuote, intervalSeconds * 1000);
+  isAutoPlaying = true;
+}
+
+// Function to stop auto-play
+function stopAutoPlay() {
+  if (autoPlayInterval) {
+    clearInterval(autoPlayInterval);
+    autoPlayInterval = null;
+  }
+  isAutoPlaying = false;
+}
+
+// Function to update the auto-play status display
+function updateAutoPlayStatus() {
+  const statusSpan = document.getElementById('auto-play-status');
+  if (statusSpan) {
+    statusSpan.textContent = isAutoPlaying ? 'ON' : 'OFF';
+    statusSpan.className = `status ${isAutoPlaying ? 'status-on' : 'status-off'}`;
+  }
+}
+
+// Initialize the app when the DOM is loaded
+document.addEventListener('DOMContentLoaded', () => {
+  // Display initial random quote
+  updateQuote();
+
+  // Get DOM elements
+  const newQuoteBtn = document.getElementById('new-quote');
+  const autoPlayToggle = document.getElementById('auto-play-toggle');
+
+  // Add event listener for new quote button
+  if (newQuoteBtn) {
+    newQuoteBtn.addEventListener('click', () => {
+      updateQuote();
+    });
+  }
+
+  // Add event listener for auto-play toggle
+  if (autoPlayToggle) {
+    autoPlayToggle.addEventListener('change', (event) => {
+      if (event.target.checked) {
+        // For testing, use 5 seconds instead of 60 seconds
+        // In production, you might want to use 60 seconds
+        // You can uncomment the appropriate line below
+        startAutoPlay(5); // Using 5 seconds for testing
+        // startAutoPlay(60); // Use this for production with 60 seconds
+      } else {
+        stopAutoPlay();
+      }
+      updateAutoPlayStatus();
+    });
+  }
+
+  // Initialize status display
+  updateAutoPlayStatus();
+});
diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css
@@ -1 +1,211 @@
 /** Write your CSS in here **/
+/** Write your CSS in here **/
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  min-height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 20px;
+}
+
+.container {
+  max-width: 800px;
+  width: 100%;
+  background: white;
+  border-radius: 20px;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+  padding: 40px;
+  animation: fadeIn 0.5s ease-in;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+h1 {
+  text-align: center;
+  color: #333;
+  margin-bottom: 30px;
+  font-size: 2.5rem;
+  font-weight: 600;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.quote-container {
+  background: #f8f9fa;
+  border-radius: 15px;
+  padding: 30px;
+  margin-bottom: 30px;
+  border-left: 5px solid #667eea;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+
+.quote-text {
+  font-size: 1.5rem;
+  line-height: 1.6;
+  color: #333;
+  margin-bottom: 20px;
+  font-style: italic;
+  text-align: center;
+}
+
+.author-text {
+  font-size: 1.1rem;
+  color: #667eea;
+  text-align: center;
+  font-weight: 500;
+}
+
+.controls {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 20px;
+  flex-wrap: wrap;
+}
+
+.btn {
+  padding: 12px 24px;
+  font-size: 1rem;
+  font-weight: 600;
+  border: none;
+  border-radius: 10px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.btn-primary {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+}
+
+.btn-primary:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
+}
+
+.btn-primary:active {
+  transform: translateY(0);
+}
+
+.auto-play-control {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+}
+
+.auto-play-label {
+  font-size: 1rem;
+  color: #555;
+  font-weight: 500;
+}
+
+.status {
+  font-weight: bold;
+  padding: 2px 8px;
+  border-radius: 5px;
+  margin-left: 5px;
+}
+
+.status-on {
+  background-color: #28a745;
+  color: white;
+}
+
+.status-off {
+  background-color: #dc3545;
+  color: white;
+}
+
+/* Toggle Switch */
+.toggle-switch {
+  position: relative;
+  display: inline-block;
+  width: 60px;
+  height: 34px;
+}
+
+.toggle-switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.toggle-slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  transition: 0.4s;
+  border-radius: 34px;
+}
+
+.toggle-slider:before {
+  position: absolute;
+  content: "";
+  height: 26px;
+  width: 26px;
+  left: 4px;
+  bottom: 4px;
+  background-color: white;
+  transition: 0.4s;
+  border-radius: 50%;
+}
+
+input:checked + .toggle-slider {
+  background-color: #667eea;
+}
+
+input:checked + .toggle-slider:before {
+  transform: translateX(26px);
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+  .container {
+    padding: 20px;
+  }
+
+  h1 {
+    font-size: 1.8rem;
+  }
+
+  .quote-text {
+    font-size: 1.2rem;
+  }
+
+  .controls {
+    flex-direction: column;
+  }
+
+  .btn {
+    width: 100%;
+  }
+
+  .auto-play-control {
+    width: 100%;
+    justify-content: space-between;
+  }
+}