diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 30b434bcf..9f4679d94 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -3,13 +3,21 @@ - Title here + Quote Generator + + -

hello there

-

-

- +
+

Quote Generator

+ +
+

Loading quote...

+

+
+ + +
- + \ No newline at end of file diff --git a/Sprint-3/quote-generator/script.js b/Sprint-3/quote-generator/script.js new file mode 100644 index 000000000..890e4673d --- /dev/null +++ b/Sprint-3/quote-generator/script.js @@ -0,0 +1,42 @@ +// Get references to the HTML elements that will display +// the quote, the author, and the button +const quoteElement = document.getElementById("quote"); +const authorElement = document.getElementById("author"); +const newQuoteButton = document.getElementById("new-quote"); + +// Store the currently displayed quote so that +// we do not show the exact same quote twice in a row +let currentQuote = null; + +/** + * Returns a random quote object from the quotes array. + * If a quote is already being displayed, this function + * keeps picking again until it gets a different one. + */ +function getNewRandomQuote() { + let randomQuote = pickFromArray(quotes); + + while (quotes.length > 1 && randomQuote === currentQuote) { + randomQuote = pickFromArray(quotes); + } + + return randomQuote; +} + +/** + * Displays a random quote and its author on the page. + */ +function displayRandomQuote() { + const selectedQuote = getNewRandomQuote(); + + quoteElement.textContent = `"${selectedQuote.quote}"`; + authorElement.textContent = `— ${selectedQuote.author}`; + + currentQuote = selectedQuote; +} + +// Show a random quote as soon as the page loads +displayRandomQuote(); + +// Show a different random quote whenever the button is clicked +newQuoteButton.addEventListener("click", displayRandomQuote); diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index 63cedf2d2..3ed82880d 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -1 +1,72 @@ -/** Write your CSS in here **/ +/* Apply box-sizing to all elements so padding and borders + do not affect the final width and height unexpectedly */ +* { + box-sizing: border-box; +} + +/* Basic page styling */ +body { + margin: 0; + font-family: Arial, Helvetica, sans-serif; + background-color: #f4f4f4; + color: #222222; +} + +/* Main layout container */ +.container { + max-width: 750px; + margin: 60px auto; + padding: 20px; + text-align: center; +} + +/* Page heading */ +h1 { + margin-bottom: 30px; + font-size: 2rem; +} + +/* Card that holds the quote and author */ +.quote-card { + background-color: #ffffff; + border-radius: 12px; + padding: 30px 20px; + margin-bottom: 25px; + box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12); +} + +/* Quote text styling */ +.quote-text { + font-size: 1.5rem; + line-height: 1.6; + margin-bottom: 20px; +} + +/* Author text styling */ +.quote-author { + font-size: 1.1rem; + font-weight: bold; + color: #555555; +} + +/* Button styling */ +#new-quote { + padding: 12px 24px; + font-size: 1rem; + border: none; + border-radius: 8px; + background-color: #0b5ed7; + color: #ffffff; + cursor: pointer; +} + +/* Button hover state */ +#new-quote:hover { + background-color: #094db1; +} + +/* Button keyboard focus state */ +#new-quote:focus { + outline: 3px solid #99c2ff; + outline-offset: 3px; +}/** Write your CSS in here **/