生成AI+スマホで作成「WordPress(ブログ)で使えるJavaScript」 元号・西暦変換（経過年数付き）

<div class="container">
    <h2>元号 → 西暦 変換</h2>
    
    <label>元号を選択</label>
    <select id="gengo">
        <option value="2018">令和</option>
        <option value="1988">平成</option>
        <option value="1925">昭和</option>
        <option value="1911">大正</option>
        <option value="1867">明治</option>
    </select>

    <label>年を入力</label>
    <input type="number" id="year" value="1" min="1">

    <div class="result-box">
        <span class="seireki-output" id="outputSeireki">西暦 2019 年</span>
        <span class="diff-output" id="outputDiff">今から 7 年前</span>
    </div>
</div>

    const gengoSelect = document.getElementById('gengo');
    const yearInput = document.getElementById('year');
    const outputSeireki = document.getElementById('outputSeireki');
    const outputDiff = document.getElementById('outputDiff');

    function update() {
        const currentYear = new Date().getFullYear(); // 現在の年
        const baseYear = parseInt(gengoSelect.value);
        const inputYear = parseInt(yearInput.value);

        if (!isNaN(inputYear) && inputYear > 0) {
            const targetYear = baseYear + inputYear;
            outputSeireki.textContent = `西暦 ${targetYear} 年`;

            // 経過年数の計算
            const diff = currentYear - targetYear;

            if (diff > 0) {
                outputDiff.textContent = `今から ${diff} 年前`;
                outputDiff.style.color = "#555";
            } else if (diff < 0) {
                outputDiff.textContent = `今から ${Math.abs(diff)} 年後`;
                outputDiff.style.color = "#e67e22"; // 未来はオレンジ
            } else {
            } else {
                outputDiff.textContent = "今年は、この年です";
                outputDiff.style.color = "#27ae60"; // 今年は緑
            }
        } else {
            outputSeireki.textContent = "---";
            outputDiff.textContent = "正しい年を入力してください";
        }
    }

    gengoSelect.addEventListener('change', update);
    yearInput.addEventListener('input', update);

    // 初期表示
    update();             

    select, input { padding: 12px; margin: 8px 0 10px 0; width: 100%; box-sizing: border-box; border: 1px solid #ddd; border-radius: 6px; font-size: 1rem; }
    .result-box { background: #e7f3ff; padding: 10px; border-radius: 8px; text-align: center; }
    .seireki-output { display: block; font-size: 1.5rem; font-weight: bold; color: #007bff; }
    .diff-output { display: block;  }