adding code to the html, js and css file to function the quote generator app

Abrsh100 · web-flow · commit 8d388c5df9cf · 2025-11-16T07:17:42.000Z
diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html
@@ -3,13 +3,16 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Title here</title>
+    <title>Quote Generator App</title>
+    <link rel="stylesheet" href="style.css" />
     <script defer src="quotes.js"></script>
   </head>
   <body>
-    <h1>hello there</h1>
-    <p id="quote"></p>
-    <p id="author"></p>
-    <button type="button" id="new-quote">New quote</button>
+      <h1 class="greeting">Hello There, Enjoy the Quote</h1>
+    <div class="quote-box">
+      <blockquote id="quote"></blockquote>
+      <p class="author" id="author"></p>
+      <button type="button" class="btn" id="new-quote">New quote</button>
+    </div>
   </body>
 </html>
diff --git 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);
diff --git 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; }
