Googleサイトで動く長距離走記録をGPTで作成しました。

修正命令を都度出しながら希望の物が作成できた。

WordPressだとCSSが邪魔してうまく機能しない・・・・

なんて素晴らしいものを作成したんだろうと自画自賛したい。

疲れたからここらで終わりにしよう

ドラクエの曲は素晴らしい。

懐古主義といえるかもしれないけど、心に残ったものはそう変わらない・・・・

https://music.youtube.com/watch?v=oMdgFrpwto0&si=U_I_w3wds7feh5SE

<style>
body { font-family: sans-serif; padding: 20px; }<br />
h1 { text-align: center; }<br />
#controls { text-align: center; margin-bottom: 20px; }<br />
button { font-size: 16px; margin: 0 5px; padding: 5px 10px; }<br />
#timer { font-size: 32px; margin-top: 10px; text-align: center; }<br />
table { width: 100%; border-collapse: collapse; margin-top: 20px; }<br />
th, td { border: 1px solid #ccc; padding: 8px; text-align: center; }<br />
th { background: #eee; }<br />
</style>

&nbsp;
<h1>長距離走タイム記録（分:秒表示・逆順）</h1>
<div id=”controls”><button id=”startBtn”>スタート</button>
<button id=”recordBtn” disabled=”disabled”>記録</button>
<button id=”exportBtn”>CSV出力</button>
<div id=”timer”>00分00秒</div>
</div>
<table id=”results”>
<thead>
<tr>
<th>順位</th>
<th>タイム</th>
</tr>
</thead>
</table>
<script>
let startTime, timerInterval;
const timerDisplay = document.getElementById(‘timer’);
const startBtn = document.getElementById(‘startBtn’);
const recordBtn = document.getElementById(‘recordBtn’);
const exportBtn = document.getElementById(‘exportBtn’);
const tbody = document.querySelector(‘#results tbody’);
let records = [];

function formatTime(ms) {
const totalSec = Math.floor(ms / 1000);
const sec = String(totalSec % 60).padStart(2, ‘0’);
const min = String(Math.floor(totalSec / 60)).padStart(2, ‘0’);
return `${min}分${sec}秒`;
}

startBtn.addEventListener(‘click’, () => {
clearInterval(timerInterval);
startTime = performance.now();
timerDisplay.textContent = ’00分00秒’;
recordBtn.disabled = false;
timerInterval = setInterval(() => {
const elapsed = performance.now() – startTime;
timerDisplay.textContent = formatTime(elapsed);
}, 1000);
});

recordBtn.addEventListener(‘click’, () => {
const elapsed = performance.now() – startTime;
records.push(elapsed);
updateTable();
});

function updateTable() {
const sorted = records.slice().sort((a, b) => b – a);
tbody.innerHTML = ”;
sorted.forEach((ms, i) => {
const tr = document.createElement(‘tr’);
const rank = sorted.length – i;
tr.innerHTML = `</p>
<td>${rank}</td>
<td>${formatTime(ms)}</td>
<p>`;
tbody.appendChild(tr);
});
}

exportBtn.addEventListener(‘click’, () => {
const sorted = records.slice().sort((a, b) => b – a);
const csvRows = [[‘順位’,’タイム’]];
sorted.forEach((ms, i) => {
const rank = sorted.length – i;
csvRows.push([rank, formatTime(ms)]);
});
const csv = csvRows.map(r => r.join(‘,’)).join(‘\r\n’);
// UTF-8 BOM を付加して Excel の文字化けを防止
const bom = ‘\uFEFF’;
const blob = new Blob([bom + csv], { type: ‘text/csv;charset=utf-8;’ });
const url = URL.createObjectURL(blob);
const a = document.createElement(‘a’);
a.href = url; a.download = ‘results.csv’; a.click();
URL.revokeObjectURL(url);
});
</script>