Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rajput-vinay/generatorautojoke
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.
https://github.com/rajput-vinay/generatorautojoke
api css html jokegenerator
Last synced: 5 days ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/rajput-vinay/generatorautojoke
- Owner: Rajput-vinay
- Created: 2024-08-23T19:20:25.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2024-08-23T19:45:38.000Z (3 months ago)
- Last Synced: 2024-08-23T21:04:20.677Z (3 months ago)
- Topics: api, css, html, jokegenerator
- Language: HTML
- Homepage: https://clinquant-fudge-871a5a.netlify.app/
- Size: 6.84 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Joke Generator
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.
## Project Overview
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.
## Features
- **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.
## Live Demo
You can view a live demo of the project [here](https://clinquant-fudge-871a5a.netlify.app/).
## Technologies Used
- HTML
- CSS
- JavaScript
- Fetch API
## Installation
1. **Clone the Repository**
```bash
git clone https://github.com/Rajput-vinay/joke-generator.git
cd joke-generator
2. **Open the Project**
```bash
Open the index.html file in your preferred web browser.
## Usage
1. Open the `index.html` file in your web browser.
2. Click the "Generate Joke" button to fetch and display a random joke.
## Code Explanation
- **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.
## Media Queries
- **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.
## Contributing
1. Fork the repository.
2. Create a new branch (`git checkout -b feature/YourFeature`).
3. Make your changes.
4. Commit your changes (`git commit -am 'Add new feature'`).
5. Push to the branch (`git push origin feature/YourFeature`).
6. Create a new Pull Request.
## License
This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.
## Contact
For any questions or inquiries, please contact:
- **Name**: Vinay Rajput
- **Email**: [email protected]
- **LinkedIn**: [Vinay Rajput](https://www.linkedin.com/in/vinay-rajput-984668227/)