Quotely Laughs (#254)

## Related Issue Closes #248 ## Email id used to regsiter for VSoc'24 komnoob123@gmail.com ## Description Added quotely laughs app. ## Type of PR - [ ] Bug fix - [ ] Feature enhancement - [ ] Documentation update - [ ] Security enhancement - [X] Other (specify): Project ## Screenshots / Videos (if applicable) [11_7_2024, 10_22_12 am - Screen - Untitled video.webm](https://github.com/dhairyagothi/50_days_50_web_project/assets/92045934/4c8b695a-c248-465c-a393-aca014bfa0b6) ## Checklist - [X] I have performed a self-review of my code. - [X] I have read and followed the Contribution Guidelines. - [X] I have tested the changes thoroughly before submitting this pull request. - [X] I have provided relevant issue numbers, screenshots, and videos after making the changes. - [X] I have commented my code, particularly in hard-to-understand areas. - [X] I have followed the code style guidelines of this project. - [X] I have checked for any existing open issues that my pull request may address. - [X] I have ensured that my changes do not break any existing functionality. - [X] Each contributor is allowed to create a maximum of 4 issues per day. This helps us manage and address issues efficiently. - [X] I have read the resources for guidance listed below. - [X] I have followed security best practices in my code changes.
dhairyagothi · Jul 12, 2024 · 3e057b7 · 3e057b7
2 parents aae6126 + ec07743
commit 3e057b7
Show file tree

Hide file tree

Showing 3 changed files with 195 additions and 0 deletions.
diff --git a/public/Quotely-Laughs/index.html b/public/Quotely-Laughs/index.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Quotely Laughs</title>
+    <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>😉</text></svg>">
+    <link
+      href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
+      rel="stylesheet"
+    />
+    <style>
+      .loader {
+        border-top-color: #3498db;
+        animation: spinner 1.5s linear infinite;
+      }
+
+      @keyframes spinner {
+        0% {
+          transform: rotate(0deg);
+        }
+        100% {
+          transform: rotate(360deg);
+        }
+      }
+    </style>
+    <script defer src="script.js"></script>
+  </head>
+  <body
+    class="bg-gray-100 text-gray-900 flex flex-col justify-between h-screen relative"
+  >
+    <header
+      class="bg-gradient-to-r from-blue-500 to-green-500 p-4 shadow-md text-center"
+    >
+      <h1 class="text-3xl font-bold text-white">Quotely Laughs</h1>
+    </header>
+    <main class="flex-grow flex flex-col items-center justify-center">
+      <button
+        id="generate"
+        class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mb-6"
+      >
+        Generate Quote and Joke
+      </button>
+      <div
+        id="content"
+        class="bg-gray-200 p-6 rounded shadow-md text-center max-w-md w-full"
+      >
+        <div class="mb-6">
+          <p id="quote" class="text-lg font-medium mb-4"></p>
+          <div class="flex items-center justify-center">
+            <p class="text-base">Share quote on:</p>
+            <div>
+              <a id="share-quote-x" href="#" target="_blank">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="20px"
+                  height="20px"
+                  viewBox="0 0 512 512"
+                >
+                  <path
+                    fill="black"
+                    d="M389.2 48h70.6L305.6 224.2L487 464H345L233.7 318.6L106.5 464H35.8l164.9-188.5L26.8 48h145.6l100.5 132.9zm-24.8 373.8h39.1L151.1 88h-42z"
+                  />
+                </svg>
+              </a>
+            </div>
+          </div>
+        </div>
+        <div>
+          <p id="joke" class="text-lg font-medium mb-4"></p>
+          <div class="flex items-center justify-center">
+            <p class="text-base">Share joke on:</p>
+            <div>
+              <a id="share-joke-x" href="#" target="_blank">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="20px"
+                  height="20px"
+                  viewBox="0 0 512 512"
+                >
+                  <path
+                    fill="black"
+                    d="M389.2 48h70.6L305.6 224.2L487 464H345L233.7 318.6L106.5 464H35.8l164.9-188.5L26.8 48h145.6l100.5 132.9zm-24.8 373.8h39.1L151.1 88h-42z"
+                  />
+                </svg>
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </main>
+
+    <div
+      id="loading"
+      class="hidden absolute inset-0 bg-gray-800 bg-opacity-50 flex items-center justify-center"
+    >
+      <div
+        class="loader ease-linear rounded-full border-8 border-t-8 border-gray-200 h-16 w-16"
+      ></div>
+    </div>
+  </body>
+</html>
diff --git a/public/Quotely-Laughs/script.js b/public/Quotely-Laughs/script.js
@@ -0,0 +1,87 @@
+document.getElementById("generate").addEventListener("click", generateContent);
+
+document.addEventListener("DOMContentLoaded", async () => {
+  await generateContent();
+});
+
+async function generateContent() {
+  showLoading();
+  const quote = await getRandomQuote();
+  const joke = await getRandomJoke();
+  hideLoading();
+
+  document.getElementById("quote").innerText = quote;
+  document.getElementById("joke").innerText = joke;
+
+  updateShareLinks(quote, joke);
+}
+
+function showLoading() {
+  document.getElementById("loading").classList.remove("hidden");
+}
+
+function hideLoading() {
+  document.getElementById("loading").classList.add("hidden");
+}
+
+async function getRandomQuote() {
+  const quoteApiUrl = "https://api.freeapi.app/api/v1/public/quotes/quote/random";
+  try {
+    const response = await fetch(quoteApiUrl);
+    if (response.ok) {
+      const quoteData = await response.json();
+      const quoteText = quoteData.data.content;
+      const quoteAuthor = quoteData.data.author;
+      return `"${quoteText}" - ${quoteAuthor}`;
+    }
+  } catch (error) {
+    console.warn("Failed to fetch a quote from the API:", error);
+  }
+
+  const fallbackQuotes = [
+    "The only way to do great work is to love what you do. -Steve Jobs",
+    "Believe you can and you're halfway there. -Theodore Roosevelt",
+    "Success is not final, failure is not fatal: It is the courage to continue that counts. -Winston Churchill",
+    "In the middle of difficulty lies opportunity. -Albert Einstein",
+    "Don't watch the clock; do what it does. Keep going. -Sam Levenson",
+  ];
+  return fallbackQuotes[Math.floor(Math.random() * fallbackQuotes.length)];
+}
+
+async function getRandomJoke() {
+  const jokeApiUrl =
+    "https://v2.jokeapi.dev/joke/Programming,Spooky?blacklistFlags=political,racist,sexist&format=txt";
+  try {
+    const response = await fetch(jokeApiUrl);
+    if (response.ok) {
+      return await response.text();
+    }
+  } catch (error) {
+    console.warn("Failed to fetch a joke from the API:", error);
+  }
+
+  const fallbackJokes = [
+    "Why don’t scientists trust atoms? Because they make up everything!",
+    "I told my wife she was drawing her eyebrows too high. She looked surprised.",
+    "Why don’t skeletons fight each other? They don’t have the guts.",
+    "What do you call fake spaghetti? An impasta.",
+  ];
+  return fallbackJokes[Math.floor(Math.random() * fallbackJokes.length)];
+}
+
+function updateShareLinks(quote, joke) {
+  const siteURL =
+    "https://50-days-50-web-project.vercel.app/Quotely-Laughs/index.html";
+
+  document.getElementById(
+    "share-quote-x"
+  ).href = `https://twitter.com/intent/tweet?text=${encodeURIComponent(
+    `${quote} \n\nGenerated by Quotely Laughs.\nVisit site at ${siteURL}`
+  )}`;
+
+  document.getElementById(
+    "share-joke-x"
+  ).href = `https://twitter.com/intent/tweet?text=${encodeURIComponent(
+    `${joke} \n\nGenerated by Quotely Laughs.\nVisit site at ${siteURL}`
+  )}`;
+}
diff --git a/public/index.html b/public/index.html
@@ -439,6 +439,12 @@
             <div class="project-name">Insect-Catch_Game</div>
             <a href="public/Insect-Catch-Game/index.html" class="demo-link">Demo</a>
         </div>
+
+        <div class="table">
+            <div class="day-number">Day 71</div>
+            <div class="project-name">Quotely Laughs</div>
+            <a href="Quotely-Laughs/index.html" class="demo-link">Demo</a>
+        </div>
 
     </div>
     <footer>