From 69681154c9fd9a0391a6ebbdb822f947f4113d97 Mon Sep 17 00:00:00 2001 From: KhotKeys Date: Sun, 9 Aug 2026 15:13:00 +0100 Subject: [PATCH 1/2] Sprint-3: implement quote-generator --- Sprint-3/quote-generator/index.html | 5 +++-- Sprint-3/quote-generator/quotes.js | 11 +++++++++++ Sprint-3/quote-generator/style.css | 14 +++++++++++++- 3 files changed, 27 insertions(+), 3 deletions(-) diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 30b434bcf..5deadd54c 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -3,13 +3,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..708be4afe 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -491,3 +491,14 @@ const quotes = [ ]; // call pickFromArray with the quotes array to check you get a random quote + +function displayQuote() { + const picked = pickFromArray(quotes); + document.getElementById("quote").innerText = picked.quote; + document.getElementById("author").innerText = picked.author; +} + +document.addEventListener("DOMContentLoaded", () => { + displayQuote(); + document.getElementById("new-quote").addEventListener("click", displayQuote); +}); diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index 63cedf2d2..91a58eb5b 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -1 +1,13 @@ -/** Write your CSS in here **/ + +h1, p, button{ + margin: 30px; + text-align: center; +} + +#new-quote { + margin: 20px; + position: absolute; + left: 50%; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); +} From d56062424f537559acf4d958d22afa3d38c079d2 Mon Sep 17 00:00:00 2001 From: KhotKeys Date: Mon, 10 Aug 2026 22:21:00 +0100 Subject: [PATCH 2/2] style: implement modern flexbox centering grid layout --- Sprint-3/quote-generator/style.css | 28 ++++++++++++++++++++++------ 1 file changed, 22 insertions(+), 6 deletions(-) diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index 91a58eb5b..1494b4134 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -1,13 +1,29 @@ +body { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + min-height: 60vh; + margin: 0; + font-family: 'Courier New', Courier, monospace; +} + -h1, p, button{ +h1, p, button, blockquote, cite { margin: 30px; text-align: center; } +cite { + display: block; + font-style: italic; + color: #555; +} + #new-quote { - margin: 20px; - position: absolute; - left: 50%; - -webkit-transform: translate(-50%, -50%); - transform: translate(-50%, -50%); + display: block; + margin: 20px auto; + padding: 10px 20px; + cursor: pointer; + margin-top: 20px; }