PaluMacil/url-hash-play.html

## url-hash-play.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Url Hash Home</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="main.js">

      document.addEventListener('DOMContentLoaded', function(){

          var tbody = document.querySelectorAll('tbody')[0];

          function addKeyValuePair(item) {
              var tr = document.createElement("TR");
              var tdKey = document.createElement("TD");
              var tdValue = document.createElement("TD");

              var keyText = document.createTextNode(item.split('=')[0]);
              var valueText = document.createTextNode(item.split('=')[1]);

              tdKey.appendChild(keyText);
              tr.appendChild(tdKey);
              tdValue.appendChild(valueText);
              tr.appendChild(tdValue);

              tbody.appendChild(tr);
          }

          function parseHash() {
              var plainHash = window.location.hash;
              var cleanHash = '';
              if (plainHash.indexOf('#') === -1) {
                  cleanHash = "page=profile&tab=personal";
                  window.location.hash = cleanHash;
              } else {
                  cleanHash = plainHash.substring(plainHash.indexOf('#') + 1);
              }

              var pairList = cleanHash.split("&");

              //Clear table and display results:
              while (tbody.firstChild) {
                  tbody.removeChild(tbody.firstChild);
              }
              pairList.forEach(addKeyValuePair);
          }

          parseHash();

          window.onhashchange = function() {
              parseHash();
          };

      }, false);

    </script>
</head>
<body>
   <div class="container">
      <h2>Hash Path Info</h2>

      <table class="table table-striped">
        <thead>
          <tr>
            <th>Key</th>
            <th>Value</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>key</td>
            <td>value</td>
          </tr>
        </tbody>
      </table>
  </div>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Url Hash Home</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
	<script src="main.js">

	document.addEventListener('DOMContentLoaded', function(){

	var tbody = document.querySelectorAll('tbody')[0];

	function addKeyValuePair(item) {
	var tr = document.createElement("TR");
	var tdKey = document.createElement("TD");
	var tdValue = document.createElement("TD");

	var keyText = document.createTextNode(item.split('=')[0]);
	var valueText = document.createTextNode(item.split('=')[1]);

	tdKey.appendChild(keyText);
	tr.appendChild(tdKey);
	tdValue.appendChild(valueText);
	tr.appendChild(tdValue);

	tbody.appendChild(tr);
	}

	function parseHash() {
	var plainHash = window.location.hash;
	var cleanHash = '';
	if (plainHash.indexOf('#') === -1) {
	cleanHash = "page=profile&tab=personal";
	window.location.hash = cleanHash;
	} else {
	cleanHash = plainHash.substring(plainHash.indexOf('#') + 1);
	}

	var pairList = cleanHash.split("&");

	//Clear table and display results:
	while (tbody.firstChild) {
	tbody.removeChild(tbody.firstChild);
	}
	pairList.forEach(addKeyValuePair);
	}

	parseHash();

	window.onhashchange = function() {
	parseHash();
	};

	}, false);

	</script>
	</head>
	<body>
	<div class="container">
	<h2>Hash Path Info</h2>

	<table class="table table-striped">
	<thead>
	<tr>
	<th>Key</th>
	<th>Value</th>
	</tr>
	</thead>
	<tbody>
	<tr>
	<td>key</td>
	<td>value</td>
	</tr>
	</tbody>
	</table>
	</div>
	</body>
	</html>