Capstone: an event availability board

1<h1>Workshop seats</h1>
2<button id="refresh" type="button">Refresh availability</button>
3<p id="availability" role="status">Choose refresh to check seats.</p>
4<script src="board.js" defer></script>

.open { color: #126245; }
.full { color: #9b2727; }
#availability { font-weight: 700; }

1const status = document.querySelector("#availability");
2document.querySelector("#refresh").addEventListener("click", async () => {
3  status.textContent = "Checking…";
4  try {
5    const response = await fetch("/api/seats");
6    if (!response.ok) throw new Error("HTTP " + response.status);
7    const data = await response.json();
8    status.textContent = data.seats > 0 ? data.seats + " seats open" : "Fully booked";
9    status.classList.toggle("open", data.seats > 0);
10    status.classList.toggle("full", data.seats === 0);
11  } catch { status.textContent = "Could not check seats. Try again."; }
12});