JSFiddle - React, Tailwind, and code Playground

by JInks Peng

HTML

<button id='move' data-state='0'>Move Square</button>
<button id='size' data-state='100'>Increase Square Size</button>
<button id='color' data-state='#ff0'>Change Color</button>
<div id='link'></div>
<div id='square'>
  <p>This is the object</p>
</div>

CSS

#square{
  position: absolute;
  left: 0;
  top: 100px;
  width: 100px;
  height: 100px;
  border:1px solid #333;
  background-color: #ff0;
}
div p{
  margin: 10px;
}

JavaScript

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() {
    document.getElementById('move').onclick = moveSquare;
    document.getElementById('size').onclick = resizeSquare;
    document.getElementById('color').onclick = changeColor;

    var move = getQueryParam('size');
    if(!move) return;
    var color = getQueryParam('color');
    var size = getQueryParam('size');

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

    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 size = document.getElementById('size').getAttribute('data-state');
    var color = document.getElementById('color').getAttribute('data-state');
    var link = document.getElementById('link');
    var path = location.protocol + '//' + location.hostname + location.pathname + 
    '?move=' + move + '&size=' + size + '&color=' + color;
    link.innerHTML = '<p><a href="' + path + '">static state link</a></p>';
  }
  function moveSquare() {
    var move = parseInt(document.getElementById('move').getAttribute('data-state'));
    move += 100;
    document.getElementById('square').style.left = move + 'px';
    document.getElementById('move').setAttribute('data-state',move);
    updateURL();
  }
  function resizeSquare() {
    var size =...