From 07f17fd1d411ec617ab2047582294ca59ade18a0 Mon Sep 17 00:00:00 2001 From: HannaOdud Date: Thu, 13 Nov 2025 22:31:49 +0000 Subject: [PATCH 1/2] Quote generator --- Sprint-3/quote-generator/index.html | 12 +++++++----- Sprint-3/quote-generator/quotes.js | 18 ++++++++++++++++++ Sprint-3/quote-generator/style.css | 23 +++++++++++++++++++++++ 3 files changed, 48 insertions(+), 5 deletions(-) diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 30b434bcf..d653fe39b 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -3,13 +3,15 @@ - 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..442e3beb0 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -1,3 +1,21 @@ +document.addEventListener("DOMContentLoaded", () => { + //elements of page to interact with + const quoteDom = document.getElementById("quote"); + const authorDom = document.getElementById("author"); + const button =document.getElementById("new-quote"); + //display first random quote + const randomQuote =pickFromArray(quotes) + quoteDom.innerText = randomQuote.quote; + authorDom.innerText = randomQuote.author; + // + button.addEventListener("click",() => { + const randomQuote =pickFromArray(quotes) + quoteDom.innerText = randomQuote.quote; + authorDom.innerText = randomQuote.author; + + }) +}); + // DO NOT EDIT BELOW HERE // pickFromArray is a function which will return one item, at diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index 63cedf2d2..8a5a2aec3 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -1 +1,24 @@ /** Write your CSS in here **/ +body{ + background-color: orange; +} +#inner{ + background-color: white; + width: 70%; + margin: 125px auto; + padding: 35px; + text-align: end; +} +p{ + color: orange; + +} +#quote{ + font-size: 32px; +} +button{ + background-color: orange; + color: white; + border: none; + padding: 10px; +} \ No newline at end of file From df35bc23bb6af0190206ca1252e8bc8317f755c1 Mon Sep 17 00:00:00 2001 From: HannaOdud Date: Sun, 16 Nov 2025 19:30:34 +0000 Subject: [PATCH 2/2] New function created. --- Sprint-3/quote-generator/quotes.js | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 442e3beb0..9d4a35ed0 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -3,19 +3,19 @@ document.addEventListener("DOMContentLoaded", () => { const quoteDom = document.getElementById("quote"); const authorDom = document.getElementById("author"); const button =document.getElementById("new-quote"); - //display first random quote - const randomQuote =pickFromArray(quotes) - quoteDom.innerText = randomQuote.quote; - authorDom.innerText = randomQuote.author; - // + displayQuote(quoteDom, authorDom ); + button.addEventListener("click",() => { - const randomQuote =pickFromArray(quotes) - quoteDom.innerText = randomQuote.quote; - authorDom.innerText = randomQuote.author; - + displayQuote(quoteDom, authorDom ) }) }); +function displayQuote(quoteDom, authorDom ){ + const randomQuote =pickFromArray(quotes); + quoteDom.innerText = randomQuote.quote; + authorDom.innerText = randomQuote.author; +} + // DO NOT EDIT BELOW HERE // pickFromArray is a function which will return one item, at