I spent the afternoon putting together a little web application to play a distributed election night bingo with friends tomorrow.

A bingo grid with General Election themed entries like “Canada 1993”, “Sunderland declares”, and “Rishi Sunak loses seat”

An example bingo card

It’s entirely static, all HTML, JavaScript, and CSS, with no pre-processors or build pipelines or similar, which is why it was a fun project and not a slog through flavour-of-the-month tooling. It even has a dark mode, because people seem to care a lot about that.

I used all the modern CSS tricks that work almost everywhere, except possibly on old iPhones. (You can take that up with Tim Apple.)

Each board has a random seed, which is part of the URL, and the current state of selections is stored after the #. This means that if you reload, you get the same board.

Here’s the page: GE 2024 Bingo.

The source code should be straightforward to adapt to other events.

I regret that it’s not accessible to anyone using a screen reader, and I don’t really have a good idea of what I’d need to do to make the visual matrix of a bingo grid comprehensible. Do you have any ideas? I’d love to hear them.