api

assets/script.js

@@ -0,0 +1,44 @@
+// script.js
+
+// API endpoint for Quotable API
+const apiUrl = "https://api.quotable.io/random";
+
+// Function to fetch a random quote
+function getQuote() {
+  fetch(apiUrl)
+    .then((response) => response.json())
+    .then((data) => {
+      const quote = data.content;
+      const author = data.author;
+      displayQuote(quote, author);
+    })
+    .catch((error) => console.error("Error fetching quote:", error));
+}
+
+// Function to display the quote
+function displayQuote(quote, author) {
+  const quoteElement = document.querySelector(".quote");
+  const authorElement = document.querySelector(".author");
+  quoteElement.textContent = `"${quote}"`;
+  authorElement.textContent = `—${author}`;
+}
+
+// Add event listener to generate button
+document.getElementById("generate-btn").addEventListener("click", getQuote);
+
+// Fetch a quote on page load
+getQuote();
+
+// Copy Quote
+
+const quote = document.getElementById('quote');
+const CopyBtn = document.getElementById('copy-btn');
+
+CopyBtn.addEventListener("click", async () => {
+  try {
+    await navigator.clipboard.writeText(quote.textContent);
+    alert("Quote copied to clipboard!");
+  } catch (error) {
+    console.error("Error copying quote:", error);
+  }
+});

index.html

@@ -65,10 +65,12 @@
     </div>
 
     <div class="content container">
-      <p class="quote">
-        “When you change your thoughts, remember to also change your world.”
+      <p class="quote" id="quote">
+        <!-- Fetch Quote Display here -->
+      </p>
+      <p class="author">
+        <!-- Fetch Author Display here -->
       </p>
-      <p class="author">—Norman Vincent Peale</p>
       <div class="icons">
         <button class="btn" id="share-btn">
           <img src="assets/images/share-ico.png" />
@@ -84,6 +86,7 @@
 
     <!-- Optional JavaScript -->
     <!-- jQuery first, then Popper.js, then Bootstrap JS -->
+    <script src="assets/script.js"></script>
     <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>