From 20e0dc73fbdb8bd1f2a9978220b4010d4489ae58 Mon Sep 17 00:00:00 2001 From: mo-muchunu Date: Wed, 16 Jul 2025 05:06:08 +0100 Subject: [PATCH 1/3] Added CSS and JavaScript functionality to 'quote generator app' --- Sprint-3/quote-generator/index.html | 28 +++++++---- Sprint-3/quote-generator/quotes.js | 14 ++++++ Sprint-3/quote-generator/style.css | 75 ++++++++++++++++++++++++++++- 3 files changed, 106 insertions(+), 11 deletions(-) diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html index 30b434bcf..9207c5185 100644 --- a/Sprint-3/quote-generator/index.html +++ b/Sprint-3/quote-generator/index.html @@ -1,15 +1,23 @@ - + - Title here + Quote Generator app + + - - -

hello there

-

-

- - - + + +
+

Be inspired...

+
+
+

+

+ +
+ + \ No newline at end of file diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 4a4d04b72..871de3985 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -491,3 +491,17 @@ const quotes = [ ]; // call pickFromArray with the quotes array to check you get a random quote + +function updateQuote() { + const randomQuote = pickFromArray(quotes); + + document.getElementById("quote").textContent = `❝ ${randomQuote.quote} ❞`; + document.getElementById("author").textContent = `- ${randomQuote.author}`; +}; + +document.addEventListener("DOMContentLoaded", function () { + updateQuote(); // Display a random quote when the page loads + + + document.getElementById("new-quote").addEventListener("click", updateQuote); // Add event listener to the 'New Quote' button +}); \ No newline at end of file diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css index 63cedf2d2..c262defe0 100644 --- a/Sprint-3/quote-generator/style.css +++ b/Sprint-3/quote-generator/style.css @@ -1 +1,74 @@ -/** Write your CSS in here **/ +* { + margin: 5; + padding: 2; + box-sizing: border-box; +} + +body { + background-color: rgb(209, 191, 237); + margin: 0; + padding: 10px; + display: flex; + flex-direction: column; + align-items: center; + min-height: 100vh; + justify-content: flex-start; +} + +h1 { + color: #634592; + font-size: 4rem; + font-family: "Technor", sans-serif; +} + +.title { + width: 80%; + justify-content: flex-start; + display: flex; + padding: 3px; + margin-bottom: 10px; +} + +.container { + background: rgb(236, 236, 230); + padding: 30px; + border-radius: 5px; + width: 80%; + text-align: center; + margin-bottom: 30px; +} + +#quote { + color: rgb(3, 14, 16); + font-family: "Cabinet Grotesk", sans-serif; + font-size: 2.5rem; + font-weight: 400; + margin-bottom: 10px; + margin-top: 30px; +} + +#author { + font-size: 20px; + font-style: italic; + margin-bottom: 50px; + border-radius: 5px; + background-color: rgba(127, 255, 212, 0.304); +} + +#new-quote { + background-color: rgb(209, 191, 237); + color: rgb(18, 15, 39); + padding: 5px 10px; + font-family: "Lucida Console"; + font-size: 1rem; + border-radius: 3px; + cursor: pointer; + border: none; + transition: 0.3s ease; + display: block; + margin-left: auto; +} + +#new-quote:hover { + background: rgb(214, 220, 237); +} From 42e85054bb3a3afc775430c76f789d0a28971303 Mon Sep 17 00:00:00 2001 From: mo-muchunu Date: Wed, 16 Jul 2025 17:51:38 +0100 Subject: [PATCH 2/3] Clarified comments --- Sprint-3/quote-generator/quotes.js | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 4a4d04b72..871de3985 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -491,3 +491,17 @@ const quotes = [ ]; // call pickFromArray with the quotes array to check you get a random quote + +function updateQuote() { + const randomQuote = pickFromArray(quotes); + + document.getElementById("quote").textContent = `❝ ${randomQuote.quote} ❞`; + document.getElementById("author").textContent = `- ${randomQuote.author}`; +}; + +document.addEventListener("DOMContentLoaded", function () { + updateQuote(); // Display a random quote when the page loads + + + document.getElementById("new-quote").addEventListener("click", updateQuote); // Add event listener to the 'New Quote' button +}); \ No newline at end of file From 0445a4d6fd65ac575bea7310740eb27501673f33 Mon Sep 17 00:00:00 2001 From: mo-muchunu Date: Wed, 16 Jul 2025 18:44:37 +0100 Subject: [PATCH 3/3] Missed commit --- Sprint-3/quote-generator/quotes.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js index 871de3985..970fbb712 100644 --- a/Sprint-3/quote-generator/quotes.js +++ b/Sprint-3/quote-generator/quotes.js @@ -493,15 +493,15 @@ const quotes = [ // call pickFromArray with the quotes array to check you get a random quote function updateQuote() { - const randomQuote = pickFromArray(quotes); + const randomQuote = pickFromArray(quotes); // Random quote from the quotes array - document.getElementById("quote").textContent = `❝ ${randomQuote.quote} ❞`; - document.getElementById("author").textContent = `- ${randomQuote.author}`; + document.getElementById("quote").textContent = `❝ ${randomQuote.quote} ❞`; // Wrap quote in decorative quotation marks and display in "quote" element + document.getElementById("author").textContent = `- ${randomQuote.author}`; // Display the author's name in the "author" element }; -document.addEventListener("DOMContentLoaded", function () { - updateQuote(); // Display a random quote when the page loads +document.addEventListener("DOMContentLoaded", function () { // Wait for HTML document to finish loading before running scripts + updateQuote(); // Show an initial quote when page loads - document.getElementById("new-quote").addEventListener("click", updateQuote); // Add event listener to the 'New Quote' button + document.getElementById("new-quote").addEventListener("click", updateQuote); // Event listener to load a new quote when button is clicked }); \ No newline at end of file