JSFiddle - React, Tailwind, and code Playground

by Meir Gabay

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>Vibration API</title>
</head>

<body>
    <div align="center">
        <button class="btn" id="singleVibration">Single Vibration</button>
        <button class="btn" id="patternVibration">Pattern Vibration</button>
        <button class="btn" id="cancelVibration">Cancel Vibration</button>
    </div>
    <script src="./script.js"></script>
</body>

</html>

JavaScript

if (Boolean(window.navigator.vibrate)) {
	const singleVibration = document.getElementById("singleVibration");
	const patternVibration = document.getElementById("patternVibration");
	const cancelVibration = document.getElementById("cancelVibration");

	singleVibration.onclick = function (e) {
		window.navigator.vibrate(500);
	};

	patternVibration.onclick = function (e) {
		window.navigator.vibrate([500, 200, 800]);
	};

	cancelVibration.onclick = function (e) {
		window.navigator.vibrate(0);
	};
}