diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 30b434bcf..22a2bc253 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -3,13 +3,16 @@ - Title here + Quote Generator App + -

hello there

-

-

- +

Hello There, Enjoy the Quote

+
+
+

+ +
diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 4a4d04b72..0f0dd4cb4 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -1,3 +1,6 @@ + + + // DO NOT EDIT BELOW HERE // pickFromArray is a function which will return one item, at @@ -14,6 +17,7 @@ // Examples of use // --------------- // pickFromArray(['a','b','c','d']) // maybe returns 'c' + // You don't need to change this function function pickFromArray(choices) { @@ -491,3 +495,17 @@ const quotes = [ ]; // call pickFromArray with the quotes array to check you get a random quote +let randomQuote = pickFromArray(quotes); + + +const quoteElement = document.getElementById("quote"); + const authorElement = document.getElementById("author"); + const newquoteButton = document.getElementById("new-quote"); + + function displayRandomQuote() { + const randomQuote = pickFromArray(quotes); + quoteElement.textContent = `"${randomQuote.quote}"`; + authorElement.textContent = `- ${randomQuote.author}`; + } + displayRandomQuote(); + newquoteButton.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 index 63cedf2d2..19c652d62 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -1 +1,47 @@ /** Write your CSS in here **/ +body { + margin: 0; + height: 100vh; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + background: #4244c7; + font-family: Arial, sans-serif; +} +.greeting { + color: #fff; + margin-bottom: 50px; + font-size: 24px; +} +.quote-box { + background: #f0f0f0; + padding: 20px 30px; + border-radius: 10px; + text-align: center; + box-shadow: 0 4px 8px rgba(0,0,0,0.1); +} + +blockquote { + margin: 0 0 10px; + font-size: 28px; + color: #080706c7; + font-style: italic; + font-weight: bold; +} +.author { + margin: 0 0 15px; + color: #1d0daf; + font-size: 20px; + font-weight: bold; +} + +.btn { + background: #4244c7; + color: #fff; + border: none; + padding: 8px 16px; + border-radius: 20px; + cursor: pointer; +} +.btn:hover { background: #eb2f48; }