codesandbox · Rizwan-Khan-1998 · Nov 10, 2023
diff --git a/.codesandbox/workspace.json b/.codesandbox/workspace.json
@@ -0,0 +1,20 @@
+{
+  "responsive-preview": {
+    "Mobile": [
+      320,
+      675
+    ],
+    "Tablet": [
+      1024,
+      765
+    ],
+    "Desktop": [
+      1400,
+      800
+    ],
+    "Desktop HD": [
+      1920,
+      1080
+    ]
+  }
+}
diff --git a/index.html b/index.html
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
-  "name": "static",
+  "name": "quote-generator",
   "version": "1.0.0",
-  "description": "This is a static template with no bundling",
+  "description": "",
   "main": "index.html",
   "scripts": {
     "start": "serve",
@@ -11,11 +11,7 @@
     "type": "git",
     "url": "git+https://github.com/codesandbox-app/static-template.git"
   },
-  "keywords": [
-    "static",
-    "template",
-    "codesandbox"
-  ],
+  "keywords": [],
   "author": "Ives van Hoorne",
   "license": "MIT",
   "bugs": {
@@ -25,4 +21,4 @@
   "devDependencies": {
     "serve": "^11.2.0"
   }
-}
+}
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <link rel="stylesheet" href="style.css" />
+    <script defer src="script.js"></script>
+    <script
+      src="https://kit.fontawesome.com/9c77fdc30e.js"
+      crossorigin="anonymous"
+    ></script>
+    <title>Static Template</title>
+  </head>
+  <body>
+    <div class="container">
+      <div class="quote-left"><i class="fa-solid fa-quote-left"></i></div>
+      <span class="quote text-animation" id="quote"
+        >"One of my movies was called 'True Lies.' It's what the Democrats
+        should have called their convention."</span
+      >
+      <div class="author text-animation" id="author">
+        ~Arnold Schwarzenegger~
+      </div>
+      <div class="buttons">
+        <div class="media-btns">
+          <button class="media-btn" id="twitter-share">
+            <i class="fa-brands fa-twitter" title="tweet this"></i>
+          </button>
+        </div>
+        <button class="new-quote-btn" id="new-quote">New Quote</button>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/public/script.js b/public/script.js
@@ -0,0 +1,49 @@
+const quoteElement = document.getElementById("quote");
+const newQuoteBtn = document.getElementById("new-quote");
+const author = document.getElementById("author");
+const twitterBtn = document.getElementById("twitter-share");
+const instagramBtn = document.getElementById("instagram-share");
+
+let apiQuotes = [];
+
+function newQuote() {
+  const quote = apiQuotes[Math.floor(Math.random() * apiQuotes.length)];
+
+  quoteElement.innerText = quote.text;
+  author.innerText = `~${quote.author}~`;
+  console.log(quote.text.length);
+  if (quote.text.length >= 100) {
+    quoteElement.classList.add("long-text");
+  } else {
+    quoteElement.classList.remove("long-text");
+  }
+
+  quoteElement.classList.remove("text-animation");
+  author.classList.remove("text-animation");
+  void quoteElement.offsetWidth;
+  void author.offsetWidth;
+  quoteElement.classList.add("text-animation");
+  author.classList.add("text-animation");
+}
+async function getQuotes() {
+  try {
+    const apiUrl =
+      "https://jacintodesign.github.io/quotes-api/data/quotes.json";
+    const response = await fetch(apiUrl);
+    apiQuotes = await response.json();
+  } catch (error) {}
+}
+getQuotes();
+
+newQuoteBtn.addEventListener("click", () => {
+  newQuote();
+});
+
+twitterBtn.addEventListener("click", () => {
+  twitterBtn.addEventListener("click", () => {
+    const quoteText = quoteElement.innerText;
+    const authorText = author.innerText;
+    const twitterUrl = `https://twitter.com/intent/tweet?text=${quoteText}`;
+    window.open(twitterUrl, "_blank");
+  });
+});
diff --git a/public/style.css b/public/style.css