feat(calc-02): reorder keypad actions for safer input flow

This commit is contained in:
2026-05-15 21:18:47 +02:00
parent 75fe72412e
commit 39659745a6
3 changed files with 15 additions and 5 deletions
+1 -1
View File
@@ -5,5 +5,5 @@
- Public API: `push`, `pop`, `clear`, `swap`, `remove`, `edit`, `isValidIndex`, `input`, `command`, `getOperationsByCategory`, `getConstants` - Public API: `push`, `pop`, `clear`, `swap`, `remove`, `edit`, `isValidIndex`, `input`, `command`, `getOperationsByCategory`, `getConstants`
- Config: `maxSize`, `base`, `angleMode`, `enabledCommands` - Config: `maxSize`, `base`, `angleMode`, `enabledCommands`
- Commands: arithmetic, stack, trigonometry, constants `pi` and `e` - Commands: arithmetic, stack, trigonometry, constants `pi` and `e`
- Demo actions: keyboard focus is kept on the hidden input as much as possible so typing keeps working; paste parses clipboard text as a number before pushing it to the stack; Ctrl+V is supported via the hidden input paste event; backspace is ignored when the stack is empty; operation errors are shown as an overlay bar on top of the calculator with a shorter timeout and darker red - Demo actions: keyboard focus is kept on the hidden input on desktop so typing keeps working; the keypad layout places Enter in the bottom-left, ± in the former Enter position, and Esc before Clear for safety; paste parses clipboard text as a number before pushing it to the stack; Ctrl+V is supported via the hidden input paste event; backspace is ignored when the stack is empty; operation errors are shown as an overlay bar on top of the calculator with a shorter timeout and darker red
- Exports: browser `window.RpnCalculator`, CommonJS `module.exports` - Exports: browser `window.RpnCalculator`, CommonJS `module.exports`
+11 -1
View File
@@ -17,6 +17,8 @@
--btnAltBottom: #3a434f; --btnAltBottom: #3a434f;
--btnDangerTop: #584042; --btnDangerTop: #584042;
--btnDangerBottom: #402d2f; --btnDangerBottom: #402d2f;
--btnEscapeTop: #6a4a2a;
--btnEscapeBottom: #4a331d;
--btnEnterTop: #465349; --btnEnterTop: #465349;
--btnEnterBottom: #303a31; --btnEnterBottom: #303a31;
--btnText: #eef2f7; --btnText: #eef2f7;
@@ -180,7 +182,15 @@ body {
outline: 2px solid rgba(207, 224, 174, 0.7); outline: 2px solid rgba(207, 224, 174, 0.7);
} }
.display-button:nth-child(6), .key-escape {
background: linear-gradient(180deg, var(--btnEscapeTop), var(--btnEscapeBottom));
color: #eef2f7;
}
.display-button:nth-child(6) {
background: linear-gradient(180deg, #343b46, #20262e);
}
.display-button:nth-child(7) { .display-button:nth-child(7) {
background: linear-gradient(180deg, #343b46, #20262e); background: linear-gradient(180deg, #343b46, #20262e);
} }
+3 -3
View File
@@ -23,9 +23,9 @@ const calculatorEl = document.querySelector('.calculator');
const statusLine = document.getElementById('statusLine'); const statusLine = document.getElementById('statusLine');
const keypadKeys = [ const keypadKeys = [
{ label: '±', action: 'neg', className: 'key-default' }, { label: 'Enter', action: 'enter', className: 'key-enter' },
{ label: '⎋', action: 'escape', className: 'key-escape' },
{ label: 'C', action: 'clear', className: 'key-danger' }, { label: 'C', action: 'clear', className: 'key-danger' },
{ label: '⎋', action: 'escape', className: 'key-danger' },
{ label: '⌫', action: 'backspace', className: 'key-danger' }, { label: '⌫', action: 'backspace', className: 'key-danger' },
{ label: '7', input: '7', className: 'key-default' }, { label: '7', input: '7', className: 'key-default' },
{ label: '8', input: '8', className: 'key-default' }, { label: '8', input: '8', className: 'key-default' },
@@ -41,7 +41,7 @@ const keypadKeys = [
{ label: '-', action: 'sub', className: 'key-accent' }, { label: '-', action: 'sub', className: 'key-accent' },
{ label: '0', input: '0', className: 'key-default' }, { label: '0', input: '0', className: 'key-default' },
{ label: '.', input: '.', className: 'key-default' }, { label: '.', input: '.', className: 'key-default' },
{ label: 'Enter', action: 'enter', className: 'key-enter' }, { label: '±', action: 'neg', className: 'key-default' },
{ label: '+', action: 'add', className: 'key-accent' }, { label: '+', action: 'add', className: 'key-accent' },
]; ];