Monster-Generator/Random_Monster_Generator.html at main · IllustratorDani/Monster-Generator · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="A random monster generator web page with stats along with the name.">
    <meta property="og:title" content="Monster List">
    <meta property="og:description" content="A random monster generator web page with stats along with the name.">
    <meta property="og:type" content="website">
    <meta property="og:url" content="">
    <meta property="og:image" content="">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="Monster List">
    <meta name="twitter:description" content="A random monster generator web page with stats along with the name.">
    <meta name="twitter:image" content="">
    <link rel="icon" href="favicon.ico">
    <link rel="stylesheet" href="monster.css">
    <title>Monster List</title>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>

<body>

    <main class="container">
        <h1>Random Monster Generator</h1>
        <div class="monster-result" id="monsterResult" tabindex="0" aria-live="polite"> </div>
        <button id="generateButton" aria-label="Generate a random monster">Generate Monster</button>
    </main>
    <br>
    <script>

        // Fetch a random monster from a random page (1-61) each time
        const TOTAL_PAGES = 61;

        const displayError = (message) => {
            document.getElementById("monsterResult").innerHTML = `<p>${message}</p>`;
        };

        const generateMonster = async () => {
            const randomPage = Math.floor(Math.random() * TOTAL_PAGES) + 1;
            const url = `https://api.open5e.com/monsters/?page=${randomPage}`;
            try {
                const response = await axios.get(url);
                const results = response.data.results;
                if (!results || results.length === 0) {
                    displayError("No monsters found on this page. Try again.");
                    return;
                }
                const randomIndex = Math.floor(Math.random() * results.length);
                const selectedMonster = results[randomIndex];
                document.getElementById("monsterResult").innerHTML = `
                    <h2>Monster: ${selectedMonster.name}</h2>
                    <div class="monster-stats">
                        <p><strong>Hit Points:</strong> ${selectedMonster.hit_points}</p>
                        <p><strong>Armor Class:</strong> ${selectedMonster.armor_class}</p>
                        <p><strong>Challenge Rating:</strong> ${selectedMonster.challenge_rating}</p>
                        <p><strong>Type:</strong> ${selectedMonster.type}</p>
                    </div>
                `;
            } catch (error) {
                console.error('Error fetching monster data:', error);
                displayError("Error fetching monster data. Please try again.");
            }
        };

        document.addEventListener("DOMContentLoaded", () => {
            document.getElementById("generateButton").addEventListener("click", generateMonster);
        });
    </script>
</body>

</html>