From 2a7cc71fe2ef757b7070b6cbfafba3022bae7cf6 Mon Sep 17 00:00:00 2001 From: miriamjorna Date: Thu, 16 Apr 2026 19:24:34 +0100 Subject: [PATCH 1/2] Quote generator v.1 --- Sprint-3/quote-generator/index.html | 19 +++++++++++++------ Sprint-3/quote-generator/quotes.js | 19 ++++++++++++++++++- Sprint-3/quote-generator/style.css | 27 ++++++++++++++++++++++++++- 3 files changed, 57 insertions(+), 8 deletions(-) diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 30b434bcf..fb0ae9b17 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -1,15 +1,22 @@ - + - Title here + Quote generator app + -

hello there

-

-

- +
+

Get inspired by the Quote Generator

+ +
+

+

+
+ + +
diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 4a4d04b72..a5f236194 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -1,3 +1,19 @@ +const quoteP = document.querySelector("#quote"); +const authorP = document.querySelector("#author"); +const newQuoteButton = document.querySelector("#new-quote"); + +function displayQuote() { + const randomQuote = pickFromArray(quotes); + quoteP.textContent = randomQuote.quote; + authorP.textContent = `- ${randomQuote.author}`; +} + +window.onload = function() { + displayQuote(); +}; + +newQuoteButton.addEventListener("click", displayQuote); + // DO NOT EDIT BELOW HERE // pickFromArray is a function which will return one item, at @@ -23,7 +39,7 @@ function pickFromArray(choices) { // A list of quotes you can use in your app. // DO NOT modify this array, otherwise the tests may break! const quotes = [ - { + { quote: "Life isn't about getting and having, it's about giving and being.", author: "Kevin Kruse", }, @@ -491,3 +507,4 @@ const quotes = [ ]; // call pickFromArray with the quotes array to check you get a random quote +pickFromArray(quotes); diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index 63cedf2d2..7979a6c70 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -1 +1,26 @@ -/** Write your CSS in here **/ +body { + background-color: rgb(13, 13, 50); + color: rgb(250, 200, 135); + font-family: 'Trebuchet MS', 'Verdana', Arial, sans-serif; + text-align: center; + justify-content: center; + display: flex; +} + +.quotebox { + position: relative; + width: 70%; + background: rgb(250, 200, 135); + color: rgb(13, 13, 50); + display: flex; + flex-direction: column; + align-items: center; + padding: 20px; +} + +.container { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} From daa07cee6ff13156b2c1f4ead2a65b89f4045093 Mon Sep 17 00:00:00 2001 From: miriamjorna Date: Fri, 17 Apr 2026 22:02:45 +0100 Subject: [PATCH 2/2] small corrections after review --- Sprint-3/quote-generator/quotes.js | 10 ++++----- Sprint-3/quote-generator/style.css | 36 +++++++++++++++--------------- 2 files changed, 22 insertions(+), 24 deletions(-) diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index a5f236194..27617178b 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -5,15 +5,14 @@ const newQuoteButton = document.querySelector("#new-quote"); function displayQuote() { const randomQuote = pickFromArray(quotes); quoteP.textContent = randomQuote.quote; - authorP.textContent = `- ${randomQuote.author}`; + authorP.textContent = randomQuote.author; } -window.onload = function() { +window.onload = function () { + newQuoteButton.addEventListener("click", displayQuote); displayQuote(); }; -newQuoteButton.addEventListener("click", displayQuote); - // DO NOT EDIT BELOW HERE // pickFromArray is a function which will return one item, at @@ -39,7 +38,7 @@ function pickFromArray(choices) { // A list of quotes you can use in your app. // DO NOT modify this array, otherwise the tests may break! const quotes = [ - { + { quote: "Life isn't about getting and having, it's about giving and being.", author: "Kevin Kruse", }, @@ -507,4 +506,3 @@ const quotes = [ ]; // call pickFromArray with the quotes array to check you get a random quote -pickFromArray(quotes); diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index 7979a6c70..7eb938baa 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -1,26 +1,26 @@ body { - background-color: rgb(13, 13, 50); - color: rgb(250, 200, 135); - font-family: 'Trebuchet MS', 'Verdana', Arial, sans-serif; - text-align: center; - justify-content: center; - display: flex; + background-color: rgb(13, 13, 50); + color: rgb(250, 200, 135); + font-family: "Trebuchet MS", "Verdana", Arial, sans-serif; + text-align: center; + justify-content: center; + display: flex; } .quotebox { - position: relative; - width: 70%; - background: rgb(250, 200, 135); - color: rgb(13, 13, 50); - display: flex; - flex-direction: column; - align-items: center; - padding: 20px; + position: relative; + width: 70%; + background: rgb(250, 200, 135); + color: rgb(13, 13, 50); + display: flex; + flex-direction: column; + align-items: center; + padding: 20px; } .container { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; }