From 664f5bd292d1839d7898156e2fa4d2a09f0af469 Mon Sep 17 00:00:00 2001 From: Ahmad Hmedan Date: Sat, 6 Dec 2025 20:51:03 +0000 Subject: [PATCH 1/2] set up the webpage HTML & CSS --- Sprint-3/quote-generator/index.html | 22 +++++++-- Sprint-3/quote-generator/style.css | 71 ++++++++++++++++++++++++++++- 2 files changed, 87 insertions(+), 6 deletions(-) diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 30b434bcf..ed0000b8e 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -3,13 +3,25 @@ - Title here + Quote generator app + -

hello there

-

-

- +
+
+
+ ❝ +
+ Don't cry because it's over, smile because it happened. +
+
– Dr. Seuss
+
+ + +
+
diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index 63cedf2d2..40c40352f 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -1 +1,70 @@ -/** Write your CSS in here **/ + +* { + box-sizing: border-box; +} + +body { + margin: 0; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", + Roboto, sans-serif; + background-color: #f2a634; + +} + + +.page { + min-height: 100vh; + display: flex; + align-items: center; + justify-content: center; +} + +.quote-card { + background-color: #ffffff; + max-width: 900px; + width: 90%; + padding: 4rem 5rem; + box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); +} + +.quote { + margin: 0 0 3rem 0; + position: relative; + color: #f2a634; +} + +.quote-mark { + font-size: 4rem; + line-height: 1; + display: inline-block; + margin-right: 0.75rem; + vertical-align: top; +} + +blockquote { + display: inline; + font-size: 2rem; + font-weight: 500; + color: #f2a634; +} + + +figcaption { + margin-top: 2rem; + text-align: right; + font-size: 1.1rem; + color: #f2a634; +} + +#new-quote-btn { + display: inline-block; + margin-left: auto; + padding: 0.9rem 2.4rem; + font-size: 1rem; + border: none; + background-color: #f2a634; + color: #ffffff; + cursor: pointer; + text-transform: none; +} + From b18423abca46881731c2dc8d8d4a1960cd042625 Mon Sep 17 00:00:00 2001 From: Ahmad Hmedan Date: Sat, 6 Dec 2025 21:22:42 +0000 Subject: [PATCH 2/2] copmlate the code --- Sprint-3/quote-generator/index.html | 14 +++++--------- Sprint-3/quote-generator/quotes.js | 7 +++++++ 2 files changed, 12 insertions(+), 9 deletions(-) diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index ed0000b8e..377e6ad46 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -5,22 +5,18 @@ Quote generator app - +
❝ -
- Don't cry because it's over, smile because it happened. -
-
– Dr. Seuss
+
+
- - + +
diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 4a4d04b72..067439065 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -491,3 +491,10 @@ const quotes = [ ]; // call pickFromArray with the quotes array to check you get a random quote +function generateRandomQuote(){ + const myObj =pickFromArray(quotes); + document.getElementById("quote-text").textContent=`${myObj.quote}` + document.getElementById("quote-author").textContent=`-${myObj.author}` +} + window.onload=generateRandomQuote; +document.getElementById("new-quote-btn").addEventListener("click",generateRandomQuote); \ No newline at end of file