A simple web application that fetches and displays jokes from a public API. This project demonstrates basic HTML, CSS, and JavaScript skills, including making API requests and responsive design.
The Joke Generator allows users to click a button to retrieve and display a random joke. The application features a clean and responsive design with a gradient background and a stylish card for displaying jokes.
- Random Joke Generation: Fetches a random joke from a public API.
- Responsive Design: Adapts to different screen sizes using media queries.
- User-Friendly Interface: Simple and intuitive interface for easy joke generation.
You can view a live demo of the project here.
- HTML
- CSS
- JavaScript
- Fetch API
-
Clone the Repository
git clone https://github.com/Rajput-vinay/joke-generator.git cd joke-generator -
Open the Project
Open the index.html file in your preferred web browser.
- Open the
index.htmlfile in your web browser. - Click the "Generate Joke" button to fetch and display a random joke.
- HTML: Structures the page with a title, a display area for the joke, and a button for generating jokes.
- CSS: Styles the page with a linear gradient background, a card with a clean design, and responsive adjustments.
- JavaScript: Fetches a joke from the API and updates the page content.
- Tablets (
max-width: 768px): Adjusts button font size and padding, and reduces display font size. - Mobile Devices (
max-width: 480px): Further reduces button font size and padding, and adjusts card padding and width.
- Fork the repository.
- Create a new branch (
git checkout -b feature/YourFeature). - Make your changes.
- Commit your changes (
git commit -am 'Add new feature'). - Push to the branch (
git push origin feature/YourFeature). - Create a new Pull Request.
This project is licensed under the MIT License. See the LICENSE file for details.
For any questions or inquiries, please contact:
- Name: Vinay Rajput
- Email: vinayrajput2004vr@gmail.com
- LinkedIn: Vinay Rajput