{{ drag.item.label }}
Slide to add hours

Start at {{ formatTime(s1.startH, 0) }}. Go forward {{ s1.diffH }} hours.

Start
{{ formatTime(s1.startH, 0) }}
Target
{{ formatTime(s1.startH + s1.val, 0) }}
+0 hr +{{s1.maxH}} hr
Tap to add minutes

Start at {{ formatTime(s2.h, s2.startM) }}. Jump to {{ formatTime(s2.h, s2.targetM) }}.

{{ formatTime(s2.h, s2.currentM) }}
{{ formatTime(s2.h, s2.startM) }}
{{ formatTime(s2.h, s2.targetM) }}
🐸
Drag to build time

How much time passes from {{ formatTime(s3.startH, s3.startM) }} to {{ formatTime(s3.endH, s3.endM) }}?

{{ block.label }}
Drop here to build the bridge
{{ item.label }}
Total Built
{{ s3TotalBuilt.h }} hr {{ s3TotalBuilt.m }} min
Fill to find end time

A movie starts at {{ formatTime(s4.startH, s4.startM) }}. It lasts {{ Math.floor(s4.duration / 60) }} hr {{ s4.duration % 60 }} min. Fill the timeline to see when it ends!

{{ formatTime(s4.startH, s4.startM) }} +1 hr +2 hr
Ends at {{ formatTime(s4.currentEnd.h, s4.currentEnd.m) }}
🏆

Time Master!

You've conquered elapsed time.