alienzhou/esm.sh-simple-example.html Secret

## esm.sh-simple-example.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ESM.sh example</title>
    <style>
        main {
            display: flex;
        }

        main > div {
            border-right: 1px solid;
            padding: 30px;
        }
    </style>
</head>

<body>
    <main>
        <div>
            <h2>ESM.sh v82</h2>
            <canvas id="ca1" style="height: 500px; width: 500px"></canvas>
            <button id="btn1">using v82</button>
        </div>
        <div>
            <h2>ESM.sh v83</h2>
            <canvas id="ca2" style="height: 500px; width: 500px"></canvas>
            <button id="btn2">using v83</button>
        </div>
    </main>
    <script type="module">
        import confetti1 from 'https://esm.sh/v82/canvas-confetti@1.5.1/es2022/canvas-confetti.development.js';
        const myConfetti1 = confetti1.create(document.getElementById('ca1'), {
            resize: true,
            useWorker: true,
        });

        document.getElementById('btn1').addEventListener('click', () => {
            myConfetti1({
                particleCount: 1000,
                spread: 160,
            });
        });
    </script>

    <script type="module">
        import confetti2 from 'https://esm.sh/v83/canvas-confetti@1.5.1/es2022/canvas-confetti.development.js';
        const myConfetti2 = confetti2.create(document.getElementById('ca2'), {
            resize: true,
            useWorker: true,
        });

        document.getElementById('btn2').addEventListener('click', () => {
            myConfetti2({
                particleCount: 1000,
                spread: 160,
            });
        });
    </script>
</body>

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

	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>ESM.sh example</title>
	<style>
	main {
	display: flex;
	}

	main > div {
	border-right: 1px solid;
	padding: 30px;
	}
	</style>
	</head>

	<body>
	<main>
	<div>
	<h2>ESM.sh v82</h2>
	<canvas id="ca1" style="height: 500px; width: 500px"></canvas>
	<button id="btn1">using v82</button>
	</div>
	<div>
	<h2>ESM.sh v83</h2>
	<canvas id="ca2" style="height: 500px; width: 500px"></canvas>
	<button id="btn2">using v83</button>
	</div>
	</main>
	<script type="module">
	import confetti1 from 'https://esm.sh/v82/canvas-confetti@1.5.1/es2022/canvas-confetti.development.js';
	const myConfetti1 = confetti1.create(document.getElementById('ca1'), {
	resize: true,
	useWorker: true,
	});

	document.getElementById('btn1').addEventListener('click', () => {
	myConfetti1({
	particleCount: 1000,
	spread: 160,
	});
	});
	</script>

	<script type="module">
	import confetti2 from 'https://esm.sh/v83/canvas-confetti@1.5.1/es2022/canvas-confetti.development.js';
	const myConfetti2 = confetti2.create(document.getElementById('ca2'), {
	resize: true,
	useWorker: true,
	});

	document.getElementById('btn2').addEventListener('click', () => {
	myConfetti2({
	particleCount: 1000,
	spread: 160,
	});
	});
	</script>
	</body>

	</html>