I have improved my code and got the qoute generator to function

KKtech06 · KKtech06 · commit 4c6f9e905991 · 2026-04-04T21:21:19.000+01:00
diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html
@@ -8,15 +8,13 @@
     <link rel="stylesheet" href="style.css" />
   </head>
   <body>
-    <h1>hello there</h1>
-    <p id="quote"></p>
-    <p id="author"></p>
+    <div id="quote-container">
+      <h1>Quote Generator</h1>
 
-    <button type="button" id="new-quote">New quote</button>
-    <input id="quote-input" type="text" placeholder="Enter a quote here" />
-    <input id="author-input" type="text" placeholder="Enter the author here" />
+      <p id="quote"></p>
+      <p id="author"></p>
 
-    <button type="button" id="add-quote">Add quote</button>
-    
+      <button type="button" 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,25 @@
+const quoteElement = document.getElementById("quote");
+const authorElement = document.getElementById("author");
+const newQuoteButton = document.getElementById("new-quote");
+
+function showQuote(quoteObject) {
+  quoteElement.textContent = quoteObject.quote;
+  authorElement.textContent = quoteObject.author;
+}
+
+function showRandomQuote() {
+  const randomQuote = pickFromArray(quotes);
+  showQuote(randomQuote);
+}
+
+window.addEventListener("load", function () {
+  showRandomQuote();
+
+  newQuoteButton.addEventListener("click", function () {
+    showRandomQuote();
+  });
+});
+
 // DO NOT EDIT BELOW HERE
 
 // pickFromArray is a function which will return one item, at
diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css
@@ -1,7 +1,7 @@
 /** Write your CSS in here **/
 body {
   font-family: Arial, sans-serif;
-  background-color: #f0f0f0;
+  background-color:burlywood;
   padding: 20px;
 }
 
@@ -12,6 +12,7 @@ body {
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
     max-width: 600px;
     margin: auto;
+    text-align: center;
 }
 #quote {
   font-size: 24px;
@@ -20,19 +21,24 @@ body {
 }
 #author {
   font-size: 20px;
-  text-align: right;
+  text-align: center;
   margin-bottom: 20px;
+  color: #555;
 }
 button {
+  background-color: #007BFF;
+  color: white;
   padding: 10px 20px;
   font-size: 16px;
   cursor: pointer;
 }
-#quote-input, #author-input {
-  padding: 10px;
-  font-size: 16px;
-  margin-right: 10px;
+
+h1 {
+  color: #333;
+  margin-bottom: 20px;
 }
 
 
 
+
+
