Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/abhishekgurjar-in/joke-generator
This Joke Generator fetches a random joke from an API and displays it on the screen when the user clicks a button. It has a clean and minimalistic user interface, making it simple to interact with. This project teaches how to integrate APIs and manage component states in React.
https://github.com/abhishekgurjar-in/joke-generator
api css javascript joke-generator jsx react web-development
Last synced: 3 months ago
JSON representation
This Joke Generator fetches a random joke from an API and displays it on the screen when the user clicks a button. It has a clean and minimalistic user interface, making it simple to interact with. This project teaches how to integrate APIs and manage component states in React.
- Host: GitHub
- URL: https://github.com/abhishekgurjar-in/joke-generator
- Owner: abhishekgurjar-in
- Created: 2024-09-08T16:12:02.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2024-09-13T05:36:59.000Z (4 months ago)
- Last Synced: 2024-09-29T06:22:52.778Z (3 months ago)
- Topics: api, css, javascript, joke-generator, jsx, react, web-development
- Language: JavaScript
- Homepage: https://joke-generator-in.netlify.app/
- Size: 48.8 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Joke Generator Website
## Introduction
In this tutorial, we will guide you through building a simple and fun Joke Generator using React. This project is perfect for beginners who want to practice handling API requests in React and managing state within functional components.
## Project Overview
This Joke Generator fetches a random joke from an API and displays it on the screen when the user clicks a button. It has a clean and minimalistic user interface, making it simple to interact with. This project teaches how to integrate APIs and manage component states in React.
## Features
- **Random Joke Generation**: Fetches a random joke from an API and displays it on the screen.
- **Responsive Design**: Adjusts to various screen sizes for a user-friendly experience.
- **Easy-to-Use Interface**: A single button to generate a new joke on each click.
## Technologies Used
- **React**: For building the user interface.
- **CSS**: For styling the application and ensuring responsive design.
- **Joke API**: To fetch random jokes from the web.
## Project Structure
The project is structured as follows:
```
├── public
├── src
│ ├── components
│ │ └── Joke.jsx
│ ├── App.jsx
│ ├── App.css
│ ├── index.js
│ └── index.css
├── package.json
└── README.md
```
### Key Components
- **Joke.jsx**: Contains the logic for fetching and displaying jokes.
- **App.jsx**: Wraps the Joke component and handles the overall layout of the application.
- **App.css**: Provides styling for the app and the components.
## Installation and Usage
To get started with this project, clone the repository and install the dependencies:
```bash
git clone https://github.com/abhishekgurjar-in/joke-generator.git
cd joke-generator
npm install
npm start
```
This will start the development server, and the application will be running at `http://localhost:3000`.
## Live Demo
You can check out the live demo of the Joke Generator [here](https://joke-generator-in.netlify.app/).
## Screenshots
## Conclusion
This simple Joke Generator project is a great way to practice React fundamentals, including state management and API requests. It also serves as an example of how to create interactive web applications with minimal code.
## Credits
- **Inspiration**: The project is inspired by online joke generators and API-based projects.
### Author
**Abhishek Gurjar** is a web developer passionate about building interactive and responsive web applications. You can follow his work on [GitHub](https://github.com/abhishekgurjar-in).