Random joke generator added

harshil1973 · Oct 13, 2022 · 2dd214d · 2dd214d
1 parent 9bf9bf3
commit 2dd214d
Show file tree

Hide file tree

Showing 10 changed files with 396 additions and 0 deletions.
diff --git a/Random Joke Generator/Prev Images/copyPrev.png b/Random Joke Generator/Prev Images/copyPrev.png
diff --git a/Random Joke Generator/Prev Images/darkPrev.png b/Random Joke Generator/Prev Images/darkPrev.png
diff --git a/Random Joke Generator/Prev Images/lightPrev.png b/Random Joke Generator/Prev Images/lightPrev.png
diff --git a/Random Joke Generator/README.md b/Random Joke Generator/README.md
@@ -0,0 +1,45 @@
+<h1 align="center">Joke Generator</h1>
+<p align="center">
+  <img alt="icon" width="15%" src="logo.png">
+</p>
+
+A Random Joke Generator
+
+- [x] Click to generate new joke.
+- [x] Copy joke to clipboard.
+- [x] Light and dark mode.
+
+<div align="center">
+  <img src="https://img.shields.io/badge/HTML5-E34F26?style=flat&logo=html5&logoColor=white" alt="HTML">
+  <img src="https://img.shields.io/badge/CSS3-1572B6?style=flat&logo=css3&logoColor=white" alt="CSS">
+  <img src="https://img.shields.io/badge/JavaScript-F7DF1E?style=flat&logo=javascript&logoColor=black" alt="JavaScript">
+</div>
+
+## Previews
+
+- Light Mode
+
+<p align="center">
+  <img alt="light mode" width="70%" src="./Prev Images/lightPrev.png">
+</p>
+
+
+- Dark Mode
+
+<p align="center">
+  <img alt="dark mode" width="70%" src="./Prev Images/darkPrev.png">
+</p>
+
+- Copy PopUp
+
+<p align="center">
+  <img alt="copy popUp" width="70%" src="./Prev Images/copyPrev.png">
+</p>
+
+## In Preview
+
+The font in preview is [Roboto Mono](https://fonts.google.com/specimen/Roboto+Mono?query=roboto+mono)
+
+## Other
+
+Made with ❤️ [Sahil Chandravanshi](https://www.sahilchandravanshi.com/).
diff --git a/Random Joke Generator/copied.png b/Random Joke Generator/copied.png
diff --git a/Random Joke Generator/icon.ico b/Random Joke Generator/icon.ico
diff --git a/Random Joke Generator/index.html b/Random Joke Generator/index.html
@@ -0,0 +1,41 @@
+<!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="icon" href="icon.ico" />
+  <title>Random Joke Generator</title>
+  <!-- Link for fa fonts -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
+  <!-- Link custom CSS -->
+  <link rel="stylesheet" href="style.css" />
+</head>
+
+<body>
+  <div class="container">
+    <div class="toggle" id="toggle">
+      <!-- to switch between light and dark mode-->
+      <span class="far fa-moon"></span>
+    </div>
+    <h1 id="main-joke-heading-in-h1" class="heading">Random Joke Generator</h1>
+    <hr style="width: 50%; color: black" />
+    <div id="joke" class="joke"><b>Here's your Joke!/b></div>
+    <div class="copy-popup"></div>
+    <button id="btn" class="btn"><b>Click to get a Joke</b></button>
+    <button id="copy_joke" class="copy_btn btn">
+      <span class="fa-regular fa-copy"></span>
+    </button>
+  </div>
+  <div class="lds-ring" id="loading">
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+  <!-- Link JS -->
+  <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/Random Joke Generator/logo.png b/Random Joke Generator/logo.png
diff --git a/Random Joke Generator/script.js b/Random Joke Generator/script.js
@@ -0,0 +1,69 @@
+
+const body = document.querySelector("body");
+const toggle = document.querySelector(".toggle");
+const copy = document.querySelector("#copy_joke");
+const popup=document.querySelector(".copy-popup");
+const jokeContainer = document.getElementById("joke");
+
+
+const btn = document.getElementById("btn");
+const url = "https://icanhazdadjoke.com/slack";
+
+let getJoke = () => {
+  jokeContainer.classList.remove("fade");
+
+    fetch(url)
+    .then((response) => response.json())
+    .then((user) => {
+      let j = user.attachments[0].text;
+      jokeContainer.textContent = j;
+      jokeContainer.classList.add("fade");
+    }).catch((error) => {
+      if(!window.navigator.onLine){
+        jokeContainer.textContent = "Error: Your browser is offline. \nPlease try again once you're connected to the internet.";
+      }else{
+        jokeContainer.textContent = "An Error Occurred: "+ error + ".\n Please try again";
+        jokeContainer.classList.add("fade");
+      }
+    });    
+
+}
+  window.addEventListener('online', () => {
+    getJoke()
+  });
+
+btn.addEventListener("click", getJoke);
+getJoke();
+
+btn.addEventListener('click', function handleClick() {
+  btn.textContent = 'Get Another Joke';
+});
+
+
+// Fade in 
+setTimeout(function () {
+  jokeContainer.innerHTML = "Click the button to get a Joke"
+  jokeContainer.style.opacity = 1;
+}, 500);
+
+
+
+toggle.addEventListener("click", () => {
+  body.classList.toggle("dark")
+    ? (toggle.firstElementChild.className = "far fa-sun")
+    : (toggle.firstElementChild.className = "far fa-moon");
+});
+
+
+copy.addEventListener("click", () => {
+  const text = jokeContainer.textContent;
+  navigator.clipboard.writeText(text);
+  popup.classList.add("fade-in-image");
+  setTimeout(function() {
+    popup.classList.remove("fade-in-image");
+  },3000);
+  copy.querySelector("i").className = "fa-solid fa-check"
+  setTimeout(function () {
+    copy.querySelector("i").className = "fa-regular fa-copy"
+  }, 1000);
+});