diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html
index 30b434bcf..0d6e70a49 100644
--- a/Sprint-3/quote-generator/index.html
+++ b/Sprint-3/quote-generator/index.html
@@ -1,9 +1,10 @@
-
+
- Title here
+
+ Quote generator app
diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js
index 4a4d04b72..cdc20d194 100644
--- a/Sprint-3/quote-generator/quotes.js
+++ b/Sprint-3/quote-generator/quotes.js
@@ -491,3 +491,24 @@ const quotes = [
];
// call pickFromArray with the quotes array to check you get a random quote
+
+// getting the input and button elements from the page
+const quoteElement = document.getElementById("quote");
+const authorElement = document.getElementById("author");
+const buttonElement = document.getElementById("new-quote");
+
+function displayRandomQuote() {
+ // get a random quote from the quotes array
+ const randomQuote = pickFromArray(quotes);
+
+ // update the quote and author elements
+ quoteElement.textContent = randomQuote.quote;
+ authorElement.textContent = randomQuote.author;
+}
+
+displayRandomQuote(); // display a random quote when the page loads
+
+// display a new random quote when button is clicked
+buttonElement.addEventListener("click", () => {
+ displayRandomQuote();
+});
diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css
index 63cedf2d2..6150d29a1 100644
--- a/Sprint-3/quote-generator/style.css
+++ b/Sprint-3/quote-generator/style.css
@@ -1 +1,42 @@
/** Write your CSS in here **/
+
+body {
+ font-family: Arial, sans-serif;
+ background-color: #d8b4db;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ height: 100vh;
+ margin: 0;
+}
+
+h1 {
+ color: #934a87;
+}
+#quote {
+ font-size: 1.5em;
+ background-color: #d12fe0;
+ color: #f6f9f5;
+ margin: 20px;
+ text-align: center;
+ max-width: 600px;
+ padding: 20px;
+ border-radius: 10px;
+}
+
+#author {
+ font-size: 1.2em;
+ color: #934a87;
+ margin-bottom: 20px;
+}
+
+button {
+ padding: 10px 20px;
+ font-size: 1em;
+ background-color: #d12fe0;
+ color: #f6f9f5;
+ border: none;
+ cursor: pointer;
+ border-radius: 50px;
+}