JSFiddle - React, Tailwind, and code Playground

by Łukasz Bącik

HTML

<div class="buttons">
      <button id="wibruj" class="button">Wibruj raz</button>
      <button id="wibruj2" class="button">Wibruj 5 razy</button>
      <button id="koniec" class="button">Stop</button>
    </div>

CSS

.buttons
{
    text-align: center;
}
.button
{
    padding: 0.7em;
    margin: 1em auto;
}

JavaScript

window.navigator = window.navigator || {};
      if (navigator.vibrate === undefined) {
          ['wibruj', 'wibruj2', 'koniec'].forEach(function(elementId) {
            document.getElementById(elementId).setAttribute('disabled', 'disabled');
          });
      } else {
          document.getElementById('wibruj').addEventListener('click', function() {
            navigator.vibrate(1000);
          });
          document.getElementById('wibruj2').addEventListener('click', function() {
            navigator.vibrate([1000, 500, 1000, 500, 2000]);
          });
          document.getElementById('koniec').addEventListener('click', function() {
            navigator.vibrate(0);
          });
      }