From 7a3428097b3ea4c01e64a4ff0c3c465e3770b7b2 Mon Sep 17 00:00:00 2001 From: enjoy15 Date: Sat, 22 Nov 2025 08:30:31 +0000 Subject: [PATCH 1/2] amend quotes.js to be able to generate quote --- Sprint-3/quote-generator/index.html | 2 +- Sprint-3/quote-generator/quotes.js | 13 +++++++++++++ 2 files changed, 14 insertions(+), 1 deletion(-) diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 30b434bcf..b1090d6dc 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..689447827 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -491,3 +491,16 @@ const quotes = [ ]; // call pickFromArray with the quotes array to check you get a random quote +// Grab elements +const quoteEl = document.getElementById("quote"); +const authorEl = document.getElementById("author"); +const button = document.getElementById("new-quote"); + +function showQuote() { + const q = pickFromArray(quotes); + quoteEl.textContent = q.quote; + authorEl.textContent = q.author ? `— ${q.author}` : ""; +} + +button.addEventListener("click", showQuote); +showQuote(); From 44bfa2e6d0a78c63844dee41b5a41ad69763c1e5 Mon Sep 17 00:00:00 2001 From: enjoy15 Date: Sat, 22 Nov 2025 08:41:31 +0000 Subject: [PATCH 2/2] update index.html and style.css --- Sprint-3/quote-generator/index.html | 13 ++-- Sprint-3/quote-generator/style.css | 99 +++++++++++++++++++++++++++++ 2 files changed, 108 insertions(+), 4 deletions(-) diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index b1090d6dc..840d2576c 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -4,12 +4,17 @@ Quote Generator app + -

hello there

-

-

- +
+

Quote Generator

+
+

+

+ +
+
diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index 63cedf2d2..523e83f24 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -1 +1,100 @@ /** Write your CSS in here **/ +:root { + --bg: linear-gradient(135deg,#2e3350,#1c1f2b); + --card-bg: #ffffff; + --accent: #5a48ea; + --accent-hover: #4738ba; + --text-dark: #222; + --text-muted: #555; + --radius: 14px; + --shadow: 0 8px 24px -6px rgba(0,0,0,0.25); + font-family: system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; +} + +* { box-sizing: border-box; } + +body { + margin: 0; + min-height: 100vh; + display: grid; + place-items: center; + background: var(--bg); + color: #fff; +} + +.app { + width: 100%; + max-width: 640px; + padding: 2rem 1.5rem 3rem; + text-align: center; +} + +.title { + margin: 0 0 1.5rem; + font-size: 2.25rem; + font-weight: 600; + letter-spacing: .5px; +} + +.card { + background: var(--card-bg); + color: var(--text-dark); + padding: 2rem 2.2rem; + border-radius: var(--radius); + box-shadow: var(--shadow); + position: relative; + display: flex; + flex-direction: column; + gap: 1.4rem; +} + +.quote { + font-size: 1.35rem; + line-height: 1.4; + font-weight: 500; + margin: 0; + position: relative; +} + +.quote::before { + content: "“"; + font-size: 3.5rem; + line-height: 0.5; + position: absolute; + top: -0.4rem; + left: -0.9rem; + color: var(--accent); + opacity: 0.25; + pointer-events: none; +} + +.author { + margin: 0; + font-size: 1rem; + font-style: italic; + color: var(--text-muted); +} + +.btn { + align-self: center; + background: var(--accent); + color: #fff; + border: none; + padding: .85rem 1.6rem; + font-size: 1rem; + font-weight: 600; + letter-spacing: .5px; + border-radius: 999px; + cursor: pointer; + transition: background .18s, transform .18s, box-shadow .18s; + box-shadow: 0 4px 14px -4px rgba(90,72,234,.6); +} + +.btn:hover { background: var(--accent-hover); } +.btn:active { transform: translateY(2px); box-shadow: 0 2px 10px -4px rgba(90,72,234,.55); } + +@media (max-width: 520px) { + .card { padding: 1.6rem 1.4rem; } + .quote { font-size: 1.15rem; } + .title { font-size: 1.9rem; } +} \ No newline at end of file