使用 React 构建笑话生成器

├── public
├── src
│   ├── components
│   │   └── joke.jsx
│   ├── app.jsx
│   ├── app.css
│   ├── index.js
│   └── index.css
├── package.json
└── readme.md

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;

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;

* {
  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;
}

git clone https://github.com/abhishekgurjar-in/joke-generator.git
cd joke-generator
npm install
npm start