JSFiddle - React, Tailwind, and code Playground

by Ryan Brown

HTML

<form id="formski">
  Enter a numerical value for both X and Y in the equation 3(x+5y)
  <br/> X value:
  <input type="textbox" id="x" value="1" />
  <br/> Y value:
  <input type="textbox" id="y" value="1" />
  <br/>
  <input type="button" id="btn" value="Calculate!" onclick="createTree();" />
  <p id="print">
  </p>
</form>

CSS

#formski,
#btn {
  font-family: courier;
}

JavaScript

createTree = function()
	{
  	var print = document.getElementById('print');
    var x = document.getElementById('x').value;
    	x = parseInt(x);
    var y = document.getElementById('y').value;
			y = parseInt(y);
      
      if (isNaN(x) || isNaN(y))
      	{
        print.innerHTML = "<br/> Please check your values and try again. <br/>";
        return;
        }
        
        var branch3 = new branch(3);
        var branch5 = new branch(5);
        var branchX = new branch("x");
        var branchY = new branch("y");
        
       	var stepOne = new node("*", branch5, branchY);
      	var stepTwo = new node("+", branchX, stepOne);
       	var stepThree = new node("*", branch3, stepTwo);
       
        var vValue = {};
        vValue["x"] = x;
        vValue["y"] = y;
        var result = stepThree.traverse(vValue);
        print.innerHTML = "<br/>X: "+ x + "<br/>Y: " + y + "<br/>Output: " + result;
  };
  

function branch(value)
  	{
    this.value = value;
    }

function node(symbol, left, right)
	{
  	this.symbol = symbol;
    this.left = left;
    this.right = right;
  }

branch.prototype.traverse = function(vValue)
	{
  	if (isNaN(this.value))
    	{
      	return vValue[this.value];
      }
    return this.value;
  }


node.prototype.traverse = function(vValue)
	{
  	var left = this.left.traverse(vValue);
    var right = this.right.traverse(vValue);
    var symbol = this.symbol;
    
    if (symbol == "+")
   	{
      return left + right;
    }
    if (symbol == "-")
    {
     return left - right;
    }
  	if (symbol == "*")
  	{
    return left * right;
  	}
    if (symbol == "/")
    {
    return left / right;
    }
  return 0;
	}