added css,js and html code to complete project,quotes.test.js

Author: Enice-Codes

Sprint-3/quote-generator/index.html

@@ -3,13 +3,31 @@
   <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="styles.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>
+    <main class="card">
+      <h1 class="visually-hidden">Quote generator app</h1>
+
+      <div class="quote-container">
+        <p id="quote"></p>
+      </div>
+
+      <div class="author-container">
+        <p id="author"></p>
+      </div>
+
+      <div class="controls">
+        <button type="button" id="new-quote">New quote</button>
+      </div>
+
+      <label class="autoplay-toggle">
+        <input type="checkbox" id="autoplay-checkbox" />
+        Auto-play
+      </label>
+      <p id="autoplay-status"></p>
+    </main>
   </body>
-</html>
+</html>

Sprint-3/quote-generator/quotes.js

@@ -491,3 +491,79 @@ const quotes = [
 ];
 
 // call pickFromArray with the quotes array to check you get a random quote
+function pickFromArray(array) {
+  const randomIndex = Math.floor(Math.random() * array.length);
+  return array[randomIndex];
+}
+
+// Grab the elements we need to update once, so we're not
+// searching the page every time.
+const quoteEl = document.getElementById("quote");
+const authorEl = document.getElementById("author");
+const newQuoteButton = document.getElementById("new-quote");
+const autoplayCheckbox = document.getElementById("autoplay-checkbox");
+const autoplayStatusEl = document.getElementById("autoplay-status");
+
+// This will hold the id returned by setInterval so we can
+// stop it again later when auto-play is switched off.
+let autoplayIntervalId = null;
+
+// How often to change the quote automatically, in milliseconds.
+// Set to 60 seconds as per the brief - turn this down to
+// something like 5000 (5 seconds) while you're testing.
+const AUTOPLAY_INTERVAL_MS = 60000;
+
+// Picks a new random quote and displays it on the screen.
+function showRandomQuote() {
+  const randomQuote = pickFromArray(quotes);
+  // If you prefer the Math.random() approach directly, you could
+  // instead write:
+  // const randomQuote = quotes[Math.floor(Math.random() * quotes.length)];
+
+  quoteEl.textContent = `"${randomQuote.quote}"`;
+  authorEl.textContent = `— ${randomQuote.author}`;
+}
+
+// Updates the on-screen text that says whether auto-play is on or off.
+function updateAutoplayStatus(isOn) {
+  autoplayStatusEl.textContent = isOn
+    ? "auto-play: ON — a new quote will appear every 60 seconds."
+    : "auto-play: OFF — quotes will only change when you click the button.";
+}
+
+// Turns auto-play on: shows a new quote immediately, then keeps
+// showing a new one every AUTOPLAY_INTERVAL_MS.
+function startAutoplay() {
+  updateAutoplayStatus(true);
+  autoplayIntervalId = setInterval(showRandomQuote, AUTOPLAY_INTERVAL_MS);
+}
+
+// Turns auto-play off: stops the repeating timer so the quote
+// stops changing by itself.
+function stopAutoplay() {
+  updateAutoplayStatus(false);
+  clearInterval(autoplayIntervalId);
+  autoplayIntervalId = null;
+}
+
+// Wire everything up once the page has loaded.
+document.addEventListener("DOMContentLoaded", () => {
+  // Show a random quote as soon as the page loads.
+  showRandomQuote();
+
+  // Show a new quote whenever the button is clicked.
+  newQuoteButton.addEventListener("click", showRandomQuote);
+
+  // Start in the "off" state so the status text is correct
+  // even before the user touches the checkbox.
+  updateAutoplayStatus(false);
+
+  // Toggle auto-play on/off when the checkbox is switched.
+  autoplayCheckbox.addEventListener("change", () => {
+    if (autoplayCheckbox.checked) {
+      startAutoplay();
+    } else {
+      stopAutoplay();
+    }
+  });
+});

Sprint-3/quote-generator/style.css

@@ -1 +1,117 @@
 /** Write your CSS in here **/
+:root {
+  --accent: #ff9f0a;
+  --accent-dark: #e08600;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: Georgia, "Times New Roman", serif;
+  background: var(--accent);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  margin: 0;
+  padding: 2rem;
+}
+
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.card {
+  background: #fff;
+  padding: 3rem 3.5rem;
+  max-width: 700px;
+  width: 100%;
+}
+
+.quote-container {
+  position: relative;
+  padding-left: 3rem;
+  margin-bottom: 1.5rem;
+}
+
+.quote-container::before {
+  content: "\201C";
+  position: absolute;
+  left: 0;
+  top: -0.6rem;
+  font-size: 4rem;
+  line-height: 1;
+  font-weight: bold;
+  color: var(--accent);
+}
+
+#quote {
+  font-size: 1.6rem;
+  color: var(--accent);
+  margin: 0;
+  line-height: 1.4;
+}
+
+.author-container {
+  text-align: right;
+  margin-bottom: 2rem;
+}
+
+#author {
+  font-size: 1.1rem;
+  color: var(--accent);
+  margin: 0;
+}
+
+#author::before {
+  content: "- ";
+}
+
+.controls {
+  display: flex;
+  justify-content: flex-end;
+}
+
+button {
+  font-family: system-ui, sans-serif;
+  padding: 0.85rem 1.75rem;
+  border: none;
+  background: var(--accent);
+  color: #fff;
+  font-size: 1rem;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+button:hover {
+  background: var(--accent-dark);
+}
+
+.autoplay-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.4rem;
+  font-family: system-ui, sans-serif;
+  font-size: 0.9rem;
+  color: #888;
+  margin-top: 1rem;
+}
+
+#autoplay-status {
+  font-family: system-ui, sans-serif;
+  font-size: 0.8rem;
+  color: #999;
+  text-align: right;
+  margin: 0.25rem 0 0;
+}