From 8d388c5df9cfe96f3cd36d6c3efb1db979748357 Mon Sep 17 00:00:00 2001 From: Abrsh100 Date: Sun, 16 Nov 2025 07:17:42 +0000 Subject: [PATCH 1/2] adding code to the html, js and css file to function the quote generator app --- Sprint-3/quote-generator/index.html | 13 ++++---- Sprint-3/quote-generator/quotes.js | 18 +++++++++++ Sprint-3/quote-generator/style.css | 46 +++++++++++++++++++++++++++++ 3 files changed, 72 insertions(+), 5 deletions(-) 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..1bc6f1862 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); +console.log(randomQuote); // maybe logs { quote: "...", author: "..." } + +const quoteElement = document.getElementById("quote"); + const authorElement = document.getElementById("author"); + const newquoteButton = document.getElementById("new-quote"); + + function displayRandomQuote() { + const randomQuote = pickFromArray(quotes); + quoteElement.innerText = `"${randomQuote.quote}"`; + authorElement.innerText = `- ${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; } From 5c4d360aa7b45d813865d3284a33ace621c29403 Mon Sep 17 00:00:00 2001 From: Abrsh100 Date: Mon, 1 Dec 2025 22:14:20 +0000 Subject: [PATCH 2/2] change based on comment --- Sprint-3/quote-generator/quotes.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 1bc6f1862..0f0dd4cb4 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -496,7 +496,7 @@ const quotes = [ // call pickFromArray with the quotes array to check you get a random quote let randomQuote = pickFromArray(quotes); -console.log(randomQuote); // maybe logs { quote: "...", author: "..." } + const quoteElement = document.getElementById("quote"); const authorElement = document.getElementById("author"); @@ -504,8 +504,8 @@ const quoteElement = document.getElementById("quote"); function displayRandomQuote() { const randomQuote = pickFromArray(quotes); - quoteElement.innerText = `"${randomQuote.quote}"`; - authorElement.innerText = `- ${randomQuote.author}`; + quoteElement.textContent = `"${randomQuote.quote}"`; + authorElement.textContent = `- ${randomQuote.author}`; } displayRandomQuote(); newquoteButton.addEventListener("click", displayRandomQuote); \ No newline at end of file