From 9fd61b2abf56edaa6b049d94483cf02d620c074c Mon Sep 17 00:00:00 2001 From: Pretty Taruvinga Date: Tue, 14 Apr 2026 23:46:02 +0200 Subject: [PATCH 1/3] Add Sprint-3 quote generator only --- Sprint-3/quote-generator/index.html | 6 +++--- Sprint-3/quote-generator/quotes.js | 13 +++++++++++++ 2 files changed, 16 insertions(+), 3 deletions(-) diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 30b434bcf..7952b4cd7 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -1,13 +1,13 @@ - + - Title here + Quote Generator -

hello there

+

Quote Generator

diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 4a4d04b72..ca742f8a9 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -1,3 +1,15 @@ +const quoteP = document.querySelector("#quote"); +const authorP = document.querySelector("#author"); +const button = document.querySelector("#new-quote"); + +function displayQuote() { + const randomQuote = pickFromArray(quotes); + quoteP.innerText = randomQuote.quote; + authorP.innerText = randomQuote.author; +} + +button.addEventListener("click", displayQuote); + // DO NOT EDIT BELOW HERE // pickFromArray is a function which will return one item, at @@ -491,3 +503,4 @@ const quotes = [ ]; // call pickFromArray with the quotes array to check you get a random quote +displayQuote(); From 05d49e0d04603d6c54df4f43039c23e4122ce45b Mon Sep 17 00:00:00 2001 From: Pretty Taruvinga Date: Tue, 14 Apr 2026 23:46:02 +0200 Subject: [PATCH 2/3] Add Sprint-3 quote generator only --- Sprint-3/quote-generator/index.html | 6 +++--- Sprint-3/quote-generator/quotes.js | 13 +++++++++++++ 2 files changed, 16 insertions(+), 3 deletions(-) diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 30b434bcf..7952b4cd7 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -1,13 +1,13 @@ - + - Title here + Quote Generator -

hello there

+

Quote Generator

diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 4a4d04b72..ca742f8a9 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -1,3 +1,15 @@ +const quoteP = document.querySelector("#quote"); +const authorP = document.querySelector("#author"); +const button = document.querySelector("#new-quote"); + +function displayQuote() { + const randomQuote = pickFromArray(quotes); + quoteP.innerText = randomQuote.quote; + authorP.innerText = randomQuote.author; +} + +button.addEventListener("click", displayQuote); + // DO NOT EDIT BELOW HERE // pickFromArray is a function which will return one item, at @@ -491,3 +503,4 @@ const quotes = [ ]; // call pickFromArray with the quotes array to check you get a random quote +displayQuote(); From eff335be15e506b0719951a0d2419e5f60f52e31 Mon Sep 17 00:00:00 2001 From: Pretty Taruvinga Date: Thu, 16 Apr 2026 12:13:13 +0200 Subject: [PATCH 3/3] added css --- Sprint-3/quote-generator/index.html | 15 +++-- Sprint-3/quote-generator/style.css | 88 ++++++++++++++++++++++++++++- 2 files changed, 98 insertions(+), 5 deletions(-) diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 7952b4cd7..c2a0bf214 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -4,12 +4,19 @@ Quote Generator + -

Quote Generator

-

-

- +
+

Quote Generator

+ +
+

+

+
+ + +
diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index 63cedf2d2..412d16d97 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -1 +1,87 @@ -/** Write your CSS in here **/ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: "Poppins", Arial, sans-serif; +} + +body { + height: 100vh; + background: linear-gradient(135deg, #fbc2eb, #a6c1ee); + display: flex; + justify-content: center; + align-items: center; +} + +.container { + position: relative; + width: 90%; + max-width: 520px; + height: 360px; + + background: rgba(255, 255, 255, 0.75); + backdrop-filter: blur(10px); + + border-radius: 24px; + box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15); + + display: flex; + flex-direction: column; + padding: 25px; +} + +h1 { + text-align: center; + font-size: 1.6rem; + color: #6d5dfc; + font-weight: 600; + letter-spacing: 1px; +} + +.quote-box { + flex: 1; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + text-align: center; +} + +#quote { + font-size: 1.3rem; + color: #333; + line-height: 1.6; + font-style: italic; + padding: 0 10px; +} + +#author { + margin-top: 12px; + font-size: 0.95rem; + color: #7a7a7a; +} + +#new-quote { + position: absolute; + bottom: 18px; + right: 18px; + + background: linear-gradient(135deg, #ff9a9e, #fad0c4); + color: white; + border: none; + + padding: 10px 16px; + border-radius: 50px; + + cursor: pointer; + font-weight: 500; + + box-shadow: 0 6px 15px rgba(255, 154, 158, 0.4); + transition: all 0.3s ease; +} + +#new-quote:hover { + transform: translateY(-2px) scale(1.05); + box-shadow: 0 10px 20px rgba(255, 154, 158, 0.5); +}