JSFiddle - React, Tailwind, and code Playground

by Robert Mochel

HTML

<div id="wrapper">
<h2><div id="t">Assignment 7</div></h2>
<p id="t">TOH - Enter the number of blocks.. over 2</p>
<input type="text" id="tb1" onkeypress="handle(event)">
<input type="button" id="bt1" value="Button to press" onclick="submit()">
<div id="check"></div>
<div id="nom"><br></div>
<div id="error"></div>
<div id="t">1. What is the Complexity (In Big O)? </div> 
<div id="show"></div>
<div id="t">2. Should we be concerned with concerned with the legend of the world ending when the 64 disk solution is physically solved it it takes 2 seconds for each move?</div>
<div id="show2"></div>
<div id="blocks"></div>
<div id="init"></div>
</div>

CSS

#wrapper {
  background: #fafcd4;
  border-radius: 35px;
  border: 5px solid #1f42b7;
  padding: 17px;
  width: 500px;
  height: 50%;
}

#t, #blocks  {
  font-family: monospace;
}
#show, #show2, #error, #init {
  font-family: monospace;
  color: red;
}
#tb1 {
  font-family: monospace;
  background: #d4fcfb;
  border-radius: 25px;
  border: 2px solid #92e881;
  padding: 2px;
  width: 75px;
  height: 100%;
}

#bt1 {
  font-family: monospace;
  border-radius: 25px;
  background: #d4fcfb;
  border: 2px solid #92e881;
  padding: 2px;
  width: 155px;
  height: 100%;
}

#nom {
  font-family: monospace;
  color: red;
  font-size: 123%;
}

JavaScript

function handle(e) {
  var key = e.keyCode || e.which;
  if (key == 13) {
    submit();
    document.getElementById("tb1").value = "";
  }
}

var x = 0; 
var s1t, s2t, s3t = 0; 
var Node = function(_content) {
  this.next = null;
  this.last = null;
  this.content = _content;
}

var Stack = function() {
    this.top = null;
    this.bottom = null;

    this.push = function(_content) {
      if (this.bottom == null) {
        this.bottom = new Node(_content);
        this.top = this.bottom;
        return this;
      }

      var addedNode = new Node(_content);
      addedNode.last = this.top; 
      this.top.next = addedNode; 
      this.top = addedNode; 
      return this;
    }

    this.pop = function() {
      if (this.top == null) {
        return null;
      }

      if (this.bottom == this.top) {
        this.bottom = null;
        x = this.top.content;
        return this.top.content;

      }

      var a = this.top.content;
      this.top = this.top.last;
      this.top.next = null;
      x = a;
      return a;
    }

    this.toString = function() {
      var str = "";
      var node = this.bottom;
      while (node != null) {
        str += " | " + node.content + " ";
        node = node.next;
      }
      return str;
    }
  }
  // the queues
var s1 = new Stack();
var s2 = new Stack();
var s3 = new Stack();

var counter = 0;

//Error handling function to display an error message
function diplay(check) {
  //Initialize the message variable
  var message = 'error';
  document.getElementById("check").innerHTML = "";
}

function isInteger(number) {
  return (number % 1 === 0);
}

//Recursive Tower of Hanoi function
//complete the tower
function solveHanoi(nod) {

  //If the block number is greater than 0
  if (nod > 0) {
    //Call itself with one less than the block number
    solveHanoi(nod - 1);

    //Increase the counter
    counter++;

    //Call itself with one less than the block number
    solveHanoi(nod - 1);

  }
}

//Submit button...