AI Watercooler Coding Lab

The Final Countdown

After Hours

10am Pacific  |  1pm Eastern  |  1700 UTC  |  6pm UK  |  7pm Central Europe

On Friday August 14th our AI Watercooler session will be holding an AI Coding lab that will show you the basics, and we’ll build a web page that shows a countdown clock that you can use with OBS or other software to bring the countdown into online meetings and streams. We’ll then each customise it to our liking and share tips on AI coding along the way.

Prerequisites to code with us

Accounts

  • A ChatGPT or Claude account ($20 tier or higher)
  • A free GitHub account

To join in with the lab and create your own app, you’ll need either a Chat GPT or Claude account. The $20/plans are sufficient to get you started and you can cancel before the second month if you like.

You’ll also need a GitHub account, which is free. Creating this in advance will save time during the lab. No prior knowledge is needed, although there is a four minute video at https://www.youtube.com/watch?v=e9lnsKot_SQ that will take you through the basics.

Complete these steps before the lab. If you have issues with this, pop into After Hours and ask for help

Installations

For Mac

Homebrew — Makes installing command-line tools on macOS easier
Terminal:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Git — Version control for communicating with GitHub
Terminal (Homebrew):

brew install git

Claude Code — Install Claude Code
Terminal:

curl -fsSL https://claude.ai/install.sh | bash

GitHub CLI — This will make authenticating with GitHub easier
Terminal (Homebrew):

brew install gh
For Windows

Git — Version control for communicating with GitHub
Command Prompt:

winget install --id Git.Git -e --source winget

Claude Code — Install Claude Code
Launch Command Prompt as an Administrator
Install Claude Code:

curl -fsSL https://claude.ai/install.cmd -o install.cmd && install.cmd && del install.cmd

Update PATH:

setx PATH "%PATH%;%USERPROFILE%\.local\bin"

Restart Command Prompt to load new PATH

GitHub CLI — This will make authenticating with GitHub easier
Command Prompt:

winget install --id GitHub.cli

Here is the text to paste into your AI coding agent to get started :


Create a single file called index.html containing a complete broadcast countdown timer for use as an OBS browser source, with all HTML, CSS and JavaScript in that one file and no external libraries.

Layout: the top of the page is a fixed stage exactly 1920 pixels wide and 1080 pixels tall with a fully transparent background. This stage is what OBS will capture. Centred on the stage, show a very large countdown timer in MM:SS format (switch to H:MM:SS if an hour or more remains) using bold tabular figures with a subtle dark outline or drop shadow so it stays readable over video. Directly below the 1080-pixel line, add an operator control panel on a dark visible background — this area sits outside the OBS crop and is only seen by the operator in a normal browser or the OBS Interact window. Label the boundary clearly with a thin line and the caption "OBS crop line: nothing below this is broadcast".

Controls, in the panel: number inputs for starting minutes and seconds; Start, Pause and Reset buttons; quick preset buttons for 5, 10 and 15 minutes; +1 min and −1 min buttons that adjust the time even while running; and a toggle button that switches the stage background between transparent and a grey checkerboard for previewing transparency.

Behaviour: the timer must be drift-free — compute remaining time from a target end timestamp rather than decrementing a counter, so it stays accurate over long runs. While more than 60 seconds remain the digits are white; at 60 seconds or less they turn amber; at 10 seconds or less they turn red. When the timer reaches 00:00 it stops and the digits change to a muted grey. Reset returns to the value in the number inputs and restores the white colour. Pause freezes the remaining time exactly; Start resumes from it. Guard against invalid input (negative numbers, blank fields) by treating them as zero.

Keep the code clearly commented so a beginner can ask follow-up questions about how each part works.