<!DOCTYPE html>
<html lang="de">

<head>
  <meta charset="utf-8">
  <title>title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  <script src="https://cdn.jsdelivr.net/gh/efpage/DML/lib/DML.js"></script>
</head>

<body>
  <script>  "use strict";
    let i, n, o, v, history, display, buffer = "0", op = "=";
    const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, ".", 0]
    const operators = ["+", "-", "*", "/", "="]

    // round button
    function RB(s, color = "yellow") {
      const r = 30;
      return button(s, "width:" + px(r) + "; height:" + px(r) + "; border-radius: 50%; background-color: " + color + ";  margin: 3px;")
    }

    // yellow button for numbers
    function number(s) {
      let bt = RB(s, "yellow")
      bt.onmouseover = () => bt.style.backgroundColor = "orange"
      bt.onmouseout = () => bt.style.backgroundColor = "yellow"
      return bt
    }

    // gray button for operators
    function operator(s) {
      let bt = RB(s, "silver")
      bt.onmouseover = () => bt.style.backgroundColor = "#6060FF "
      bt.onmouseout = () => bt.style.backgroundColor = "silver"
      br()
      return bt
    }

    function bval() { return Number(buffer) }
    function dval() { return Number(display.textContent) }

    // Click on number
    function numberClick(e) {
      if (op == "=") {
        display.textContent = ""
        op = ""
      }
      if (op != "")
        if (buffer == "0") {
          buffer = display.textContent
          display.textContent = ""
        }
      display.textContent += e.srcElement.textContent
    }

    // evaluate last function and set as display value
    function evaluate() {
      switch (op) {
        case "+": v = bval() + dval(); break;
        case "-": v = bval() - dval(); break;
        case "*": v = bval() * dval(); break;
        case "/": v = bval() / dval(); break;
        default: v = Number(display.textContent);
      }
      return String(v)
    }

    // evaluate the operator click
    function operatorClick(e) {
      let flg = (op != "=") && (buffer != 0)
      let o = bval() + op + dval() + "="
      display.textContent = evaluate() // evaluate the last operator to display
      buffer = "0"                     // clear buffer
      o += display.textContent
      if (flg) {
        history.value += "\n" + o
        history.scrollTop = history.scrollHeight;
      }
      op = e.srcElement.textContent    // set new operator
    }
    /****************************************************************************************
      Build the panels
    ****************************************************************************************/

    // build Main box
    sidiv("", _bigPadding + _radius + _box)

    // left subbox for numbers 
    sidiv("Calculator", "margin-right: 10px;"); br()
    history = textarea("", { readonly: true, style: "resize: none; font-size: 60%; height: 50px;" })
    display = div("", _border + _right + "margin-bottom: 15px; height: 22px;") // result display

// build number block
i = 0
for (n of numbers) {
  number(String(n)).onclick = numberClick
  if (++i % 3 == 0) br()
}
number("C").onclick = () => { op = "="; display.textContent = ""; buffer = "0" }
unselectBase()

// Right box for operators
sidiv()
for (o of operators)
  operator(o).onclick = operatorClick;
unselectBase(2)

  </script>
</body>
</html>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.