Ayushparikh-code · PavanKuppili · Oct 13, 2025 · Oct 13, 2025
diff --git a/Index.md b/Index.md
@@ -47,6 +47,7 @@
 | [Github Profile Finder](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/GitHub%20Profile%20Finder)         | GitHub Profile Finder will fetch the GitHub details like the user's name, number of repositories, bio, number of followers, number of followings, and profile pic just by entering the username and clicking on Search User.       |
 | [Image Filter App](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Image-Filter-App)                      | An awesome Image Filter App written in HTML, CSS, and JavaScript with CamanJS.                                                                                                                                                     |
 | [Image Finder](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/image-finder-app)                          | A single-page web application that uses the Pixabay API to display images according to user search.                                                                                                                                  |
+| [simple joke app](https://github.com/PavanKuppili/Web-dev-mini-projects/tree/added-jock-app/joke%20app)                        | a single page joke app made of html css and js that fetch jokes from joke api|
 | [JavaScript Color Change App](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/JAVASCRIPT%20BUTTON%20APP)  | It is a basic web app where the user can select a color from the options that are given on the web app, and as he clicks on that option, all the buttons' background color changes to that color.                                   |
 | [JavaScript Tip Calculator](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Tip%20Calculator)              | This script consists of user input --> total bill amount and bill percent, and it calculates the tip amount and the total bill.                                                                                                    |
 | [Love Calculator App](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/LOVE-CALCULATOR)                     | Love calculator is a fun application where friends and couples can calculate the percentage of love between them.                                                                                                                   |

diff --git a/joke app/README.md b/joke app/README.md
@@ -0,0 +1,39 @@
+# Random Joke Generator
+
+A tiny, beautiful Random Joke Generator built with HTML, CSS and a small client-side JavaScript fetch call.
+
+This mini project shows a single-page app that fetches a random joke from the "Official Joke API" and displays it with a simple glassmorphism UI.
+
+## Features
+
+- Click a button to fetch and display a random joke (setup + punchline).
+- Lightweight: no build tools or server required — just a browser.
+- Responsive layout and simple animations.
+
+## Files
+
+- `index.html` — the single HTML page. Contains the UI and the small `fetchJoke()` script.
+- `style.css` — styling (glassmorphism effect, responsive rules, and animations).
+
+## How to run
+
+1. Clone or download the repository to your machine.
+2. Open `index.html` in a modern browser (Chrome, Edge, Firefox, Safari).
+
+No installation is required. The app uses the public "Official Joke API" endpoint:
+
+```
+https://official-joke-api.appspot.com/random_joke
+```
+if you use VS code then live server will work.
+here are some images for reference
+![alt text](images/image1.png)
+![alt text](images/image.png)
+## Notes & Troubleshooting
+
+- The app fetches jokes from a public API. If the API is down or rate-limited, the button may fail silently — try refreshing the page or check the browser console for fetch errors.
+- If you need to support older browsers, consider adding a small fallback or polyfill for `fetch`.
+
+---
+
+Enjoy the jokes! 😄
diff --git a/joke app/images/image.png b/joke app/images/image.png
diff --git a/joke app/images/image1.png b/joke app/images/image1.png
diff --git a/joke app/index.html b/joke app/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>JOKE</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="joke-container">
+    <h2>Random Joke Generator</h2>
+    <p id="joke">Click the button for a joke!</p>
+    <button onclick="fetchJoke()">😂 Get Joke</button>
+</div>
+
+<script>
+async function fetchJoke() {
+    let response = await fetch("https://official-joke-api.appspot.com/random_joke");
+    let data = await response.json();
+
+    document.getElementById("joke").textContent = `${data.setup} - ${data.punchline}`;
+}
+</script>
+</body>
+</html>
diff --git a/joke app/style.css b/joke app/style.css
@@ -0,0 +1,112 @@
+/* Global Styles */
+body {
+    font-family: 'Poppins', sans-serif;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    background: linear-gradient(135deg, #f0f0f0, #d9d9d9);
+    background-size: 400% 400%;
+    margin: 0;
+}
+
+/* Joke Container with Glassmorphism Effect */
+.joke-container {
+    background: rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    padding: 30px;
+    border-radius: 15px;
+    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.3);
+    text-align: center;
+    width: 400px;
+    color: black;
+}
+
+/* Title */
+h2 {
+    font-size: 24px;
+    margin-bottom: 15px;
+}
+
+/* Joke Text */
+#joke {
+    font-size: 18px;
+    font-weight: bold;
+    margin-bottom: 20px;
+    color: black;
+}
+
+/* Fetch Button */
+button {
+    padding: 12px;
+    background: rgba(255, 255, 255);
+    border: solid 2px black;
+    border-radius: 10px;
+    cursor: pointer;
+    font-size: 18px;
+    transition: 0.3s ease-in-out;
+    color: black;
+}
+
+button:hover {
+    color: white;
+    background: rgba(0, 0, 0, 0.5);
+}
+
+/* Smooth Fade-in Animation */
+.joke-container {
+    animation: fadeIn 0.8s ease-in-out;
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: scale(0.9);
+    }
+    to {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+/* Responsive Adjustments */
+@media screen and (max-width: 768px) {
+    .joke-container {
+        width: 90%;
+        padding: 20px;
+    }
+
+    h2 {
+        font-size: 20px;
+    }
+
+    #joke {
+        font-size: 16px;
+    }
+
+    button {
+        font-size: 16px;
+        padding: 10px;
+    }
+}
+
+@media screen and (max-width: 480px) {
+    .joke-container {
+        width: 95%;
+        padding: 15px;
+    }
+
+    h2 {
+        font-size: 18px;
+    }
+
+    #joke {
+        font-size: 14px;
+    }
+
+    button {
+        font-size: 14px;
+        padding: 8px;
+    }
+}