JSFiddle - React, Tailwind, and code Playground

by awesomespaceman

HTML

<!DOCTYPE html>
<head>
<title>Remember me?</title>
<style>
#square
{
  position: absolute;
  left: 0;
  top: 100px;
  width: 100px;
  height: 100px;
  border: 1px solid #333;
  background-color: #ffff00;
}
div p
{
  margin: 10px;
}
</style>
<script>

  // found at http://www.netlobo.com/url_query_string_javascript.html
  function getQueryParam( name ) {
        name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
        var regexS = "[\\?&]"+name+"=([^&#]*)";
        var regex = new RegExp( regexS );
        var results = regex.exec( window.location.href );
        if( results == null )
           return null;
        else
           return results[1];
   }

   window.onload=function() {

      // set up button
      document.getElementById("move").onclick=moveSquare;
      document.getElementById("size").onclick=resizeSquare;
      document.getElementById("color").onclick=changeColor;

      var move = getQueryParam("move");
      if (!move) return;

      var size = getQueryParam("size");
      var color = getQueryParam("color");

      // update element
      var square = document.getElementById("square");
      square.style.left=move + "px";
      square.style.height=size + "px";
      square.style.width=size + "px";
      square.style.backgroundColor="#" + color;

      // update data-state values
      document.getElementById("move").setAttribute("data-state",move);
      document.getElementById("size").setAttribute("data-state",size);
      document.getElementById("color").setAttribute("data-state",color);
   }

   function updateURL () {
      var move = document.getElementById("move").getAttribute("data-state");
      var color = document.getElementById("color").getAttribute("data-state");
      var size = document.getElementById("size").getAttribute("data-state");

      var link = document.getElementById("link");
      var path = location.protocol + "//" + location.hostname + location.pathname +
                "?move=" + move + "&size=" + size...