This is a web app created using a free joke API. It generates random jokes. I have used jokes API in to generate random jokes and React+CSS for frontend.
A modern, responsive, and interactive Joke Generator built with React. Fetches random jokes from the Official Joke API and displays them with a premium glassmorphic UI, animations, and vibrant gradients.
- Random jokes fetched in real-time from the API
- Glassmorphic card design with soft blur and shadows
- Animated emoji reactions floating in the background
- Gradient heading and glowing, animated button
- Loading spinner for smooth transitions
- Toast notification when a new joke is loaded
- Fully responsive and works beautifully on mobile and desktop
![Joke Generator Screenshot]
- Clone the repository:
git clone https://github.com/Nikitaa104/Joke-API.git
Navigate to the project directory:
bash
Copy code
cd Joke-API
Install dependencies:
bash
Copy code
npm install
Start the development server:
bash
Copy code
npm start
Open http://localhost:3000 to view it in the browser.
📁 Project Structure
bash
Copy code
src/
├─ Joke.jsx # Main Joke component
├─ Joke.css # Styles for Joke component
├─ index.js # React entry point
└─ App.js # Main App
💡 How It Works
On page load, Joke.jsx fetches a random joke from the API.
The joke is displayed inside a glassmorphic card with animated emojis and gradients.
Clicking the "Tell me another joke" button fetches a new joke with smooth fade-in animation.
A toast notification briefly shows when a new joke is loaded.
Users can enjoy interactive emoji reactions for fun.
⚡ Technologies Used
React.js – Component-based frontend framework
CSS3 – Animations, gradients, glassmorphism
Official Joke API – Random jokes source
✨ Future Enhancements
Add a dark mode toggle for night-friendly viewing
Copy joke button to copy text to clipboard
Auto-refresh joke every few seconds with smooth transitions
Add sound effects when generating a new joke
Made with ❤️ by Nikita Pandey.