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

hello there

+

Random Quote Generator

+ + + + + + \ No newline at end of file diff --git a/Sprint-3/quote-generator/package.json b/Sprint-3/quote-generator/package.json index 0f6f98917..3e418270d 100644 --- a/Sprint-3/quote-generator/package.json +++ b/Sprint-3/quote-generator/package.json @@ -13,5 +13,8 @@ "bugs": { "url": "https://github.com/CodeYourFuture/CYF-Coursework-Template/issues" }, - "homepage": "https://github.com/CodeYourFuture/CYF-Coursework-Template#readme" + "homepage": "https://github.com/CodeYourFuture/CYF-Coursework-Template#readme", + "dependencies": { + "@testing-library/user-event": "^13.5.0" + } } diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 4a4d04b72..df7988740 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -490,4 +490,33 @@ const quotes = [ }, ]; -// call pickFromArray with the quotes array to check you get a random quote +// QUOTE generator code + +// 1. func: get random quote +function getRandomQuote() { + // random index from 0 to (quotes.length -1) + const randomIndex = Math.floor(Math.random() * quotes.length); + + // return quotes object + return quotes[randomIndex] +} + +// 2. func: display object on page +function displayQuote(quoteObject) { + // find DOM elements + const quoteElement = document.getElementById("quote"); + const authorElement = document.getElementById("author"); + + // reload text + quoteElement.textContent = quoteObject.quote; + authorElement.textContent = quoteObject.author; +} + +// 3. page load -> show random quote +displayQuote(getRandomQuote()); + +// 4. reload button -> show new quote +const button = document.getElementById("new-quote"); +button.addEventListener("click", () => { + displayQuote(getRandomQuote()); +}); \ No newline at end of file diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index 63cedf2d2..5da336a6e 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -1 +1,59 @@ /** Write your CSS in here **/ +body { + font-family: 'Georgia', serif; + max-width: 600px; + margin: 50px auto; + padding: 20px; + text-align: center; + background-color: #f5f5f5; +} + +h1 { + color: #333; + margin-bottom: 30px; +} + +#quote { + font-size: 24px; + font-style: italic; + color: #555; + margin: 20px 0; + line-height: 1.6; +} + +#quote::before { + content: '"'; + font-size: 48px; + color: #ddd; +} + +#quote::after { + content: '"'; + font-size: 48px; + color: #ddd; +} + +#author { + font-size: 18px; + color: #777; + margin-bottom: 30px; +} + +#author::before { + content: '— '; +} + +button { + background-color: #4CAF50; + color: white; + padding: 12px 30px; + font-size: 16px; + border: none; + border-radius: 5px; + cursor: pointer; + transition: background-color 0.3s; +} + +button:hover { + background-color: #45a049; +} \ No newline at end of file diff --git a/Sprint-3/reading-list/index.html b/Sprint-3/reading-list/index.html index dbdb0f471..f5de0e04c 100644 --- a/Sprint-3/reading-list/index.html +++ b/Sprint-3/reading-list/index.html @@ -13,3 +13,4 @@ +