JSFiddle - React, Tailwind, and code Playground

by zazagalaxy

HTML

Instructions: <br/>
Enter values to perform a calculation, use the <b>Enter</b> key or click <b>Push to Stack</b> after each entry to perform a calculation. <br/><br/>
Calculations shoud be performed as such: <br/>
2[enter]2 <br/>
5[enter] 52 <br/>
*[enter] *52 => 10 <br/>
Press <b>C</b> to clear calculator screen. <br/>
Press <b>AC</b> to start a new calculation. <br/><br/>

<input type="button" id="buttonClear" value="C" onclick="clearScr()" style="color:white; background-color:blue" />

<input type="button" id="buttonRestart" value="AC" onclick="clearCalc()" style="color:white; background-color:blue" /><br/>

<input type="button" id="buttonPush" value="Push to stack" onclick="handle_pts()" style="color:white; background-color:blue" />

<input type="textbox" id="inputValue"
onkeypress="handle(event)" /> 

<div id="output"></div>

JavaScript

/*
This function is added to aid user in computer calculation.  User can press enter and values will be added to stack then calculated */
function handle(event){
	// Using 'Keycode' and 'Which' for browser compatibility
 var key=event.keyCode || event.which;
  if (key==13){
     testInput();
     //pushStack();
     document.getElementById("inputValue").value = ""; 
  }
}

/*
Performs equivalent function as keypress for onclick, cursor returns back to textbox */
function handle_pts(){
	 testInput();
  //pushStack();
  document.getElementById("inputValue").value = "";     
  document.getElementById("inputValue").select();
}

var Node = function(_content) {
  this.next = null;
  this.last = null;
  this.content = _content;
}

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

  this.push = function(_content) {
    if (this.head == null) {
      this.head = new Node(_content);
      this.top = this.head;
      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.head == null) {
      alert("Stack is Empty");
      return null;
    }
    
    if (this.head == this.top) {
			this.head = null;
    	return this.top.content;
    }

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

  this.toString = function() {
    var str = "";
    var node = this.head;

    while (node != null) {
      str += node.content;
      node = node.next;
    }
    return str;
  }
}

// Clears screen for clutter clean up, values remain in memory 
function clearScr(){
	document.getElementById('output').innerHTML = "";
  document.getElementById("inputValue").select();
}
var stack = new Stack();

// Restarts the program and memory 
function clearCalc(){
	var result = stack.pop();
  document.getElementById('output').innerHTML = "";
 ...