JSFiddle - React, Tailwind, and code Playground

by HYEONGJINKIM

HTML

<div id="text">initializing</div>
    <div id="compass">
      <div class="north">N</div>
      <div class="south"></div>
    </div>
    <div id="meta"></div>

CSS

#text {
        margin-top: 100px;
        text-align: center;
      }
      #compass {
        width: 200px;
        height: 200px;
        position: relative;
        margin: 20px auto 0 auto;
        border: 1px solid #ccc;
        border-radius: 100px;
      }
      .north, .south {
        position: absolute;
        left: 94px;
        width: 12px;
        height: 100px;
      }
      .north {
        top: 0;
        background: red;
        text-align: center;
        font-size: 11px;
      }
      .south {
        top: 100px;
        background: black;
      }
      #meta {
        margin-top: 20px;
        text-align: center;
      }

JavaScript

;(function(undefined) {
  "use strict";

  // Shortcut to check, that `variable` is not `undefined` or `null`.
  var defined = function (variable) {
    return (variable != null || variable != undefined);
  };

  // Fire `type` callbacks with `args`.
  var fire = function (type, args) {
    var callbacks = self._callbacks[type];
    for (var i = 0; i < callbacks.length; i++) {
      callbacks[i].apply(window, args);
    }
  };

  // Calculate average value for last 5 `array` items;
  var average5 = function (array) {
    var sum = 0;
    for (var i = array.length - 1; i > array.length - 6; i--) {
      sum += array[i];
    }
    return sum / 5;
  };

  // Compass.js allow you to get compass heading in JavaScript.
  // We can get compass data by two proprietary APIs and one hack:
  // * PhoneGap have `navigator.compass` API.
  // * iOS Safari add `webkitCompassHeading` to `deviceorientation` event.
  // * We can enable GPS and ask user to go forward. GPS will send
  //   current heading, so we can calculate difference between real North
  //   and zero in `deviceorientation` event. Next we use this difference
  //   to get compass heading only by device orientation.
  //
  // Hide compass, when there isn’t any method:
  //
  //   Compass.noSupport(function () {
  //     $('.compass').hide();
  //   });
  //
  // Show instructions for GPS hack:
  //
  //   Compass.needGPS(function () {
  //     $('.go-outside-message').show();
  //   }).needMove(function () {
  //     $('.go-outside-message').hide()
  //     $('.move-and-hold-ahead-message').show();
  //   }).init(function () {
  //     $('.move-and-hold-ahead-message').hide();
  //   });
  var self = window.Compass = {

    // Name of method to get compass heading. It will have value only after
    // library initialization from `init` method. So better way to get
    // method name is to use `init`:
    //
    //   Compass.init(function (method) {
    //     console.log('Compass by ' + method);
    //   });
   ...