CodeYourFuture · Fithi-Teklom · Dec 6, 2025 · Dec 11, 2025 · Dec 11, 2025 · Dec 11, 2025
diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html
@@ -3,13 +3,20 @@
   <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>
+    <h1>Hello there</h1>
     <p id="quote"></p>
     <p id="author"></p>
+    <label class="switch">
+      <input type="checkbox" id="auto-play-toggle" />
+      <span class="slider"></span>
+    </label>
+    <p id="auto-status">auto-play:OFF</p>
+
     <button type="button" id="new-quote">New quote</button>
   </body>
 </html>
diff --git a/Sprint-3/quote-generator/jest.config.js b/Sprint-3/quote-generator/jest.config.js
@@ -0,0 +1,4 @@
+module.exports = {
+  testEnvironment: "jsdom",
+  testMatch: ["quote.test.js"],
+};
diff --git a/Sprint-3/quote-generator/package.json b/Sprint-3/quote-generator/package.json
@@ -3,9 +3,13 @@
   "version": "1.0.0",
   "license": "CC-BY-SA-4.0",
   "description": "You must update this package",
-  "scripts": {
-    "test": "jest --config=../jest.config.js quote-generator"
+  "devDependencies": {
+    "@testing-library/user-event": "13.5.0"
   },
+  "scripts": {
+  "test": "jest"
+},
+
   "repository": {
     "type": "git",
     "url": "git+https://github.com/CodeYourFuture/CYF-Coursework-Template.git"

diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js
@@ -17,9 +17,59 @@
 
 // You don't need to change this function
 function pickFromArray(choices) {
-  return choices[Math.floor(Math.random() * choices.length)];
+  // You already have pickFromArray() and quotes[] above this comment
+  return choices[Math.floor(Math.random() * choices.length)]
+};
+window.addEventListener("load", () => {
+const quoteEl = document.getElementById("quote");
+const authorEl = document.getElementById("author");
+const button = document.getElementById("new-quote");
+
+// Generate a random quote using Math.random (required for tests)
+function getRandomQuote() {
+  const index = Math.floor(Math.random() * quotes.length);
+  return quotes[index];
+}
+
+// Put the quote + author into the DOM
+function displayRandomQuote() {
+  const q = getRandomQuote();
+  quoteEl.textContent = q.quote;
+  authorEl.textContent = q.author;
 }
 
+// Show initial quote immediately
+displayRandomQuote();
+
+// Button shows a new quote
+button.addEventListener("click", displayRandomQuote);
+let autoPlayInterval = null;
+
+const toggle = document.getElementById("auto-play-toggle");
+const statusText = document.getElementById("auto-status");
+
+toggle.addEventListener("change", () => {
+  if (toggle.checked) {
+    statusText.textContent = "auto-play:ON";
+
+    // Change every 5 seconds (easy for testing)  
+    autoPlayInterval = setInterval(() => {
+    displayRandomQuote()
+    }, 5000);
+
+    // pickQuoteAndAuthor();
+
+    displayRandomQuote() // Change immediately
+  } else {
+    statusText.textContent = "auto-play:OFF";
+    clearInterval(autoPlayInterval);
+  }
+});
+
+
+  // return choices[Math.floor(Math.random() * choices.length)];
+});
+
 // A list of quotes you can use in your app.
 // DO NOT modify this array, otherwise the tests may break!
 const quotes = [

diff --git a/Sprint-3/quote-generator/quotes.test.js b/Sprint-3/quote-generator/quotes.test.js
@@ -5,6 +5,8 @@ There are some Tests in this file that will help you work out if your code is wo
 const path = require("path");
 const { JSDOM } = require("jsdom");
 
+require("@testing-library/jest-dom");
+
 let page = null;
 
 beforeEach(async () => {
@@ -34,7 +36,7 @@ beforeEach(async () => {
   });
 });
 
-afterEach(() => {
+afterEach(() => { 
   page = null;
   jest.restoreAllMocks();
 });

diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css
@@ -1 +1,109 @@
 /** Write your CSS in here **/
+
+body {
+  font-family: Arial, sans-serif;
+  background: linear-gradient(135deg, #f089cc, #d6eaff);
+  margin: 0;
+  padding: 40px;
+  text-align: center;
+}
+
+/* Page title */
+h1 {
+  color: black ;
+  font-size: 2rem;
+  margin-bottom: 20px;
+}
+
+/* Quote styling */
+#quote {
+  font-size: 1.5rem;
+  font-weight: bold;
+  color: black ;
+  margin: 20px auto 10px;
+  max-width: 600px;
+  line-height: 1.5;
+}
+
+/* Author name */
+#author {
+  font-size: 1.2rem;
+  color: #555;
+  margin-bottom: 30px;
+}
+
+/* Button styling */
+#new-quote {
+  padding: 12px 30px;
+  font-size: 1rem;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: 0.25s ease;
+}
+
+/* Hover effect */
+#new-quote:hover {
+  background-color: #005ec2;
+  transform: scale(1.05);
+}
+
+
+/* Toggle switch container */
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 50px;
+  height: 26px;
+  margin-top: 20px;
+}
+
+/* Hide default checkbox */
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+/* Slider background */
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  border-radius: 26px;
+  transition: 0.4s;
+}
+
+/* Slider circle */
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 20px;
+  width: 20px;
+  left: 3px;
+  bottom: 3px;
+  background-color: white;
+  border-radius: 50%;
+  transition: 0.4s;
+}
+
+/* ON state */
+input:checked + .slider {
+  background-color: #4a90e2;
+}
+
+input:checked + .slider:before {
+  transform: translateX(24px);
+}
+
+#auto-status {
+  margin-top: 10px;
+  color: #333;
+  font-weight: bold;
+}
diff --git a/package.json b/package.json
@@ -0,0 +1,8 @@
+{
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/user-event": "^13.5.0",
+    "jest": "^30.2.0",
+    "jsdom": "^19.0.0"
+  }
+}