Clock without variable binding

This example uses a JavaScript expression in an action value to create a mobile-friendly interactive clock.

The syntax for inserting an expression is: {= javascript expression}. An expression is simply the right-hand side of an equation in JavaScript, which, in this case brings back a string containing the local time for rendering (or in other words, drawing).

There are explanatory notes for this clock further down the page.

Clock without variable binding

• The draw event on #clock2 is a special Cause event. Draw events are triggered when an element is first drawn on the page. In this example, we put a CSS selector before it as we also trigger it later on in the code to simulate a ticking action.
• trigger runs the specified event on the same element. In this example, the draw event is run on the element #clock2.

Same example but with explanatory comments:

body:not(.clockOff) #clock:draw {    /* Run every 1s after #clock element is drawn if clockOff class is not in body tag. */
    render: {= new Date().toLocaleTimeString() =};    /* Draw the time. */
    trigger: draw after 1s;    /* Run this event again after one second to keep the clock ticking. */
}

#clock:touchstart, #clock:mousedown {	/* Runs when you mousedown or touch the clock. */
	add-class: .clockPress;    /* Put press styling on the clock. */
    prevent-default: true;    /* Needed for the touch event to work consistently on mobile. */
}

#clock:touchend, #clock:mouseup {    /* Runs when you come up from touching or mouse-up on the clock. */
	body {
		toggle-class: .clockOff;    /* Add or remove the clockOff class and styling from the body tag. */
	}
	remove-class: .clockPress;    /* Remove the press styling on the clock. */
	trigger: draw after stack;    /* Run the draw event on the clock element after the other actions are done. */
    prevent-default: true;    /* Needed for the touch event to work consistently on mobile. */
}

Note that you can also use JavaScript expressions in target selectors, conditionals and inside components.