diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html
index 30b434bcf..6a80999e5 100644
--- a/Sprint-3/quote-generator/index.html
+++ b/Sprint-3/quote-generator/index.html
@@ -1,15 +1,22 @@
-
+
- Title here
+
+
- hello there
-
-
-
+
diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js
index 4a4d04b72..112722aca 100644
--- a/Sprint-3/quote-generator/quotes.js
+++ b/Sprint-3/quote-generator/quotes.js
@@ -1,3 +1,25 @@
+document.title = "Quote generator app";
+
+const domQuote = document.getElementById("quote");
+const domAuthor = document.getElementById("author");
+const newQuote = document.getElementById("new-quote");
+
+function showRandomQuote() {
+ const randomQuote = pickFromArray(quotes);
+
+ domQuote.textContent = randomQuote.quote;
+ domAuthor.textContent = randomQuote.author;
+}
+
+// Select the quote and author elements from the DOM.
+// Select the "New quote" button from the DOM.
+// Write a function to:
+// Pick a random quote object from the quotes array.
+// Set the quote element’s text to the quote.
+// Set the author element’s text to the author.
+// When the page loads, call this function to show a random quote.
+// When the button is clicked, call this function again to show a new random quote.
+
// DO NOT EDIT BELOW HERE
// pickFromArray is a function which will return one item, at
@@ -490,4 +512,5 @@ const quotes = [
},
];
-// call pickFromArray with the quotes array to check you get a random quote
+showRandomQuote();
+newQuote.addEventListener("click", showRandomQuote);
diff --git a/Sprint-3/quote-generator/quotes.test.js b/Sprint-3/quote-generator/quotes.test.js
index 288ab4651..a48f9b30d 100644
--- a/Sprint-3/quote-generator/quotes.test.js
+++ b/Sprint-3/quote-generator/quotes.test.js
@@ -50,7 +50,7 @@ describe("Quote generator", () => {
);
expect(authorP).toHaveTextContent("Albert Einstein");
});
- test("can change quote to another random quote", () => {
+ test("can change quote to another random quote", async () => {
const quoteP = page.window.document.querySelector("#quote");
const authorP = page.window.document.querySelector("#author");
const newQuoteBtn = page.window.document.querySelector("#new-quote");
@@ -61,14 +61,14 @@ describe("Quote generator", () => {
expect(authorP).toHaveTextContent("Albert Einstein");
expect(newQuoteBtn).toHaveTextContent("New quote");
- userEvent.click(newQuoteBtn);
+ await userEvent.click(newQuoteBtn);
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);
+ await userEvent.click(newQuoteBtn);
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..05663d941 100644
--- a/Sprint-3/quote-generator/style.css
+++ b/Sprint-3/quote-generator/style.css
@@ -1 +1,96 @@
-/** Write your CSS in here **/
+* {
+ box-sizing: border-box;
+}
+
+body {
+ background-color: #f4a63e;
+
+ min-height: 100vh;
+
+ padding: 24px;
+
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.quotepanel {
+ background-color: white;
+
+ width: 100%;
+ max-width: 1000px;
+ min-height: 330px;
+
+ padding: 40px 50px;
+
+ display: flex;
+ flex-direction: column;
+}
+
+.quotebox {
+ gap: 16px;
+
+ display: flex;
+ align-items: flex-start;
+}
+
+.quote-symbol {
+ color: #f4a63e;
+
+ font-family: "Gill Sans", "Trebuchet MS", "Helvetica Neue", sans-serif;
+ font-size: 6.25rem;
+ font-weight: bold;
+ line-height: 0.8;
+
+ margin-top: -0.45rem;
+}
+
+.quotes {
+ color: #f4a63e;
+
+ font-family: Georgia, "Times New Roman", Times, serif;
+ font-size: 2.4rem;
+ line-height: 1.25;
+
+ min-height: 6.25em;
+
+ margin: 0;
+
+ flex: 1;
+}
+
+.authors {
+ color: #f4a63e;
+
+ font-family: Georgia, "Times New Roman", Times, serif;
+ font-size: 1.4rem;
+
+ margin: 0;
+
+ text-align: right;
+}
+
+.authors::before {
+ content: "- ";
+}
+
+.button-styling {
+ margin-top: auto;
+ padding-top: 20px;
+
+ display: flex;
+ justify-content: flex-end;
+}
+
+#new-quote {
+ background-color: #f4a63e;
+ color: white;
+
+ font-size: 1rem;
+
+ padding: 14px 22px;
+
+ border: none;
+
+ cursor: pointer;
+}