JSFiddle - React, Tailwind, and code Playground

by Rich Bragg

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.blockUI/2.70.0-2014.11.23/jquery.blockUI.min.js"></script>
<nav class="navbar front-navbar" role="navigation">
  <div class="container container-fluid">
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="front-navigation">
      <ul class="nav navbar-nav navbar-right front-navigation-links">
        <li><a href="/about">About</a></li>
        <li role="presentation" class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button"
             aria-haspopup="true" aria-expanded="false">
            Players <span class="caret"></span>
          </a>
          <ul class="dropdown-menu">
            <li><a href="/how-to-play">How to Play</a></li>
            <li><a href="/faq#playing-hunts">FAQ</a></li>
          </ul>
        </li>
        <li role="presentation" class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button"
             aria-haspopup="true" aria-expanded="false">
            Creators <span class="caret"></span>
          </a>
          <ul class="dropdown-menu">
            <li><a href="/creators">How to Create</a></li>
            <li><a href="/tutorials">Tutorials</a></li>
            <li><a href="/best-practices">Best Practices</a></li>
            <li><a href="/hunt-review-guidelines">Hunt Review Guidelines</a></li>
            <li><a href="/faq#creating-hunts">FAQ</a></li>
          </ul>
        </li>
        <li><a href="/find/" class="front-btn-find" role="button">Find Hunts</a></li>
        
          <li><a href="/play/" class="front-btn-play" role="button">My Hunts</a></li>
          <li><a href="/create/" class="front-btn-create" role="button">Create</a></li>
...

JavaScript

// JS timing data
window.startTime = Date.now();

window.onerror = function(message, url, linenumber) {
  var errorMessage = "" + message + " on line " + linenumber + " for " + url;
  console.log(errorMessage);
  alert("JavaScript Error: " + errorMessage);
};

// Dynamic form updates

function setupVideoPopups(parent) {
  $(parent).find(".modal-video").on("hide.bs.modal", function (event) {
    var player = $(event.target).find("iframe");
    var videoSrc = player.prop("src");
    player.prop("src", "");  // forces the video to stop when the modal is closed
    player.prop("src", videoSrc);
  });
}

function transitionModals(startSelector, finishSelector) {
  $(startSelector).modal("hide").on("hidden.bs.modal", function (e) {
    $(finishSelector).modal("show");
    $(this).off("hidden.bs.modal");
  });
}

function showSpinner(label) {
  label = label || "";
  $.blockUI({
    message: "<div class='throbber-loader' style='margin-top: 25px;'></div><h3>" + label + "</h3>",
    css: {
      border: "none",
      padding: "15px",
      backgroundColor: "#000",
      "-webkit-border-radius": "10px",
      "-moz-border-radius": "10px",
      opacity: .75,
      color: "#ddd"
    }
  });
}

function hideSpinner() {
  $.unblockUI();
}

$(document).ready(function() {
  setupVideoPopups(document);
  console.log("Page loaded: " + (Date.now() - startTime) + " ms");
  alert("Page loaded!");
});