From 20c667d694d3c656b9017d789cfb6ac013d94e0b Mon Sep 17 00:00:00 2001
From: Jak R-S <176810031+jakr-s@users.noreply.github.com>
Date: Mon, 8 Dec 2025 14:42:01 +0000
Subject: [PATCH 1/2] feat: implement displayQuote function to show random
quotes
---
Sprint-3/quote-generator/index.html | 7 ++++---
Sprint-3/quote-generator/quotes.js | 13 +++++++++++++
2 files changed, 17 insertions(+), 3 deletions(-)
diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html
index 30b434bcf..341285214 100644
--- a/Sprint-3/quote-generator/index.html
+++ b/Sprint-3/quote-generator/index.html
@@ -1,13 +1,14 @@
-
+
- Title here
+ Quote generator app
+
+
- hello there
diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js
index 4a4d04b72..d3875bb5e 100644
--- a/Sprint-3/quote-generator/quotes.js
+++ b/Sprint-3/quote-generator/quotes.js
@@ -491,3 +491,16 @@ const quotes = [
];
// call pickFromArray with the quotes array to check you get a random quote
+
+function displayQuote() {
+ const randomQuote = pickFromArray(quotes);
+ const quoteElement = document.getElementById("quote");
+ const authorElement = document.getElementById("author");
+
+ quoteElement.textContent = randomQuote.quote;
+ authorElement.textContent = randomQuote.author;
+}
+
+displayQuote();
+
+document.getElementById("new-quote").addEventListener("click", displayQuote);
From 023221e751058f6ad9b8f10a3bfcc07aacab5d4a Mon Sep 17 00:00:00 2001
From: Jak R-S <176810031+jakr-s@users.noreply.github.com>
Date: Mon, 8 Dec 2025 15:19:13 +0000
Subject: [PATCH 2/2] style: add initial CSS styles
---
Sprint-3/quote-generator/style.css | 67 +++++++++++++++++++++++++++++-
1 file changed, 66 insertions(+), 1 deletion(-)
diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css
index 63cedf2d2..33e24ff56 100644
--- a/Sprint-3/quote-generator/style.css
+++ b/Sprint-3/quote-generator/style.css
@@ -1 +1,66 @@
-/** Write your CSS in here **/
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ background-color: #f5a742;
+ font-family: Georgia, serif;
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ padding: 40px;
+}
+
+#quote {
+ background-color: white;
+ padding: 80px 60px 40px;
+ margin: 0;
+ font-size: 2.5rem;
+ color: #f5a742;
+ line-height: 1.5;
+ position: relative;
+ max-width: 1200px;
+ width: 100%;
+}
+
+#quote::before {
+ content: '"';
+ font-size: 5rem;
+ left: 30px;
+ top: 10px;
+ font-weight: bold;
+ line-height: 1;
+}
+
+#author {
+ background-color: white;
+ padding: 20px 60px 80px;
+ margin: 0;
+ text-align: right;
+ font-size: 1.5rem;
+ color: #f5a742;
+ max-width: 1200px;
+ width: 100%;
+ position: relative;
+}
+
+#new-quote {
+ position: absolute;
+ bottom: 30px;
+ right: 60px;
+ background-color: #f5a742;
+ color: white;
+ border: none;
+ padding: 15px 35px;
+ font-size: 1.1rem;
+ cursor: pointer;
+ font-family: sans-serif;
+}
+
+#new-quote:hover {
+ background-color: #e69630;
+}