Random Joke Generator

├── OIP.jpeg ├── index.html ├── style.css ├── script.js └── README.md /OIP.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AbdulRehmanBaig384/Generate_random_Jokes/HEAD/OIP.jpeg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Random Joke Generator 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |

17 | 😂 18 |

19 | 20 |

21 | 22 | 23 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | 2 | * { 3 | padding: 0px; 4 | margin: 0px; 5 | box-sizing: border-box; 6 | } 7 | 8 | body { 9 | background-color: #f4f4f9; /* Light gray for a clean background */ 10 | } 11 | 12 | .wrapper { 13 | width: 80vmin; 14 | padding: 50px 40px; 15 | background-color: #1e293b; /* Dark navy blue for contrast */ 16 | position: absolute; 17 | transform: translate(-50%, -50%); 18 | top: 50%; 19 | left: 50%; 20 | border-radius: 10px; 21 | box-shadow: 20px 20px 40px rgba(30, 41, 59, 0.4); 22 | } 23 | 24 | span { 25 | display: block; 26 | width: 100%; 27 | font-size: 100px; 28 | text-align: center; 29 | color: #0ea5e9; /* Vibrant blue for headings */ 30 | } 31 | 32 | p { 33 | font-size: 16px; 34 | color: #e2e8f0; /* Light gray for text readability */ 35 | font-weight: 400; 36 | text-align: center; 37 | line-height: 35px; 38 | margin: 30px 0px; 39 | opacity: 1; 40 | } 41 | 42 | .fade { 43 | opacity: 1; 44 | transition: opacity 15s; /* Fixed typo in transition timing */ 45 | } 46 | 47 | button { 48 | display: block; 49 | background-color: #38bdf8; /* Soft blue for buttons */ 50 | padding: 12px 25px; 51 | border: none; 52 | font-size: 18px; 53 | color: white; /* White text for better contrast */ 54 | font-weight: 600; 55 | margin: 0px auto; 56 | border-radius: 8px; 57 | cursor: pointer; 58 | transition: background-color 0.3s ease; 59 | } 60 | 61 | button:hover { 62 | background-color: #0ea5e9; /* Slightly darker blue on hover */ 63 | } 64 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | const joke_generator=document.getElementById('theory'); 2 | const button=document.getElementById('btn'); 3 | const url='https://v2.jokeapi.dev/joke/Any?blacklistFlags=nsfw,religious,political,racist,sexist,explicit&type=single'; 4 | let get_joke=()=>{ 5 | joke_generator.classList.remove("fade"); 6 | fetch(url) 7 | .then(data=>data.json()) 8 | .then(item=>{ 9 | console.log(item.joke); 10 | joke_generator.textContent=`${item.joke}`; 11 | joke_generator.classList.add("fade"); 12 | }) 13 | } 14 | button.addEventListener('click',get_joke) 15 | get_joke(); 16 | // const joke_generator = document.getElementById('theory'); 17 | // const button = document.getElementById('btn'); 18 | // const url = 'https://v2.jokeapi.dev/joke/Any?blacklistFlags=nsfw,religious,political,racist,sexist,explicit&type=single'; 19 | 20 | // // Function to fetch a joke 21 | // let get_joke = () => { 22 | // fetch(url) 23 | // .then((data) => data.json()) 24 | // .then((item) => { 25 | // // Update the text content and add the fade effect 26 | // joke_generator.textContent = item.joke || "Couldn't fetch a joke. Try again!"; 27 | // joke_generator.classList.add("fade"); 28 | // }); 29 | // }; 30 | 31 | // // Add click event listener to the button 32 | // button.addEventListener('click', () => { 33 | // joke_generator.classList.remove("fade"); // Remove the class to restart fade effect 34 | // void joke_generator.offsetWidth; // Trigger reflow to reapply animation 35 | // get_joke(); 36 | // }); 37 | 38 | // // Fetch a joke when the page loads 39 | // get_joke(); 40 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 🤣 Random Jokes Generator – Laugh Anytime, Anywhere! 🎭 2 | 3 | Feeling bored? Need a quick laugh? This Random Jokes Generator is here to save the day! Click a button and get a hilarious joke instantly! 😂 4 | 5 | 6 | --- 7 | 8 | 🌟 Features 9 | 10 | ✅ Instant Jokes – Get a fresh joke with a single click! 11 | ✅ Endless Laughter – Jokes are randomized, so you never get bored! 12 | ✅ Clean & Simple UI – Built with Bootstrap for a modern look. 13 | ✅ Fully Responsive – Works on desktop, mobile, and tablets! 14 | 15 | 16 | --- 17 | 18 | 🎮 How It Works? 19 | 20 | ⿡ Click the "Get a Joke" button. 21 | ⿢ A random joke appears instantly! 🤩 22 | ⿣ Laugh your heart out! 😂 23 | 24 | 💡 Perfect for: Breaking the ice, lifting your mood, or pranking friends! 25 | 26 | 27 | --- 28 | 29 | 💻 Tech Stack 30 | 31 | 🛠 HTML – Structure of the app. 32 | 🎨 CSS & Bootstrap – Sleek, modern styling. 33 | ⚡ JavaScript – Fetches & displays random jokes dynamically. 34 | 35 | 36 | --- 37 | 38 | 🚀 How to Get Started? 39 | 40 | ⿡ Clone this repo: 41 | 42 | git clone https://github.com/AbdulRehmanBaig384/Generate_random_Jokes.git 43 | 44 | ⿢ Open index.html in your browser. 45 | ⿣ Click "Get a Joke" and enjoy unlimited laughter! 🤣 46 | 47 | 48 | --- 49 | 50 | 🔥 Future Enhancements 51 | 52 | 🔹 Joke Categories – Add dad jokes, puns, dark humor, and more! 53 | 🔹 Text-to-Speech – Make jokes read aloud for extra fun! 54 | 🔹 Save Favorite Jokes – Bookmark your funniest ones! 55 | 56 | 57 | --- 58 | 59 | 🤝 Want to Contribute? 60 | 61 | 🚀 Have an idea for more joke features? Fork this repo and submit a PR! Let’s spread more laughter together! 🎉 62 | 63 | 64 | --- 65 | 66 | 😂 Click, Laugh, Repeat! Enjoy endless jokes at your fingertips! 🎭🔥 67 | 68 | 69 | --- 70 | 71 | 72 | --------------------------------------------------------------------------------