diff --git a/Sprint-3/quote-generator/QuoteGeneratorApp.html b/Sprint-3/quote-generator/QuoteGeneratorApp.html
new file mode 100644
index 000000000..0b4fe0b0c
--- /dev/null
+++ b/Sprint-3/quote-generator/QuoteGeneratorApp.html
@@ -0,0 +1,20 @@
+
+
+
+
+
+
+ Quote of the day page
+
+
+
+
+ quote for today
+
+
+
diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js
index 4a4d04b72..f11c826c5 100644
--- a/Sprint-3/quote-generator/quotes.js
+++ b/Sprint-3/quote-generator/quotes.js
@@ -1,3 +1,22 @@
+function setUp() {
+ document
+ .getElementById("new-quote")
+ .addEventListener("click", pickNewQuoteToDisplay);
+ pickNewQuoteToDisplay();
+}
+
+window.addEventListener("load", setUp);
+
+function pickNewQuoteToDisplay() {
+ //gets the quote object and brakes it down to the key and value
+ const quoteAndAuther = pickFromArray(quotes);
+ const quoteForDisplay = quoteAndAuther.quote;
+ const authorForDisplay = quoteAndAuther.author;
+ // prints the values to the page
+ document.getElementById("quote").innerHTML = "'" + quoteForDisplay + "'";
+ document.getElementById("author").innerHTML = ":-" + authorForDisplay;
+}
+
// DO NOT EDIT BELOW HERE
// pickFromArray is a function which will return one item, at
@@ -489,5 +508,3 @@ const quotes = [
author: "Zig Ziglar",
},
];
-
-// call pickFromArray with the quotes array to check you get a random quote
diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css
index 63cedf2d2..bf0caea54 100644
--- a/Sprint-3/quote-generator/style.css
+++ b/Sprint-3/quote-generator/style.css
@@ -1 +1,33 @@
-/** Write your CSS in here **/
+h1 {
+ font-size: 0;
+}
+body {
+ background-color: rgb(2, 185, 176);
+}
+.contaner {
+ height: 300px;
+ display: grid;
+ grid-template-columns: 20% 20% 20% 20% 20%;
+ grid-template-rows: 25% 25% 25% 25%;
+ background-color: rgb(8, 248, 232);
+}
+.contaner div {
+ text-shadow: 4px;
+ padding: 10px;
+}
+.item1 {
+ font-size: 40px;
+ grid-row: 1/5;
+ grid-column: 1 / 5;
+}
+.item2 {
+ font-size: 20px;
+ grid-row: 3/4;
+ grid-column: 5/6;
+}
+.item3 {
+ border-radius: 40px;
+ font-size: 15px;
+ grid-row: 4/5;
+ grid-column: 5 / 6;
+}