swapnilsparsh · vishnuvardhanreddy31 · Jun 18, 2024
diff --git a/126 - Random Quote Generator/font/sans.ttf b/126 - Random Quote Generator/font/sans.ttf
diff --git a/126 - Random Quote Generator/index.html b/126 - Random Quote Generator/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="style.css">
+  <link rel="shortcut icon" href="assets/favicon.png" type="image/x-icon">
+  <title>Random Quote Generator</title>
+</head>
+
+<body>
+  <div class="container">
+    <h2>Random Quote Generator</h2>
+    <div id="quote">Loading...</div>
+    <div id="btn" onclick="getQuote();">Generate Quote</div>
+    <div id="copy-btn" onclick="copyQuote();">Copy Quote</div>
+  </div>
+
+  <footer>
+    <p>&#x3c; &#47; &#x3e; with ❤️ by
+      <a href="https://swapnilsparsh.github.io/" class="name"><u>Swapnil Srivastava</u></a>
+      <br>
+      <a href="https://github.com/swapnilsparsh/30DaysOfJavaScript" target="_blank"
+        class="ProjectName">#30DaysOfJavaScript
+      </a>
+    </p>
+  </footer>
+
+  <script src="main.js"></script>
+</body>
+
+</html>
diff --git a/126 - Random Quote Generator/main.js b/126 - Random Quote Generator/main.js
@@ -0,0 +1,45 @@
+document.addEventListener("DOMContentLoaded", () => {
+  let quotes = [];
+
+  // Fetch quotes from the API
+  fetch("https://type.fit/api/quotes")
+    .then((response) => response.json())
+    .then((data) => {
+      quotes = data;
+      getQuote(); // Display an initial quote
+    });
+
+  // Function to generate a new quote
+  function getQuote() {
+    if (quotes.length === 0) {
+      return;
+    }
+    const randomIndex = Math.floor(Math.random() * quotes.length);
+    const quoteElement = document.getElementById("quote");
+    const quoteText = quotes[randomIndex].text;
+    const quoteAuthor = cleanAuthor(quotes[randomIndex].author || "Unknown");
+    quoteElement.textContent = `${quoteText} - ${quoteAuthor}`;
+  }
+
+  // Function to clean up the author text
+  function cleanAuthor(author) {
+    // Remove unwanted text patterns (e.g., ", type.fit")
+    return author.replace(/, type\.fit/g, "");
+  }
+
+  // Function to copy the current quote to the clipboard
+  function copyQuote() {
+    const quoteElement = document.getElementById("quote");
+    const textArea = document.createElement("textarea");
+    textArea.value = quoteElement.textContent;
+    document.body.appendChild(textArea);
+    textArea.select();
+    document.execCommand("copy");
+    document.body.removeChild(textArea);
+    alert("Quote copied to clipboard!");
+  }
+
+  // Expose functions to the global scope so they can be called from the onclick attribute
+  window.getQuote = getQuote;
+  window.copyQuote = copyQuote;
+});
diff --git a/126 - Random Quote Generator/style.css b/126 - Random Quote Generator/style.css
@@ -0,0 +1,78 @@
+* {
+  padding: 0;
+  margin: 0;
+  font-family: "sans";
+  user-select: none;
+}
+
+@font-face {
+  src: url("font/sans.ttf");
+  font-family: "sans";
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  background: #19172e;
+}
+
+h2 {
+  color: white;
+  font-size: 2rem;
+  text-align: center;
+  margin-bottom: 20px;
+}
+
+#quote {
+  color: rgb(15, 201, 233);
+  font-size: 1.5rem;
+  text-align: center;
+  margin-bottom: 20px;
+}
+
+#btn,
+#copy-btn {
+  cursor: pointer;
+  color: #fff;
+  background: #333;
+  font-size: 1rem;
+  padding: 10px 20px;
+  border-radius: 5px;
+  transition: background 0.3s ease;
+  text-align: center;
+  margin-top: 20px;
+}
+
+#btn:hover,
+#copy-btn:hover {
+  background: #1e8e3e;
+}
+
+footer {
+  text-align: center;
+  color: white;
+  font-size: 1rem;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 5px;
+  line-height: 3vh;
+}
+
+footer a:visited {
+  color: inherit;
+}
+
+.name {
+  text-decoration: none;
+  color: white;
+}
+
+.ProjectName {
+  color: white;
+  text-decoration: none;
+}
diff --git a/30DaysOfJavaScript/assets/126 - quote.png b/30DaysOfJavaScript/assets/126 - quote.png