JSFiddle - React, Tailwind, and code Playground

by PhiLho

HTML

<script type="application/processing">
// Instantiate each of the classification of buttons
CalcButton[] numButtons = new CalcButton[10];
CalcButton[] opButtons = new CalcButton[6];
CalcButton[] spButtons = new CalcButton[1];
 
String displayValue = "";
String valueToCompute = "";  // string value left of operator
String valueToCompute2 = ""; // string value right of operator
float valueToComputeI;   // float value left of operator
float valueToComputeI2;  // float value right of operator
float result;
char opValue;
boolean firstNum;
 
void setup() {
  size(230,330);
  background(150);
  frameRate(10);
 
  // Populate number buttons
  numButtons[0] = new CalcButton(65, 275).asNumber(0);
  numButtons[1] = new CalcButton(10, 220).asNumber(1);
  numButtons[2] = new CalcButton(65, 220).asNumber(2);
  numButtons[3] = new CalcButton(120, 220).asNumber(3);
  numButtons[4] = new CalcButton(10, 165).asNumber(4);
  numButtons[5] = new CalcButton(65, 165).asNumber(5);
  numButtons[6] = new CalcButton(120, 165).asNumber(6);
  numButtons[7] = new CalcButton(10, 110).asNumber(7);
  numButtons[8] = new CalcButton(65, 110).asNumber(8);
  numButtons[9] = new CalcButton(120, 110).asNumber(9);
 
 
  // Populate operators
  opButtons[0] = new CalcButton(175, 275).asOperator("+");
  opButtons[1] = new CalcButton(175, 220).asOperator("-");
  opButtons[2] = new CalcButton(175, 165).asOperator("*");
  opButtons[3] = new CalcButton(175, 110).asOperator("/");
  opButtons[4] = new CalcButton(120, 275).asOperator("=");
  opButtons[5] = new CalcButton( 10,  55).asOperator("C");

  // Populate special buttons
  spButtons[0] = new CalcButton(10, 275).asSpecial(".");
 
  // Set the initial value of first num to true
  firstNum = true;
}
 
void draw() {
  // Draw number buttons
  for (int i=0; i<numButtons.length; i++) {
    CalcButton inumButton = numButtons[i];
    inumButton.display();
  }
 
  updateDisplay();
}
 
void mousePressed() {
  for (int i=0; i<numButtons.length; i++) {
   ...

JavaScript

var scripts = document.getElementsByTagName("script");
for (var i = 0; i < scripts.length; i++) 
{
  if (scripts[i].type == "application/processing") 
  {
    var src = scripts[i].src,canvas = scripts[i].nextSibling;
    if (src && src.indexOf("#")) 
    {
      canvas = document.getElementById(src.substr(src.indexOf("#") + 1));
    }
    else
    {
       while (canvas && canvas.nodeName.toUpperCase() != "CANVAS")
       {
         canvas = canvas.nextSibling;
       }
       if (canvas) 
       {
         new Processing(canvas,scripts[i].text);
       }
    }
  }
}