Abhishek Gurjar

Posted on Sep 8

Building a Joke Generator Using React

#react #css #javascript #jokegenerator

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.

Code Explanation

Joke Component

The Joke component is responsible for fetching a joke from the API and updating the component's state to display the joke. It uses React's useState hook to manage the joke state and the fetchJoke function to retrieve the data from the API.

import { useState } from "react";

const Joke = () => {
  const [joke, setJoke] = useState("");

  const fetchJoke = () => {
    fetch("https://v2.jokeapi.dev/joke/Any?type=single")
      .then((response) => response.json())
      .then((data) => setJoke(data.joke));
  };

  return (
    <>
      <div className="joke-container">
        <div className="output">
          <p>{joke}</p>
        </div>
      </div>
      <button className="button" onClick={fetchJoke}>
        <p>Generate Joke</p>
      </button>
    </>
  );
};

export default Joke;

In this component, the useState hook is used to store the fetched joke. The fetchJoke function is triggered when the "Generate Joke" button is clicked, fetching a new joke from the API and updating the joke state with the result.

App Component

The App component handles the overall layout and renders the Joke component. It also includes a header and footer to enhance the look of the application.

import Joke from "./components/Joke";
import "./App.css";

const App = () => {
  return (
    <div className="app">
      <div className="header">
        <h1>Joke Generator</h1>
      </div>
      <Joke />
      <div className="footer">
        <p>Made with ❤️ by Abhishek Gurjar</p>
      </div>
    </div>
  );
};

export default App;

This component organizes the layout and adds a title (Joke Generator) and a footer that gives credit to the creator.

CSS Styling

The CSS styles ensure the layout is clean and responsive. The joke container is centered on the page, and the button is styled to give a modern look.

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  background-color: #ffff42;
  color: black;
}
.app {
  margin-top: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
.header {
  margin-bottom: 10px;
}
.joke-container {
  margin: 15px;
  width: 400px;
  height: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid black;
  background-color: #c2edf6;
  border-radius: 7px;
}
.output {
  width: 350px;
  font-size: 16px;
  font-weight: 500;
}
.button {
  width: 400px;
  background-color: #0075e1;
  border: none;
  color: white;
  font-size: 18px;
  cursor: pointer;
  border-radius: 10px;
}
.button:hover {
  background-color: #4086c8;
}
.footer {
  margin-top: 100px;
}

The .app class styles the main layout, .joke-container ensures the joke is displayed inside a bordered container, and .button provides styling for the joke generation button.

Installation and Usage

To get started with this project, clone the repository and install the dependencies:

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.

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.

DEV Community