GUI 4 - Timer

src/routes/+layout.svelte

@@ -20,6 +20,7 @@
       <li><a href="/1_counter">1. Counter</a></li>
       <li><a href="/2_temperature_converter">2. Temperature Converter</a></li>
       <li><a href="/3_flight_broker">3. Flight Broker</a></li>
+      <li><a href="/4_timer">4. Timer</a></li>
     </ul>
   </div>
 </div>

src/routes/4_timer/+page.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+
+  let duration = $state(300);
+  let elapsed = $state(0);
+  let elapsedSec = $derived((Math.min(elapsed, duration) / 10).toFixed(1));
+
+  onMount(() => {
+    const interval = setInterval(() => {
+      if (elapsed < duration) elapsed++;
+    }, 100);
+    return () => {
+      clearInterval(interval);
+    };
+  });
+</script>
+
+<div class="card card-border shadow-xl w-96 mx-auto">
+  <div class="card-body">
+    <h2 class="card-title">4. Timer</h2>
+    <div class="grid grid-cols-[min-content_auto] gap-2">
+      <p class="text-nowrap">Elapsed Time:</p>
+      <progress class="progress my-1 h-auto" value={elapsed} max={duration}></progress>
+      <p class="col-span-2">{elapsedSec}s</p>
+      <p>Duration:</p>
+      <input type="range" class="range range-xs" min="0" max="300" bind:value={duration}/>
+    </div>
+    <div class="card-actions">
+      <button class="btn btn-block btn-sm">Reset</button>
+    </div>
+  </div>
+</div>