quote generator

hectorzayas · Mar 12, 2024 · 8c1810b · 8c1810b
commit 8c1810b
Show file tree

Hide file tree

Showing 4 changed files with 300 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Quote Generator</title>
+    <link rel="icon" type="image/png" href="https://www.google.com/s2/u/0/favicons?domain=http://hectorzayas.com/
+    ">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
+    <link rel="stylesheet" href="style.css">
+
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital@0;1&display=swap" rel="stylesheet">
+</head>
+<body>
+    <div class="quote-container" id="quote-container">
+        <!-- Quote -->
+        <div class="quote-text">
+            <i class="fas fa-quote-left"></i>
+            <span id="quote">Quote</span>
+        </div>
+        <!-- Author -->
+        <div class="quote-author">
+            <span id="author">Author</span>
+        </div>
+        <!-- Buttons -->
+        <div class="button-container">
+            <button class="twitter-button" id="twitter" title="Tweet This!">
+                <i class="fab fa-twitter"></i>
+            </button>
+            <button id="new-quote">New Quote</button>
+        </div>
+    </div>
+    <!-- Loader-->
+    <div class="loader" id="loader"></div>
+    <!-- Script -->
+    <script src="quotes.js"></script>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/quotes.js b/quotes.js
@@ -0,0 +1,66 @@
+const localQuotes = [
+    {
+      "text": "Genius is one percent inspiration and ninety-nine percent perspiration.",
+      "author": "Thomas Edison"
+    },
+    {
+      "text": "You can observe a lot just by watching.",
+      "author": "Yogi Berra"
+    },
+    {
+      "text": "A house divided against itself cannot stand.",
+      "author": "Abraham Lincoln"
+    },
+    {
+      "text": "Difficulties increase the nearer we get to the goal.",
+      "author": "Johann Wolfgang von Goethe"
+    },
+    {
+      "text": "Fate is in your hands and no one elses",
+      "author": "Byron Pulsifer"
+    },
+    {
+      "text": "Be the chief but never the lord.",
+      "author": "Lao Tzu"
+    },
+    {
+      "text": "Nothing happens unless first we dream.",
+      "author": "Carl Sandburg"
+    },
+    {
+      "text": "Well begun is half done.",
+      "author": "Aristotle"
+    },
+    {
+      "text": "Life is a learning experience, only if you learn.",
+      "author": "Yogi Berra"
+    },
+    {
+      "text": "Self-complacency is fatal to progress.",
+      "author": "Margaret Sangster"
+    },
+    {
+      "text": "Peace comes from within. Do not seek it without.",
+      "author": "Buddha"
+    },
+    {
+      "text": "What you give is what you get.",
+      "author": "Byron Pulsifer"
+    },
+    {
+      "text": "We can only learn to love by loving.",
+      "author": "Iris Murdoch"
+    },
+    {
+      "text": "Life is change. Growth is optional. Choose wisely.",
+      "author": "Karen Clark"
+    },
+    {
+      "text": "You'll see it when you believe it.",
+      "author": "Wayne Dyer"
+    },
+    {
+      "text": "Today is the tomorrow we worried about yesterday.",
+      "author":  ""
+    }
+  ]
diff --git a/script.js b/script.js
@@ -0,0 +1,79 @@
+const quoteContainer = document.getElementById('quote-container');
+const quoteText = document.getElementById('quote');
+const authorText = document.getElementById('author');
+const twitterBtn = document.getElementById('twitter');
+const newQuoteBtn = document.getElementById('new-quote');
+const loader = document.getElementById('loader');
+
+let apiQuotes = [];
+
+let quotesOrigin;
+
+// Show Loading
+function loading() {
+    loader.hidden = false;
+    quoteContainer.hidden = true;
+}
+
+// Hide Loading
+function complete() {
+    quoteContainer.hidden = false;
+    loader.hidden = true;
+}
+
+// Show new Quote
+function newQuote(jsonOrigin) {
+    loading();
+    // Pick a random quote from apiQuotes array
+    const quote = jsonOrigin[Math.floor(Math.random() * jsonOrigin.length)];
+    // Check if Author field is empty and replace it with 'Unknown'
+    if (!quote.author) {
+        authorText.textContent = 'Unknown';
+    } else {
+        authorText.textContent = quote.author;
+    }
+    // Check Quote Length to determine styling
+    if (quote.text.length > 120) {
+        quoteText.classList.add('long-quote');
+    } else {
+        quoteText.classList.remove('long-quote');
+    }
+    // Set Quote, Hide Loader
+    quoteText.textContent = quote.text;
+    complete();
+}
+
+// Get Quotes From API
+async function getQuotes() {
+    loading();
+    const apiURL = 'https://jacintodesign.github.io/quotes-api/data/quotes.json'
+
+    try {
+        const response = await fetch(apiURL);
+        apiQuotes = await response.json();
+        quotesOrigin = apiQuotes;
+        newQuote(quotesOrigin);
+
+        // const proxyUrl = 'https://cors-anywhere.herokuapp.com/';
+        // const targetUrl = 'https://zenquotes.io/api/random';
+        // const response = await fetch(proxyUrl + targetUrl);
+        // const altQuote = await response.json();
+    } catch (error) {
+        quotesOrigin = localQuotes;
+        newQuote(quotesOrigin);
+    }
+
+}
+
+// Tweet Quote
+function tweetQuote() {
+    const twitterUrl = `https://twitter.com/intent/tweet?text=${quoteText.textContent} - ${authorText.textContent}`;
+    window.open(twitterUrl, '_blank');
+}
+
+// Event Listeners
+newQuoteBtn.addEventListener('click', () => newQuote(quotesOrigin));
+twitterBtn.addEventListener('click', tweetQuote);
+
+// On Load
+getQuotes();
diff --git a/style.css b/style.css