diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html
index 30b434bcf..a40b9ddec 100644
--- a/Sprint-3/quote-generator/index.html
+++ b/Sprint-3/quote-generator/index.html
@@ -3,11 +3,12 @@
- Title here
+ Quote Generator
+
- hello there
+ Quote Generator
diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js
index 4a4d04b72..94ae4892e 100644
--- a/Sprint-3/quote-generator/quotes.js
+++ b/Sprint-3/quote-generator/quotes.js
@@ -491,3 +491,33 @@ const quotes = [
];
// call pickFromArray with the quotes array to check you get a random quote
+const newQuote = document.querySelector("#new-quote");
+const quoteTxt = document.querySelector("#quote");
+const quoteAuthor = document.querySelector("#author");
+const autoPlay = document.querySelector("#auto-play");
+const autoPlayTxt = document.querySelector("#auto-play-txt");
+const autoPlayTime = 60000;
+let autoPlayInterval = null;
+newQuote.addEventListener("click", displayQuote);
+
+initaliseSite();
+autoPlay.addEventListener("change", () => {
+ if (autoPlay.checked) {
+ console.log("ON");
+ autoPlayTxt.textContent = `Auto-Play: ON, changing quote every ${autoPlayTime / 1000} seconds.`;
+ autoPlayInterval = setInterval(displayQuote, autoPlayTime);
+ } else {
+ console.log("OFF");
+ autoPlayTxt.textContent = "Auto-Play: OFF";
+ clearInterval(autoPlayInterval);
+ }
+});
+function initaliseSite() {
+ displayQuote();
+}
+
+function displayQuote() {
+ const quote = pickFromArray(quotes);
+ quoteTxt.innerHTML = `${quote.quote}`;
+ quoteAuthor.textContent = `- ${quote.author}`;
+};
\ No newline at end of file
diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css
index 63cedf2d2..10e3ecc66 100644
--- a/Sprint-3/quote-generator/style.css
+++ b/Sprint-3/quote-generator/style.css
@@ -1 +1,23 @@
/** Write your CSS in here **/
+body {
+ font-family: Arial, sans-serif;
+ text-align: center;
+ padding: 20px;
+ background-color: aqua;
+}
+#quote {
+ font-size: 1.5em;
+ margin: 20px 0;
+ border: #160303 3px dotted;
+}
+#author {
+ font-size: 1.2em;
+ color: #555;
+ margin-bottom: 20px;
+}
+button {
+ padding: 10px 20px;
+ font-size: 1em;
+ cursor: pointer;
+ background-color: aquamarine;
+}
\ No newline at end of file