JSFiddle - React, Tailwind, and code Playground

by JInks Peng

HTML

<button id='next' class='zero'>Next Acrion</button>
<div id='square'>
  <p>This is the object</p>
  <div id='link'></div>
</div>

JavaScript

function hash() {
  document.getElementById('next').onclick = nextPanel;
  //check code
  var hash = window.location.hash.split("#")[1];
  switch(hash) {
    case 'one':
      functionOne();
      break;
    case 'tow':
      functionOne();
      functionTwo();
      break;
    case 'three':
      functionOne();
      functionTwo();
      functionThree();
  }
}
function nextPanel() { //onclick
  var classNm = this.getAttribute('class');
  switch(classNm) {
    case 'zero':
      functionOne();
      break;
    case 'one':
      functionTwo();
      break;
    case 'two':
      functionThree();
  }
}
function setPage(page) { //change 'class' of button,set html;
  document.getElementById('next').setAttribute('class',page);
  var link = document.getElementById('link');
  var path = location.protocol + '//' + location.hostname + '/' + location.pathname + '#' + page;
  link.innerHTML = '<p><a href="' + path + '">link </a></p>';
}
function functionOne() {
  var square = document.getElementById('square');
  square.style.backgroundColor = '#f00';
  square.style.width = '200px';
  square.style.height = '200px';
  square.style.padding = '10px';
  square.style.margin = '20px';
  setPage('one');
}
function functionTwo() {
  var square = document.getElementById('square');
  square.style.backgroundColor = '#ff0';
  square.style.position = 'absolute';
  square.style.left = '200px';
  setPage('two');
}
function functionThree() {
  var square = document.getElementById('square');
  square.style.backgroundColor = '#0f0';
  square.style.width = '400px';
  square.style.height = '400px';
  square.style.left = '400px';
  setPage('three');
}
hash();