shritesh/alpine_stopwatch.html

## alpine_stopwatch.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Alpine Stopwatch</title>
    <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.js" defer></script>
</head>

<body>
    <div x-data="{
        start: null,
        current: null,
        stop: null,
        interval: null
    }">

        <button x-show="!start" @click="
            start = Date.now()
            current = start
            interval = setInterval(() => {current = Date.now()}, 100)
        ">Start</button>

        <div x-show="current">
            <button @click="
                current = null
                stop = Date.now()
                clearInterval(interval)
            ">Stop</button>
            <p><span x-text="(current - start) / 1000"></span> Seconds</p>
        </div>

        <div x-show="stop">
            <button @click="
                start = null
                stop = null
            ">Reset</button>
            <p><span x-text="(stop - start) / 1000"></span> Seconds</p>
        </div>
    </div>
</body>

</html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<title>Alpine Stopwatch</title>
	<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.js" defer></script>
	</head>

	<body>
	<div x-data="{
	start: null,
	current: null,
	stop: null,
	interval: null
	}">

	<button x-show="!start" @click="
	start = Date.now()
	current = start
	interval = setInterval(() => {current = Date.now()}, 100)
	">Start</button>

	<div x-show="current">
	<button @click="
	current = null
	stop = Date.now()
	clearInterval(interval)
	">Stop</button>
	<p><span x-text="(current - start) / 1000"></span> Seconds</p>
	</div>

	<div x-show="stop">
	<button @click="
	start = null
	stop = null
	">Reset</button>
	<p><span x-text="(stop - start) / 1000"></span> Seconds</p>
	</div>
	</div>
	</body>

	</html>