HTMLでWEB API (Dog API)を呼び出す

## 面白いWEBAPIで何かできないだろうか。
ファイル1つで表現できて、WEBAPIも叩けるブラウザーの基本となるHTMLがある。
このHTML。JS、CSSも1つのファイルと書けるので非常に便利な優れものだ。

面白そうなAPIを見つけた。
```Dog API```
ランダムに犬の画像を返してくれるAPI

HTML + WEBAPI
で作ってみようか。

考えたのが、以下の構図だ(ﾟ∀ﾟ)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/951197/a1aacee3-628f-b5de-dd78-f12967a7c8e9.png)

(*・ω・)(*-ω-)(*・ω・)(*-ω-)ウンウン♪
図にすると分かりやすい！

AIの力も借りますか(・∀・)
ChatGPT も活用。

・HTMLでのWEBAPIを叩くものを出力してください
・良く見かけるいい感じのデザインを加えてください

とChatGPTで生成してもらった。
それにカスタマイズしたものが、以下のHTML

### HTML
```html
<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WEB APIを叩く</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 20px;
            text-align: center;
        }

        h1 {
            color: #333;
        }

        button {
            background-color: #4CAF50;
            /* 緑色 */
            color: white;
            /* 文字色 */
            padding: 15px 32px;
            /* 内側の余白 */
            border: none;
            /* ボーダーなし */
            border-radius: 5px;
            /* 角を丸く */
            font-size: 16px;
            /* フォントサイズ */
            cursor: pointer;
            /* マウスカーソルをポインタに */
            transition: background-color 0.3s;
            /* ホバー効果のトランジション */
        }

        button:hover {
            background-color: #45a049;
            /* ホバー時の色 */
        }

        h2 {
            margin-top: 30px;
            color: #555;
        }

        img {
            margin-top: 20px;
            border: 2px solid #ddd;
            /* 枠線 */
            border-radius: 5px;
            /* 角を丸く */
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
            /* 影 */
        }

        .quote {
            margin-top: 20px;
            font-size: 18px;
            color: #777;
        }
    </style>
</head>

<body>
    <h1>WEB APIを叩く</h1>
    <button onclick="callAPI()">APIを呼び出す</button>

    <h2>API の結果</h2>
    <img id="apiResult" src="" alt="犬の画像" width="500" height="300">
    <div id="quote" class="quote"></div> <!-- コメントを表示するための要素 -->

    <script>
        const dogQuotes = [
            "「この尻尾の巻き加減、どう？日本の美意識ってやつだよね」",
            "「脚が短いからさ、階段はちょっと…勘弁してほしいんだよね」",
            "「小さいって言うけど、気持ちは超ビッグだから！」",
            "「忠犬のイメージ？それ、ちょっと重荷になってきてるんだよね…」",
            "「モフモフしてるけど、たまに暑いんだよ。エアコン強めで頼む」",
            "「短足なだけで笑われるけど、これがかわいいって言われる時代なんだよ！」",
            "「水遊び大好きだけど、いっつも後でシャンプーされるんだよなぁ…」",
            "「このカット？流行ってるからしてるだけで、実は結構恥ずかしいんだ」",
            "「寒いとこが好きって言われるけど、夏はアイス必須で頼むよ」",
            "「おいしい匂いがすると、つい散歩のコースを勝手に変えちゃうんだよね」"
        ];

        async function callAPI() {
            const apiUrl = 'https://dog.ceo/api/breeds/image/random'; // API のURL

            try {
                // API の呼び出し
                const response = await fetch(apiUrl);
                if (!response.ok) throw new Error(`API 1 エラー: ${response.status}`);
                const data = await response.json();
                console.log(data);

                // 画像を表示
                document.getElementById('apiResult').src = data.message;

                // ランダムな犬の引用を表示
                const randomIndex = Math.floor(Math.random() * dogQuotes.length);
                document.getElementById('quote').innerText = dogQuotes[randomIndex];

            } catch (error) {
                console.error('エラーが発生しました:', error);
                alert(`エラー: ${error.message}`);
            }
        }
    </script>
</body>

</html>
```

### 実行結果
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/951197/45fcabd0-0037-9d89-9701-c50f316f27a3.png)

画像のコメントはChatGPTに出力してもらったものをランダムで出している。
ChatGPTスゲェ(; ･`д･´)

### 参考サイト
https://qiita.com/danishi/items/42d8adf6291515e62284