Merge pull request #527 from Harshitha-Annam/new--project

Dad Jokes Generator Project Using Fetch API #489
iamrahulmahato · Oct 6, 2024 · 30d6154 · 30d6154
2 parents 12ea255 + ee0e03f
commit 30d6154
Show file tree

Hide file tree

Showing 5 changed files with 157 additions and 0 deletions.
diff --git a/projects/Dad Jokes Generator/README.md b/projects/Dad Jokes Generator/README.md
@@ -0,0 +1,5 @@
+# PROJECT NAME : DAD JOKES GENERATOR 
+# LEVEL : BEGINNER
+# DESCRIPTION :
+***This project uses fetch API to fetch random Dad Jokes from icanhazdadjokes.com**
+[https://harshitha-annam.github.io/master-web-development/projects/Dad%20Jokes%20Generator/]
diff --git a/projects/Dad Jokes Generator/index.html b/projects/Dad Jokes Generator/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Dad Jokes</title>
+    <link rel="stylesheet" href="./style.css" />
+  </head>
+  <body class="">
+    <button class="theme"><i class="fa-solid fa-moon"></i></button>
+    <div class="container">
+      <h1>Don't Laugh Challenge</h1>
+      <div class="dad-joke">
+        <p id="joke">Click the Laughing Icon to get a new dad joke</p>
+      </div>
+      <button class="joke-btn">
+        <img src="./pngwing.com.png" alt="button" />
+      </button>
+    </div>
+    <script
+      src="https://kit.fontawesome.com/bbacb662c9.js"
+      crossorigin="anonymous"
+    ></script>
+    <script src="./script.js"></script>
+  </body>
+</html>
diff --git a/projects/Dad Jokes Generator/pngwing.com.png b/projects/Dad Jokes Generator/pngwing.com.png
diff --git a/projects/Dad Jokes Generator/script.js b/projects/Dad Jokes Generator/script.js
@@ -0,0 +1,31 @@
+const jokeEl = document.querySelector("#joke");
+const jokeBtn = document.querySelector(".joke-btn");
+const themeBtn = document.querySelector(".theme");
+const bodyEl = document.querySelector("body");
+const icon = document.querySelector(".theme i");
+jokeBtn.addEventListener("click", fecthAnotherJoke);
+
+async function fecthAnotherJoke() {
+  const config = {
+    headers: {
+      Accept: "application/json",
+    },
+  };
+
+  const response = await fetch("https://icanhazdadjoke.com", config);
+  //   console.log(response);
+  const data = await response.json();
+  //   console.log(data);
+  //   console.log(data.joke);
+  jokeEl.innerHTML = data.joke;
+}
+themeBtn.addEventListener("click", () => {
+  bodyEl.classList.toggle("dark");
+  if (bodyEl.classList.contains("dark")) {
+    icon.classList.remove("fa-moon");
+    icon.classList.add("fa-sun");
+  } else {
+    icon.classList.remove("fa-sun");
+    icon.classList.add("fa-moon");
+  }
+});
diff --git a/projects/Dad Jokes Generator/style.css b/projects/Dad Jokes Generator/style.css
@@ -0,0 +1,95 @@
+@import url("https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap");
+
+* {
+  box-sizing: border-box;
+}
+body {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: Mulish;
+  overflow-x: hidden;
+  position: relative;
+}
+
+img {
+  height: 8rem;
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  /* border: 1px solid grey; */
+  padding: 15px;
+  width: 90vw;
+  text-align: center;
+  overflow-x: hidden;
+  /* transform: translateX(-4%); */
+}
+button {
+  border: none;
+  background: transparent;
+
+  margin: 0;
+  cursor: pointer;
+  transition: transform 0.7s ease;
+}
+button:active {
+  transform: scale(1.3);
+  outline: none;
+}
+.dad-joke {
+  position: relative;
+  width: 100%;
+  /* border: 1px solid black; */
+  height: fit-content;
+  background: linear-gradient(
+    rgba(114, 114, 234, 0.769),
+    rgba(137, 43, 226, 0.772)
+  );
+  padding: 15px;
+  max-width: 400px;
+  min-width: 100px;
+  font-size: 1.5em;
+  border-radius: 5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  cursor: context-menu;
+}
+.dad-joke p {
+  padding: 10px;
+}
+h1 {
+  background: linear-gradient(rgba(97, 97, 185, 0.995), rgb(240, 25, 233));
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+.theme {
+  position: absolute;
+  top: 20px;
+  right: 60px;
+}
+.theme .fa-solid.fa-moon {
+  font-size: 20px;
+  color: rgb(69, 31, 105);
+  transform: rotate(-20deg);
+}
+.theme .fa-solid.fa-sun {
+  font-size: 20px;
+  color: rgb(253, 251, 254);
+  transform: rotate(-20deg);
+}
+body.dark .theme i {
+  font-size: 28px;
+  color: white;
+}
+
+body.dark {
+  background-color: rgb(58, 58, 58);
+}