Calculator

			<div class="screen">
				<p class="expression" id="expression"></p>
				<!-- <output> is made for results; aria-live reads each new value out. -->
				<output class="display" id="display" aria-live="polite">0</output>
			</div>

			<!-- data- attributes say what each key does, so one listener handles all of them. -->
			<div class="keys" id="keys">
				<button type="button" class="key key-wide key-light" data-action="clear">
					AC
				</button>
				<button
					type="button"
					class="key key-light"
					data-action="delete"
					aria-label="Delete"
				>
					⌫
				</button>
				<button
					type="button"
					class="key key-operator"
					data-operator="/"
					aria-label="Divide"
				>
					÷
				</button>

				<button
					type="button"
					class="key key-operator"
					data-operator="/"
					aria-label="Divide"
				>
					÷
				</button>

/* Hidden on screen but still read by screen readers. */
.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Four equal columns; wide keys span two of them. */
.keys {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.625rem;
}

.key {
	aspect-ratio: 1;
	border: 0;
	border-radius: 999px;
	background: #3a3a44;
	font: inherit;
	font-size: 1.375rem;
	color: #ffffff;
	cursor: pointer;
}

.key-wide {
	grid-column: span 2;
	aspect-ratio: auto;
}

// What the calculator remembers: the number on screen (as text, so digits
// can be added one at a time), the number before it, and the operator.
let current = "0";
let previous = null;
let operator = null;
// True right after an operator or =, so the next digit starts a new number.
let isNewNumber = false;

const SYMBOLS = { "+": "+", "-": "−", "*": "×", "/": "÷" };

function updateDisplay() {
	display.textContent = current;
	expression.textContent = operator ? `${previous} ${SYMBOLS[operator]}` : "";
}

function inputDigit(digit) {
	if (isNewNumber || current === "0") {
		current = digit;
		isNewNumber = false;
	} else {
		current += digit;
	}
}

function inputDecimal() {
	if (isNewNumber) {
		current = "0";
		isNewNumber = false;
	}
	// A number can only have one decimal point.
	if (!current.includes(".")) {
		current += ".";
	}
}

// A switch picks one case to run; it's tidier than four if statements.
function calculate(a, b, chosenOperator) {
	switch (chosenOperator) {
		case "+":
			return a + b;
		case "-":
			return a - b;
		case "*":
			return a * b;
		case "/":
			return a / b;
	}
}

	// Dividing by zero gives Infinity, which isn't a useful answer.
	if (!Number.isFinite(result)) {
		clearAll();
		current = "Can't divide by 0";
		isNewNumber = true;
		return;
	}

	// 0.1 + 0.2 is 0.30000000000000004 in JavaScript; rounding hides that.
	current = String(parseFloat(result.toFixed(10)));

// One listener for every key: closest() finds the button that was clicked.
keys.addEventListener("click", (event) => {
	const key = event.target.closest("button");
	if (!key) return;

	const { digit, operator: keyOperator, action } = key.dataset;
	if (digit) inputDigit(digit);
	else if (keyOperator) chooseOperator(keyOperator);
	else if (action === "decimal") inputDecimal();
	else if (action === "equals") equals();
	else if (action === "delete") deleteLast();
	else if (action === "clear") clearAll();

	updateDisplay();
});

// The keyboard calls the same functions as the buttons.
document.addEventListener("keydown", (event) => {
	const { key } = event;
	if ("0123456789".includes(key)) inputDigit(key);
	else if (key in SYMBOLS) chooseOperator(key);
	else if (key === ".") inputDecimal();
	else if (key === "Enter" || key === "=") equals();
	else if (key === "Backspace") deleteLast();
	else if (key === "Escape") clearAll();
	else return;

	// Stop Enter from also pressing whichever button has focus.
	event.preventDefault();
	updateDisplay();
});