JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
    <meta charset="UTF-8">
    <title>PIXNET API 練習 - 版本2</title>
</head>
<body>
    <h2>PIXNET 熱門文章（分類 23：美容彩妝）</h2>

    <label>請輸入頁碼：
        <input type="number" id="pageInput" value="1" min="1">
    </label>
    <button id="loadBtn">載入資料</button>

    <hr>

    <div id="result"></div>

    <script>
        // 取得 DOM 元素
        var loadBtn = document.getElementById("loadBtn");
        var resultDiv = document.getElementById("result");
        var pageInput = document.getElementById("pageInput");

        // 綁定按鈕事件
        loadBtn.addEventListener("click", function () {
            var page = pageInput.value;

            // 拼出 API URL（不使用模板字串）
            var url = "https://emma.pixnet.cc/mainpage/blog/categories/hot/23"
                + "?page=" + page
                + "&per_page=10"
                + "&api_version=2"
                + "&format=json";

            fetch(url)
                .then(function (response) {
                    return response.json();
                })
                .then(function (data) {
                    // 清空結果
                    resultDiv.innerHTML = "";

                    if (!data.articles || data.articles.length === 0) {
                        resultDiv.innerHTML = "查無資料！";
                        return;
                    }

                    // 建立列表
                    var ul = document.createElement("ul");

                    for (var i = 0; i < data.articles.length; i++) {
                        var item = data.articles[i];

                        var li = document.createElement("li");
                        li.innerHTML =
                            "標題：" + item.title + "<br>" +
                            "作者：" + item.user.name + "<br>" +
                            "<a href='" + item.link + "' target='_blank'>前往文章</a><br><br>";

                        ul.appendChild(li);
                   ...