WebCalc

<html>
<head>
<meta charset="utf-8"/>
<title>WebCalc</title>
</head>
<body onload="Initialize()">
<div><input id="idInput"/></div>
<div>
<button>7</button><button>8</button><button>9</button><button>A</button><button>COS</button>
</div>
<div>
<button>4</button><button>5</button><button>6</button><button>B</button><button>SIN</button>
</div>
<div>
<button>1</button><button>2</button><button>3</button><button>C</button><button>TAN</button>
</div>
<div>
<button>.</button><button>0</button><button>=</button><button>D</button><button>ACOS</button>
</div>
<div>
<button>+</button><button>-</button><button>x</button><button>E</button><button>ASIN</button>
</div>
<div>
<button>*</button><button>/</button><button>%</button><button>F</button><button>ATAN</button>
</div>
<div>
<button>&amp;</button><button>|</button><button>^</button><button>PI</button><button>LOG</button>
</div>
<div>
<button>(</button><button>)</button><button>Clear</button><button>SQRT</button><button>EXP</button>
</div>
<div id="idReport"></div>
</body>
<script>
function Initialize() {
  document.querySelectorAll('button').forEach(b=>{
    // report(b.innerText);
    b.setAttribute('onclick','onClick(this)');
  });
  idInput.focus();
}
</script>
<script>
function onClick(e) {
    idInput.focus();
    if (e.innerText==='Clear') {
        idInput.value='';
        idReport.innerHTML='';
    }
    else if (e.innerText==='=') {
        solve();
    }
    else if (e.innerText==='PI') {
        idInput.value += 'Math.PI';
    }
    else if (e.innerText==='SQRT') {
        idInput.value += 'Math.sqrt(';
    }
    else if (e.innerText==='COS') {
        idInput.value += 'Math.cos(';
    }
    else if (e.innerText==='SIN') {
        idInput.value += 'Math.sin(';
    }
    else if (e.innerText==='TAN') {
        idInput.value += 'Math.tan(';
    }
    else if (e.innerText==='ACOS') {
        idInput.value += 'Math.acos(';
    }
    else if (e.innerText==='ASIN') {
        idInput.value += 'Math.asin(';
    }
    else if (e.innerText==='ATAN') {
        idInput.value += 'Math.atan(';
    }
    else if (e.innerText==='LOG') {
        idInput.value += 'Math.log(';
    }
    else if (e.innerText==='EXP') {
        idInput.value += 'Math.exp(';
    }
    else if (e.innerText.match(/([A-F]|[0-9]|[+.*%^&|x])/)||
        (e.innerText==='(')||
        (e.innerText===')')||
        (e.innerText==='/')||
        (e.innerText==='-')) {
        idInput.value += e.innerText;
    }
    else {
        report('Nope!');
    }
}
</script>
<script>
// Report a message or name/value pair
function report(msg,name) {
    const e = document.createElement('div');
    if (name) {
        e.innerHTML = `${name} = ${msg}`;
    }
    else {
        e.innerHTML = String(msg);
    }
    e.setAttribute('class','report');
    return appendReport(e);
}
</script>
<script>
// Append an element or string message to the report
function appendReport(arg) {
    if (arg instanceof HTMLElement) {
        const elem = reportElement();
        elem.appendChild(arg);
        return elem;
    }
    return report(arg);
}
</script>
<script>
function reportElement() {
    return document.getElementById('idReport');
}
</script>
<script>
const solve = function() {
    try {
        window.eval('report('+idInput.value+')');
        // report(idInput.value);
        // idInput.value='';
    }
    catch (err) {
        report(err);
    }
}
</script>
<script>
// Clear the report's content
function clearReport() {
    reportElement().innerHTML = '';
}
</script>
</html>