<script src="/activecss-2-11-2.min.js"></script>

Basic clock with reactive variable

ACSS commands perform one after the other, like a regular language.

You can put CSS commands directly inside ACSS events, which this example demonstrates.

Code notes:
The special ACSS "draw" event is triggered when any element is first drawn on the page.
Dollar-prefixed variables contain raw Javascript expressions.
Variables used in CSS commands have single curly braces ("curlies").
$RANDHEXn is a special ACSS variable.
"Every" is the non-blocking ACSS equivalent of JS's "setInterval".
Here, when the "$clockTime" variable changes, the variable re-draws automatically.
The double curlies around $clockTime means "re-draw when the variable changes".
Only the content drawn in variable placeholders is updated, never the whole HTML tag.

Tic Tac Toe with human-like opponent

Components in ACSS are just blocks of HTML that can have scoped variables and events.

Here is an advanced demonstration of private components with custom elements.
There are two games displayed, each with privately scoped variables.

The computer opponent simulates a human, to make it more of a game.

Start by clicking on a square - you are X.
Run in fullscreen mode ("Go fullscreen" in the code editor.)

(As an aside, there is an amazing pure CSS version of AI Tic Tac Toe,
That CSS code is about 18KB minified. The ACSS used below is about 2KB and easier to read.
With ACSS, scalable UI using CSS syntax becomes an option.)

<script src="/activecss-2-11-2.min.js"></script>