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(0, 65, 275);
  numButtons[1] = new CalcButton(1, 10, 220);
  numButtons[2] = new CalcButton(2, 65, 220);
  numButtons[3] = new CalcButton(3, 120, 220);
  numButtons[4] = new CalcButton(4, 10, 165);
  numButtons[5] = new CalcButton(5, 65, 165);
  numButtons[6] = new CalcButton(6, 120, 165);
  numButtons[7] = new CalcButton(7, 10, 110);
  numButtons[8] = new CalcButton(8, 65, 110);
  numButtons[9] = new CalcButton(9, 120, 110);
 
 
  // Populate operators
  opButtons[0] = new CalcButton("+", 175, 275);
  opButtons[1] = new CalcButton("-", 175, 220);
  opButtons[2] = new CalcButton("*", 175, 165);
  opButtons[3] = new CalcButton("/", 175, 110);
  opButtons[4] = new CalcButton("=", 120, 275);
  opButtons[5] = new CalcButton("C", 10, 55);
 
  // Populate special buttons
  spButtons[0] = new CalcButton(true, ".", 10, 275);
 
  // 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++) {
    CalcButton inumButton = numButtons[i];
    inumButton.clickButton();
    if (inumButton.overBox) {
      if (firstNum) {
        println(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);
       }
    }
  }
}