All tags/Countdown

Upcoming events

The two largest units by default, a past= text for an event that has started, and the full moment in the title on hover.

1 The data countdown/events.php php

<?php

  // Events at moments counted from now - from half a minute ahead, so the words come out
  // round - and the page always has some to come.

  $events = [];
  $from   = padNow ()->modify ( '+30 seconds' );

  foreach ( [ 'Jazz in the park'   => '-2 days',
              'Pottery workshop'   => '+3 hours 20 minutes',
              'City half marathon' => '+4 days 6 hours',
              'Film night'         => '+26 days 2 hours',
              'New year concert'   => '+84 days 3 hours' ] as $name => $when )
    $events [] = [ 'name' => $name, 'starts' => $from->modify ( $when )->format ( 'Y-m-d H:i:s' ) ];

?>

2 The template countdown/events.pad pad

<ul style="list-style:none;margin:0;padding:0;min-width:24em">
  {events}
  <li style="display:flex;justify-content:space-between;gap:24px;padding:10px 0;border-bottom:1px solid rgba(128,128,128,.25)">
    <strong>{$name}</strong>
    <span style="opacity:.8">{countdown $starts, past='Sold out'}</span>
  </li>
  {/events}
</ul>

3 The result rendered on the server

Jazz in the park Sold out
Pottery workshop 3 hours, 20 minutes
City half marathon 4 days, 6 hours
Film night 26 days, 2 hours
New year concert 84 days, 3 hours