diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 30b434bcf..eb0bcac09 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -1,15 +1,18 @@ - - - - Title here + + + + Quote generator app + - - -

hello there

-

-

- - - + + +
+

Quote generator

+

+

+ +
+ + \ No newline at end of file diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 4a4d04b72..81051d69a 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -491,3 +491,29 @@ const quotes = [ ]; // call pickFromArray with the quotes array to check you get a random quote + + +function displayRandomQuote() { + const random = pickFromArray(quotes); + const quoteEl = document.getElementById("quote"); + const authorEl = document.getElementById("author"); + + if (quoteEl) quoteEl.textContent = random.quote; + if (authorEl) authorEl.textContent = random.author; +} + +function displayRandomQuote() { + const random = pickFromArray(quotes); + const quoteEl = document.getElementById("quote"); + const authorEl = document.getElementById("author"); + + if (quoteEl) quoteEl.textContent = random.quote; + if (authorEl) authorEl.textContent = random.author; +} + +displayRandomQuote(); + +const newQuoteBtn = document.getElementById("new-quote"); +if (newQuoteBtn) { + newQuoteBtn.addEventListener("click", displayRandomQuote); +} \ No newline at end of file diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css deleted file mode 100644 index 63cedf2d2..000000000 --- a/Sprint-3/quote-generator/style.css +++ /dev/null @@ -1 +0,0 @@ -/** Write your CSS in here **/ diff --git a/Sprint-3/quote-generator/styles.css b/Sprint-3/quote-generator/styles.css new file mode 100644 index 000000000..6b3e69e4e --- /dev/null +++ b/Sprint-3/quote-generator/styles.css @@ -0,0 +1,70 @@ +body { + font-family: Arial, sans-serif; + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + background-color: orange; +} + +.container { + background-color: white; + font-size: large; + padding: 40px; + border-radius: 8px; + box-shadow: 0 2px 10px rgba(0,0,0,0.1); + max-width: 500px; + width: 90%; + position: relative; + min-height: 300px; + margin: 0; +} + +h1 { + color: #333; + margin-bottom: 30px; + font-size: 1.8em; + text-align: center; +} + +#quote { + font-size: 1.3em; + line-height: 1.6; + margin-bottom: 20px; + color: orange; + font-weight: normal; +} + +#quote::before, #quote::after { + content: '“'; + font-size: 1.5em; + vertical-align: top; +} + +#author { + font-size: 1.1em; + color: orange; + position: absolute; + bottom: 70px; + right: 40px; + margin: 0; + text-align: right; +} + +#author::before { + content: "- "; +} + +#new-quote { + background-color: orange; + color: white; + border: none; + padding: 8px 16px; + font-size: 0.9em; + border-radius: 4px; + cursor: pointer; + font-family: Arial, sans-serif; + position: absolute; + bottom: 30px; + right: 40px; +} \ No newline at end of file