day30/22.html at main · githubber-me/day30 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Random Joke Generator</title>
</head>
<body>
    <h1>Random Joke Generator</h1>
    <button onclick="generateJoke()">Generate Joke</button>
    <p id="joke"></p>

    <script>
        async function generateJoke() {
            const response = await fetch('https://official-joke-api.appspot.com/jokes/random');
            const data = await response.json();
            const jokeElement = document.getElementById('joke');
            jokeElement.textContent = data.setup + ' ' + data.punchline;
        }
    </script>
</body>
</html>