CodeYourFuture · areebsattar · Jan 19, 2024 · Jan 19, 2024
diff --git a/week-3/quote-generator/index.html b/week-3/quote-generator/index.html
@@ -3,11 +3,12 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Title here</title>
+    <title>Quote Generator</title>
+    <link rel="stylesheet" href="style.css">
     <script defer src="quotes.js"></script>
   </head>
   <body>
-    <h1>hello there</h1>
+    <h1>Quote of the day</h1>
     <p id="quote"></p>
     <p id="author"></p>
     <button type="button" id="new-quote">New quote</button>

diff --git a/week-3/quote-generator/quotes.js b/week-3/quote-generator/quotes.js
@@ -1,3 +1,16 @@
+addEventListener("DOMContentLoaded", displayQuote);
+
+const quoteElement = document.querySelector("#quote");
+const authorElement = document.querySelector("#author");
+const newQuote = document.querySelector("#new-quote");
+
+function displayQuote() {
+  const randomQuote = pickFromArray(quotes);
+  quoteElement.textContent = `"${randomQuote.quote}"`;
+  authorElement.textContent = `- ${randomQuote.author}`;
+}
+
+newQuote.addEventListener("click", displayQuote);
 // DO NOT EDIT BELOW HERE
 
 // pickFromArray is a function which will return one item, at

diff --git a/week-3/quote-generator/style.css b/week-3/quote-generator/style.css
@@ -1 +1,29 @@
 /** Write your CSS in here **/
+body {
+    font-family: Arial, sans-serif;
+    background-color: #f1f7ff;
+    margin: 25% 10%;
+    padding: 5%;
+
+}
+
+h1 {
+    justify-content: center;
+    color: rgb(160, 38, 38);
+}
+
+button {
+    padding: 5px 10px;
+    background-color: rgb(209, 166, 141);
+    border-radius: 10px;
+}
+
+p {
+    justify-content: center;
+    color: rgb(75, 36, 36);
+    text-decoration: solid;
+}
+
+#author {
+    text-align: right;
+}