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

hello there

-

-

- +
+
+

“

+

+

+ +
+
diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 4a4d04b72..822a08a88 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -1,3 +1,25 @@ + +function displayRandomQuote() { + const randomQuote = pickFromArray(quotes); + const quoteElement = document.getElementById("quote"); + const authorElement = document.getElementById("author"); + console.log(`quote: ${randomQuote.quote}`) + console.log(`author: ${randomQuote.author}`) + + if (!quoteElement || !authorElement) return; + + quoteElement.innerText = randomQuote.quote; + authorElement.innerText = randomQuote.author; +} + +window.addEventListener("load", () => { + displayRandomQuote(); + + const newQuoteButton = document.getElementById("new-quote"); + if (newQuoteButton) { + newQuoteButton.addEventListener("click", displayRandomQuote); + } +}); // DO NOT EDIT BELOW HERE // pickFromArray is a function which will return one item, at @@ -13,11 +35,15 @@ // // Examples of use // --------------- -// pickFromArray(['a','b','c','d']) // maybe returns 'c' +// pickFromArray(['a','b','c','d']) // maybe returns 'c' // You don't need to change this function function pickFromArray(choices) { - return choices[Math.floor(Math.random() * choices.length)]; + var rnd = Math.random(); + console.log(`random value ${rnd}`); + var found = choices[Math.floor(rnd * choices.length)]; + console.log(`we chose ${found.quote} by ${found.author}`); + return found; } // A list of quotes you can use in your app. @@ -489,5 +515,3 @@ const quotes = [ author: "Zig Ziglar", }, ]; - -// call pickFromArray with the quotes array to check you get a random quote diff --git a/Sprint-3/quote-generator/quotes.test.js b/Sprint-3/quote-generator/quotes.test.js index 288ab4651..f7b128bf7 100644 --- a/Sprint-3/quote-generator/quotes.test.js +++ b/Sprint-3/quote-generator/quotes.test.js @@ -4,7 +4,6 @@ There are some Tests in this file that will help you work out if your code is wo const path = require("path"); const { JSDOM } = require("jsdom"); -const { default: userEvent } = require("@testing-library/user-event"); let page = null; @@ -61,14 +60,14 @@ describe("Quote generator", () => { expect(authorP).toHaveTextContent("Albert Einstein"); expect(newQuoteBtn).toHaveTextContent("New quote"); - userEvent.click(newQuoteBtn); + newQuoteBtn.click(); expect(quoteP).toHaveTextContent( "I've learned that people will forget what you said, people will forget what you did, but people will never forget how you made them feel." ); expect(authorP).toHaveTextContent("Maya Angelou"); - userEvent.click(newQuoteBtn); + newQuoteBtn.click(); expect(quoteP).toHaveTextContent( "I have learned over the years that when one's mind is made up, this diminishes fear." diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index 63cedf2d2..0f40b83ff 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -1 +1,69 @@ -/** Write your CSS in here **/ +body { + margin: 0; + font-family: sans-serif; +} + +.main-container { + background-color: #ff9933; + min-height: 100vh; + display: flex; + justify-content: center; + align-items: center; + padding: 20px; +} + +.quote-box { + background-color: white; + padding: 40px; + max-width: 700px; + width: 90%; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + position: relative; +} + +.quote-mark { + position: absolute; + top: 10px; + left: 20px; + font-size: 100px; + font-family: serif; + color: #ff9933; + margin: 0; + line-height: 1; + opacity: 0.6; +} + +#quote { + font-size: 24px; + line-height: 1.5; + margin-top: 50px; + margin-bottom: 20px; + text-align: left; + padding-left: 15px; +} + +#author { + font-size: 18px; + text-align: right; + margin-bottom: 30px; + margin-top: 0; +} + +#author::before { + content: "- "; +} + +#new-quote { + background-color: #ff9933; + color: white; + border: none; + padding: 10px 20px; + font-size: 16px; + cursor: pointer; + float: right; + transition: background-color 0.2s; +} + +#new-quote:hover { + background-color: #e0872c; +}