JSFiddle - React, Tailwind, and code Playground

by Robert Mochel

HTML

<div id="wrapper">
  <h1><p id="t">Assignment 5<br></h1>
	<h3><p id="t">The Stack Calculator</p></h3>
	<p id="t">
    1) Enter your first number below, hit the <u>Enter Key</u> or press the Push Button.
    <br> 2) Enter your second number below, hit the <u>Enter Key</u> or press the Push Button.
    <br>3) Which opertor will you use?
    <br> Press ( * / + - ) and hit <u>Enter Key</u> or Push Button to calculate.
    <br>
    <br> For example:
    <br> 4 [enter]
    <br> 2 [enter]
    <br> * [enter] = 8</p>
  <br>
  <br>
  <input type="textbox" id="box" onkeypress="enterKey(event)">
  <input type="button" id="second" value="Push Button" onclick="clickme();clearS()">
  <div id="output">
    <br>
  </div>
</div>

CSS

#wrapper {
  background: #fafcd4;
  border-radius: 25px;
  border: 5px solid #1f42b7;
  padding: 20px;
  width: 450px;
  height: 100%;
}

#t {
  font-family: monospace;
}

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

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

#output {
  font-family: monospace;
  font-size: 225%;
}

JavaScript

function clearS() {
  document.getElementById("box").value = "";
}

function enterKey(e) {
  var key = e.keyCode || e.which;

  if (key == 13) {
    clickme();
    document.getElementById("box").value = "";
  }
}


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("Empty Stack");
      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;
  }
}


var stack = new Stack();


function clickme() {
  var value = document.getElementById("box").value;
  if (value === "+") {
    addition();
    document.getElementById("output").innerHTML = stack.toString();

  } else if (value === "-") {
    subtraction();
    document.getElementById("output").innerHTML = stack.toString();

  } else if (value === "*") {
    multiplication();
    document.getElementById("output").innerHTML = stack.toString();
  } else if (value === "/") {
    division();
    document.getElementById("output").innerHTML = stack.toString();
  } else if (value != isNaN) {
    stack.push(value);
    document.getElementById("output").innerHTML = stack.toString();
  } else {
    alert("please use only +,-,*,/ ")
  }
}

function addition() {
  var x = stack.pop();
  var y = stack.pop();
  var...