feat: refresh calculator keypad labels and layout

Update the sample calculator UI to use compact math symbols, uppercase action labels, and a revised top bar layout. Also uppercase the angle mode button text and remove the backspace-specific width override.
This commit is contained in:
2026-04-25 02:47:41 +02:00
parent 144c334fe5
commit 223bf56339
4 changed files with 15 additions and 19 deletions
+11 -11
View File
@@ -15,8 +15,8 @@ const constsMenu = document.getElementById('constsMenu');
const keyLayouts = {
functions: [
[
{ type: 'command', value: 'sqrt', label: 'sqrt', className: 'key-function' },
{ type: 'command', value: 'pow', label: 'y^x', className: 'key-function' },
{ type: 'command', value: 'sqrt', label: '√x', className: 'key-function' },
{ type: 'command', value: 'pow', label: 'yˣ', className: 'key-function' },
{ type: 'command', value: 'sqr', label: 'x²', className: 'key-function' },
{ type: 'command', value: 'recip', label: '1/x', className: 'key-function' },
],
@@ -58,21 +58,21 @@ const keyLayouts = {
[
{ type: 'input', value: '0', label: '0', className: 'key-number' },
{ type: 'input', value: '.', label: '.', className: 'key-number' },
{ type: 'command', value: 'neg', label: '+/', className: 'key-number' },
{ type: 'command', value: 'neg', label: '±', className: 'key-number' },
],
],
operators: [
[
{ type: 'command', value: 'div', label: '/', className: 'key-operator' },
{ type: 'command', value: 'div', label: '÷', className: 'key-operator' },
null,
],
[
{ type: 'command', value: 'mul', label: '*', className: 'key-operator' },
{ type: 'command', value: 'mul', label: '×', className: 'key-operator' },
null,
],
[
{ type: 'command', value: 'sub', label: '-', className: 'key-operator' },
{ type: 'command', value: 'enter', label: 'Enter', className: 'key-enter' },
{ type: 'command', value: 'sub', label: '', className: 'key-operator' },
{ type: 'command', value: 'enter', label: 'ENTER', className: 'key-enter' },
],
[
{ type: 'command', value: 'add', label: '+', className: 'key-operator' },
@@ -86,9 +86,9 @@ const topButtons = {
{ type: 'command', value: 'pi', label: 'π', className: 'key-function' },
{ type: 'command', value: 'e', label: 'e', className: 'key-function' },
],
del: { type: 'command', value: 'clear', label: 'del', className: 'key-danger' },
backspace: { type: 'action', value: 'backspace', label: 'backspace', className: 'key-operator' },
escape: { type: 'action', value: 'escape', label: 'esc', className: 'key-danger' },
del: { type: 'command', value: 'clear', label: 'DEL', className: 'key-danger' },
backspace: { type: 'action', value: 'backspace', label: '', className: 'key-danger' },
escape: { type: 'action', value: 'escape', label: 'ESC', className: 'key-danger' },
};
let stackCursor = null;
@@ -376,7 +376,7 @@ function render() {
displayEl.textContent = 'READY';
}
modeLabel.textContent = calc.angleMode;
modeMenuButton.textContent = calc.angleMode;
modeMenuButton.textContent = calc.angleMode.toUpperCase();
angleMode.value = calc.angleMode;
errorEl.textContent = '';
}