JSFiddle - React, Tailwind, and code Playground

by fixit

HTML

<FORM NAME="sci-calc">
<TABLE CELLSPACING="0" CELLPADDING="1">
<TR>
<TD COLSPAN="5" ALIGN="center"><INPUT id="results_input" NAME="display" VALUE="0" SIZE="28" MAXLENGTH="25"></TD>
</TR>
<TR>
<TD ALIGN="center"><INPUT TYPE="button" VALUE=" exp "></TD>
<TD ALIGN="center"><INPUT TYPE="button" VALUE="  7  "></TD>
<TD ALIGN="center"><INPUT TYPE="button" VALUE="  8  "></TD>
<TD ALIGN="center"><INPUT TYPE="button" VALUE="  9  "></TD>
<TD ALIGN="center"><INPUT TYPE="button" VALUE="   /   "></TD>
</TR>
<TR>
<TD ALIGN="center"><INPUT TYPE="button" VALUE="   ln   "></TD>
<TD ALIGN="center"><INPUT TYPE="button" VALUE="  4  "></TD>
<TD ALIGN="center"><INPUT TYPE="button" VALUE="  5  "></TD>
<TD ALIGN="center"><INPUT TYPE="button" VALUE="  6  "></TD>
<TD ALIGN="center"><INPUT TYPE="button" VALUE="   *   "></TD>
</TR>
<TR>
<TD ALIGN="center"><INPUT TYPE="button" VALUE=" sqrt "></TD>
<TD ALIGN="center"><INPUT TYPE="button" VALUE="  1  "></TD>
<TD ALIGN="center"><INPUT TYPE="button" VALUE="  2  "></TD>
<TD ALIGN="center"><INPUT TYPE="button" VALUE="  3  "></TD>
<TD ALIGN="center"><INPUT TYPE="button" VALUE="   -   "></TD>
</TR>
<TR>
<TD ALIGN="center"><INPUT TYPE="button" VALUE="  sq  "></TD>
<TD ALIGN="center"><INPUT TYPE="button" VALUE="  0  "></TD>
<TD ALIGN="center"><INPUT TYPE="button" VALUE="   .  "></TD>
<TD ALIGN="center"><INPUT TYPE="button" VALUE=" +/- "></TD>
<TD ALIGN="center"><INPUT TYPE="button" VALUE="   +  "></TD>
</TR>
<TR>
<TD ALIGN="center"><INPUT TYPE="button" VALUE="    (    "></TD>
<TD ALIGN="center"><INPUT TYPE="button" VALUE="cos"></TD>
<TD ALIGN="center"><INPUT TYPE="button" VALUE=" sin"></TD>
<TD ALIGN="center"><INPUT TYPE="button" VALUE=" tan"></TD>
<TD ALIGN="center"><INPUT TYPE="button" VALUE="   )   "></TD>
</TR>
<TR>
<TD ALIGN="center"><INPUT TYPE="button" VALUE="clear"></TD>
<TD ALIGN="center" COLSPAN="3"><INPUT TYPE="button" VALUE="backspace"></TD>
<TD ALIGN="center"><INPUT TYPE="button" VALUE="enter" NAME="enter"></TD>
</TR>
</TABLE>
</FORM>

JavaScript

function setOnClick() {
	
  document.onclick = function(e) {
  	var resultsInput = document.getElementById("results_input");
    var target = e.target;
    if (target.tagName === "INPUT") {
	    var trimmedValue = target.value.trim();

			switch (true){
      	case trimmedValue == "enter":
        	if (checkNum(resultsInput)) { compute(resultsInput) }	
        break;
      	case trimmedValue == "clear":
        	resultsInput.value = 0;
        break;
      	case trimmedValue == "backspace":
        	deleteChar(resultsInput)
        break;
      	case (trimmedValue === "ln" || trimmedValue === "exp" || trimmedValue === "sq" || trimmedValue === "sqrt" || trimmedValue === "cos" || trimmedValue === "tan"):
        	if (checkNum(resultsInput)) { 
            if (trimmedValue === "ln") {
            	trimmedValue = "log";
            }
            else if (trimmedValue === "sq") {
              resultsInput.value = eval(resultsInput.value) * eval(resultsInput.value)
              break;
            }
            resultsInput.value = eval(Math[trimmedValue](resultsInput.value));
          }	
        break;
				default:
        	addChar(resultsInput, target.value);	
        break;
      }
    }
  }
}

function addChar(input, character) {
    if(input.value == null || input.value == "0")
        input.value = character.trim();
    else
        input.value += character.trim();
}


function deleteChar(input) {
    input.value = input.value.substring(0, input.value.length - 1)
}

function changeSign(input) {
    if(input.value.substring(0, 1) == "-")
        input.value = input.value.substring(1, input.value.length)
    else
        input.value = "-" + input.value
}

function compute(resultsInput) {
    resultsInput.value = eval(resultsInput.value)
}

function checkNum(str) {
console.log("str: ",str);
    for (var i = 0; i < str.length; i++) {
        var ch = str.substring(i, i+1)
        if (ch < "0" || ch > "9") {
            if (ch != "/" && ch != "*" && ch != "+" && ch...