Merge pull request #320 from kartikmehta18/kartik

Kartik
dishamodi0910 · Aug 8, 2024 · f7aaf90 · f7aaf90
2 parents 8971b93 + 077da2b
commit f7aaf90
Show file tree

Hide file tree

Showing 5 changed files with 114 additions and 0 deletions.
diff --git a/Existing_API_Collection/Jokegenerator_API/README.md b/Existing_API_Collection/Jokegenerator_API/README.md
@@ -0,0 +1,24 @@
+# Random Jokes API
+Welcome to the Joke Generator API! This API offers an innovative approach to accessing an this api is use for the generating random joke and which helps for bigger to learn the concept or how to use api
+
+## Features
+- **Get Random Jokes:** By usinf this api you get random jokes.
+## Technologies Used
+- HTML
+- CSS
+- JavaScript
+- API ( for fetching data )
+
+# API Integration
+This application uses `https://v2.jokeapi.dev/joke/Any?blacklistFlags=nsfw,religious,political,racist,sexist,explicit&type=single` to fetch the data.
+
+## Installation
+To set up the Dictionary API locally, follow these steps:
+
+- Clone the repository
+- Switch to Existing_API_Collection folder `cd Existing_API_Collection`
+- Now switch to CountryAPI folder `cd Jokegenerator_API`
+- Run command `.\/index.html`
+
+## Screenshots
+![Screenshot (395)](![alt text](image.png))
diff --git a/Existing_API_Collection/Jokegenerator_API/image.png b/Existing_API_Collection/Jokegenerator_API/image.png
diff --git a/Existing_API_Collection/Jokegenerator_API/index.html b/Existing_API_Collection/Jokegenerator_API/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css" >
+    <title>Document</title>
+</head>
+<body>
+
+    <div class="wrapper">
+        <span>&#128514;</span>
+        <p id="joke">
+            hiiiiiiiiii
+        </p>
+        <button id="btn" onclick="getJoke()">Get Joke</button>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Existing_API_Collection/Jokegenerator_API/script.js b/Existing_API_Collection/Jokegenerator_API/script.js
@@ -0,0 +1,15 @@
+const jokeContainer = document.getElementById("joke");
+const btn = document.getElementById("btn");
+const url = "https://v2.jokeapi.dev/joke/Any?blacklistFlags=nsfw,religious,political,racist,sexist,explicit&type=single";
+
+let getJoke = () => {
+    jokeContainer.classList.remove("fade");
+    fetch(url)
+    .then(data => data.json())
+    .then(item =>{
+        jokeContainer.textContent = `${item.joke}`;
+        jokeContainer.classList.add("fade");
+    });
+}
+
+getJoke();
diff --git a/Existing_API_Collection/Jokegenerator_API/style.css b/Existing_API_Collection/Jokegenerator_API/style.css
@@ -0,0 +1,54 @@
+*{ padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+}
+
+body{
+    background-color: rgb(63, 182, 238);
+}
+.wrapper{
+    width: 80vmin;
+    padding: 50px 40px;
+    background-color: rgb(22, 22, 22);
+    position: absolute;
+    transform: translate(-50%, -50%);
+    top:50%;
+    left: 50%;
+    border-radius:5px;
+    box-shadow: rgba(184, 185, 185, 0.385) 20px 20px 40px ;
+}
+span{
+    display: block;
+    text-align: center;
+    font-size: 100px;
+}
+
+p{
+ font-size: 16px;
+ color: white;
+ font-weight: 400;
+ text-align: center;
+ word-break: break-word;
+ line-height: 35px;
+ margin: 30px;
+
+}
+button{
+
+   display: block;
+   background-color:rgb(63, 182, 238) ;
+   border: none;
+   padding:15px ;
+   color: aliceblue;
+   border-radius: 4px;
+   font-size: 18px;
+   font-weight: 600;
+   padding: 12px 25px;
+   margin:0 auto;
+   cursor: pointer;
+
+}
+button:hover{
+    color: black;
+    background-color: rgb(255, 153, 0);
+}