Dad joke api added

dishamodi0910 · Jun 2, 2024 · 6af1558 · 6af1558
1 parent 96d0255
commit 6af1558
Show file tree

Hide file tree

Showing 4 changed files with 167 additions and 0 deletions.
diff --git a/Existing_API_Collection/Dad_Joke_API/README.md b/Existing_API_Collection/Dad_Joke_API/README.md
@@ -0,0 +1,40 @@
+# Best Jokes Web App
+
+This is a simple web application that fetches and displays jokes from the "icanhazdadjoke" API to entertain users with humor.
+
+## Features
+
+- Fetch and display jokes with a click of a button.
+- Enjoy a variety of funny jokes to lighten your mood.
+
+## Technologies Used
+
+- HTML
+- CSS
+- JavaScript
+
+## Usage
+
+1. Open the `index.html` file in your web browser.
+2. Click the "Next Joke" button to load a new joke.
+3. Repeat step 2 to enjoy more jokes.
+
+## Code Explanation
+
+- HTML defines the structure of the web page.
+- CSS styles the elements to enhance visual appeal.
+- JavaScript handles the fetching of jokes from the API and updates the content dynamically.
+
+## API Integration
+
+This web app integrates with the "icanhazdadjoke" API to fetch random jokes.
+
+- It sends a request to the API and displays the retrieved joke on the webpage.
+
+## Credits
+
+- [icanhazdadjoke API](https://icanhazdadjoke.com)
+
+## License
+
+This project is licensed under the MIT License - see the LICENSE file for details.
diff --git a/Existing_API_Collection/Dad_Joke_API/index.html b/Existing_API_Collection/Dad_Joke_API/index.html
@@ -0,0 +1,20 @@
+<!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">
+    <title>Best Jokes</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="container">
+        <div class="box">
+            <h3>😂Best Jokes to make your day😂</h3>
+            <div class="joke">Loading funny jokes...</div>
+        </div>
+        <button class="btn" id="btn">Next Joke</button>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Existing_API_Collection/Dad_Joke_API/script.js b/Existing_API_Collection/Dad_Joke_API/script.js
@@ -0,0 +1,25 @@
+const jokes = document.querySelector('.joke');
+const btn = document.getElementById('btn');
+
+const generateJokes = async () => {
+    try {
+        const setHeader = {
+            headers: {
+                Accept: "application/json"
+            }
+        }
+        // Fetching Api with async await
+        const url = "https://icanhazdadjoke.com";
+        const res = await fetch(url, setHeader);
+        const data = await res.json();
+        console.log(data);
+        jokes.innerHTML = data.joke;
+    }
+    catch (error) {
+        console.log(`The error is ${error}`);
+    }
+}
+
+// Calling a function
+btn.addEventListener('click', generateJokes);
+generateJokes();
diff --git a/Existing_API_Collection/Dad_Joke_API/style.css b/Existing_API_Collection/Dad_Joke_API/style.css
@@ -0,0 +1,82 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,700;1,100&family=Raleway:ital,wght@0,300;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Roboto:wght@100;300;400;700&family=Ubuntu:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500;1,700&display=swap');
+
+* {
+    font-family: 'Poppins', sans-serif;
+}
+
+body {
+    background-color: rgb(158, 181, 197);
+}
+
+.container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    height: 100vh;
+}
+
+.box {
+    background-color: azure;
+    border-radius: 18px;
+    box-shadow: rgba(129, 129, 152, 0.2) 0px 7px 29px 0px;
+    text-align: center;
+    width: 650px;
+    max-height: 300px;
+    padding: 12px;
+    border: 2px solid red;
+
+}
+
+h3 {
+    font-size: 30px;
+}
+
+.btn {
+    width: 100px;
+    height: 40px;
+    background-color: rgb(182 196 237);
+    margin-top: 23px;
+    font-size: 15px;
+    font-weight: 600;
+    border-radius: 13px;
+    box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
+    cursor: pointer;
+    transition: all 0.5s ease;
+}
+
+.btn:hover {
+    background-color: rgb(101, 159, 136);
+}
+
+.joke {
+    font-size: 18px;
+    line-height: 1.5rem;
+    padding: 0 5px 35px 5px;
+    font-weight: 500;
+}
+
+@media only screen and (max-width:400px) {
+    .box {
+        width: 300px;
+        max-height: 500px;
+    }
+
+    h3 {
+        font-size: 23px;
+    }
+}
+
+@media only screen and (max-width:355px) {
+    .box {
+        width: 270px;
+    }
+
+    h3 {
+        font-size: 22px;
+    }
+
+    .joke {
+        font-size: 16px;
+    }
+}