32 lines
977 B
Svelte
32 lines
977 B
Svelte
<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> |