A P6 DOM clock

index.html

Time: <span id="clockDisplay"></span>

main.p6

my $document = EVAL(:lang<JavaScript>, 'return document');
my $window = EVAL(:lang<JavaScript>, 'return window');
my $clockDisplay = $document.getElementById('clockDisplay');
my $tick = 0;
$window.setInterval(-> {
  $tick++;
  while $clockDisplay<firstChild> {
    $clockDisplay.removeChild($clockDisplay<firstChild>);
  }
  $clockDisplay<style><color> = $tick % 2 ?? 'red' !! 'green';
  my $now = DateTime.now;
  $clockDisplay.appendChild($document.createTextNode(sprintf "%02d:%02d:%02d", $now.hour, $now.minute, $now.whole-second));
  CATCH {default {say $_.Str}}
}, 1000e0);