From cbb20e1469dbab699ac9d7e13dfb17731981171b Mon Sep 17 00:00:00 2001 From: Sara Tahir Date: Wed, 16 Jul 2025 11:46:41 +0100 Subject: [PATCH 1/3] Updated HTML title and worked out the Javascript for the quote generator --- Sprint-3/quote-generator/index.html | 2 +- Sprint-3/quote-generator/quotes.js | 31 ++++++++++++++++++++++++++--- 2 files changed, 29 insertions(+), 4 deletions(-) diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 30b434bcf..f9b91b0a2 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -3,7 +3,7 @@ - Title here + "Quote generator app" diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 4a4d04b72..407f70123 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -16,9 +16,15 @@ // pickFromArray(['a','b','c','d']) // maybe returns 'c' // You don't need to change this function -function pickFromArray(choices) { - 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! @@ -489,5 +495,24 @@ const quotes = [ author: "Zig Ziglar", }, ]; +function pickFromArray(choices) { + return choices[Math.floor(Math.random() * choices.length)]; +} +function displayRandomquote(){ +const randomQuote = pickFromArray(quotes); +document.getElementById("quote").textContent = randomQuote.quote; +document.getElementById("author").textContent = randomQuote.author; +} + +displayRandomquote(); + + +document.getElementById("new-quote").addEventListener("click", () => { + displayRandomquote(); +}); // call pickFromArray with the quotes array to check you get a random quote +/*My First step to generate a quote +const randomQuote = pickFromArray(quotes); +document.getElementById("quote").textContent = randomQuote.quote; +document.getElementById("author").textContent = randomQuote.author;*/ From 7bd5e03559c91fc7363e43df8353772995f52ded Mon Sep 17 00:00:00 2001 From: Sara Tahir Date: Wed, 16 Jul 2025 12:02:27 +0100 Subject: [PATCH 2/3] updating Html to incorporate a style sheet and added a
tag for better styling --- Sprint-3/quote-generator/index.html | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index f9b91b0a2..28566e83b 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -4,12 +4,15 @@ "Quote generator app" + -

hello there

-

-

+

Hello there

+
+

Quote goes here...

+

Author goes here...

+
From 6b2bfe9175b62c6113837eb32bb4fe3f7c95fbf2 Mon Sep 17 00:00:00 2001 From: Sara Tahir Date: Wed, 16 Jul 2025 12:06:39 +0100 Subject: [PATCH 3/3] Updated the style sheet. --- Sprint-3/quote-generator/style.css | 46 ++++++++++++++++++++++++++++++ 1 file changed, 46 insertions(+) diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index 63cedf2d2..1a29e2ece 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -1 +1,47 @@ /** Write your CSS in here **/ + + body { + font-family: sans-serif; + text-align: center; + padding: 40px; + background-color: #f0f0f0; +} + +h1 { + margin-bottom: 30px; + color: #34063c; +} + +.quote-box { + background-color: rgb(139, 191, 193); + border-radius: 10px; + padding: 30px; + margin: 0 auto 20px; + max-width: 500px; + box-shadow: 0 4px 8px rgba(0,0,0,0.1); +} + +#quote { + font-size: 1.5rem; + font-style: italic; + margin-bottom: 20px; +} + +#author { + font-weight: bold; + color: #260559; +} + +#new-quote { + padding: 10px 20px; + font-size: 1rem; + background-color: #00cc66; + color: white; + border: none; + border-radius: 5px; + cursor: pointer; +} + +#new-quote:hover { + background-color: #005fa3; +} \ No newline at end of file