JSFiddle - React, Tailwind, and code Playground

by PiereDome

HTML

<h1><u>Device Orientation</u></h1>
<p>Alpha<input type='text' id='x' /></p>
<p>Beta<input type='text' id='y' /></p>
<p>Gamma<input type='text' id='z' /></p>
<br/>
<h1><u>Device Motion</u></h1>
<p>Acceleration X<input type='text' id='x1' /></p>
<p>Acceleration Y<input type='text' id='y1' /></p>
<p>Acceleration Z<input type='text' id='z1' /></p>
<br/>
<h1>Rotation</h1>
<p>Alpha<input type='text' id='alpha' /></p>
<p>Beta<input type='text' id='beta' /></p>
<p>Gamma<input type='text' id='gamma' /></p>
<p>Interval<input type='text' id='interval' /></p>

<p>Latitude<input type='text' id='latitude' /></p>
<p>Longitude<input type='text' id='longitude' /></p>

JavaScript

var x = document.getElementById('x');
var y = document.getElementById('y');
var z = document.getElementById('z');
var x1 = document.getElementById('x1');
var y1 = document.getElementById('y1');
var z1 = document.getElementById('z1');
var interval = document.getElementById('interval');
var alpha = document.getElementById('alpha');
var beta = document.getElementById('beta');
var gamma = document.getElementById('gamma');
var latitude = document.getElementById('latitude');
var longitude = document.getElementById('longitude');

window.ondeviceorientation = function(e) {
    x.value = parseInt(e.alpha);
    y.value = parseInt(e.beta);
    z.value = parseInt(e.gamma);
};

window.addEventListener("devicemotion", function(event) {
    // Process event.acceleration, event.accelerationIncludingGravity,
    // event.rotationRate and event.interval
    x1.value = Math.round(event.acceleration.x);
    y1.value = Math.round(event.acceleration.y);
    z1.value = Math.round(event.acceleration.z);
    alpha.value = Math.round(event.rotationRate.alpha);
    beta.value = Math.round(event.rotationRate.beta);
    gamma.value = Math.round(event.rotationRate.gamma);
    interval.value = event.interval;
}, true);

function showPosition(position){
latitude.value = position.coords.longitude;
longitude.value = position.coords.latitude;
}

function errorHandler(err){
alert(err);
}

var options = {timeout:60000};
navigator.geolocation.getCurrentPosition(showPosition, errorHandler, options);