JSFiddle - React, Tailwind, and code Playground

by Rolf

HTML

<input id="rechner" type="text" width="200">
<button id="eval">=</button>
<output id="message"></output>

CSS

output { display: block; color:red; }

JavaScript

let calc = document.getElementById("rechner");
let go   = document.getElementById("eval");
let msg  = document.getElementById("message");

calc.addEventListener("keypress", function(e) {
   if (e.code == "Enter" || e.code == "NumpadEnter") compute();
});
go.addEventListener("click", compute);

function compute() {
   try {
      calc.value = eval(calc.value);
      msg.textContent = "";
   }
   catch (e) {
      if (!e.constructor) return;
      let name = e.constructor.name;
      msg.textContent = name;
   }
}