m/mtm-rpn-js
1
0
Fork 0
Code Issues Actions Activity

Compare commits

base: m/mtm-rpn-js:main
Branches Tags
m/mtm-rpn-js:dev m/mtm-rpn-js:main
...
compare: m/mtm-rpn-js:6a37c7c1e8d3fe293fd629638cc22d4c2f6deb79
Branches Tags
m/mtm-rpn-js:dev m/mtm-rpn-js:main

9 Commits
main ... 6a37c7c1e8

Author SHA1 Message Date
matmoul 6a37c7c1e8 feat: add pow10 and exp arithmetic operations 2026-05-16 23:15:22 +02:00
matmoul 5f2d18df99 fix(calc-02): constrain keypad area with internal scrolling 
Wrap the keypad, function, and trig panels in a dedicated scroll area so the calculator shell can use a fixed grid layout without overflowing the viewport. Also update panel styling to preserve spacing and scrollbar behavior.
 2026-05-16 22:40:23 +02:00
matmoul c69380d057 refactor(samples): reorder calculator keypad keys 2026-05-16 21:58:51 +02:00
matmoul c11a75d7f7 fix: bust calc sample stylesheet cache 2026-05-16 21:52:05 +02:00
matmoul 813fae1b61 refactor(calc-02): simplify calculator layout structure 
Move the display and button panels into a single wrapper and rely on
viewport-height sizing with hidden page overflow to keep the calculator
contained. Also trim redundant panel-specific layout rules and styling.
 2026-05-16 21:41:47 +02:00
matmoul 208db58fe7 fix: make calc-02 panels stretch and scroll within container 2026-05-16 20:24:43 +02:00
matmoul ea6401a006 fix: constrain calculator width on calc-02 sample 2026-05-16 20:17:19 +02:00
matmoul ea61ec17d5 fix: remove portrait class from calc-02 calculator shell 2026-05-16 19:44:09 +02:00
matmoul a4bbffe65b feat: replace calculator enter key label with symbol 2026-05-16 18:41:03 +02:00
4 changed files with 77 additions and 74 deletions
Expand all files Collapse all files
samples/calc-02/index.css
+26 -23
View File
@@ -32,6 +32,7 @@
html, body { html, body {
margin: 0; margin: 0;
min-height: 100%; min-height: 100%;
overflow-y: hidden;
} }
body { body {
@@ -51,25 +52,24 @@ body {
.calculator { .calculator {
width: 100%; width: 100%;
height: auto; max-width: 460px;
display: grid; height: 100vh;
max-height: 100vh;
padding: 8px; padding: 8px;
display: grid;
grid-template-rows: auto auto minmax(0, 1fr);
gap: 8px;
border-radius: 8px; border-radius: 8px;
background: var(--panel); background: var(--panel);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
grid-template-columns: 1fr; justify-content: stretch;
grid-template-rows: auto auto auto auto auto; align-content: start;
row-gap: 6px; overflow: hidden;
grid-template-areas:
"display"
"display-buttons"
"keypad"
"functions"
"trigo";
} }
.display-block, .display-block,
.display-panel, .display-panel,
.display-buttons-panel,
.keypad-panel, .keypad-panel,
.functions-panel, .functions-panel,
.trigo-panel { .trigo-panel {
@@ -79,15 +79,7 @@ body {
box-shadow: none; box-shadow: none;
} }
.display-buttons-panel {
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.06);
background: rgba(6, 10, 16, 0.16);
box-shadow: none;
}
.display-block { .display-block {
grid-area: display;
display: grid; display: grid;
gap: 0; gap: 0;
align-self: start; align-self: start;
@@ -146,10 +138,9 @@ body {
font-size: 20px; font-size: 20px;
} }
.display-buttons-panel { .display-buttons-panel {
grid-area: display-buttons;
padding: 8px; padding: 8px;
align-self: start;
min-height: 0; min-height: 0;
background: rgba(6, 10, 16, 0.16);
} }
.display-buttons-grid { .display-buttons-grid {
@@ -231,10 +222,22 @@ body {
.functions-panel, .functions-panel,
.trigo-panel { .trigo-panel {
padding: 8px; padding: 8px;
align-self: start;
min-height: 0; min-height: 0;
} }
.calculator > .display-block,
.calculator > .display-buttons-panel,
.calculator > .keypad-scroll-area {
justify-self: stretch;
}
.keypad-scroll-area {
min-height: 0;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: rgba(46, 105, 135, 1);
}
.status-bar { .status-bar {
position: absolute; position: absolute;
top: 0; top: 0;
@@ -291,7 +294,6 @@ button {
border: 1px solid rgba(14, 18, 25, 0.85); border: 1px solid rgba(14, 18, 25, 0.85);
border-radius: 8px; border-radius: 8px;
padding: 8px 8px; padding: 8px 8px;
font: inherit; font: inherit;
font-weight: 700; font-weight: 700;
color: var(--btnText); color: var(--btnText);
@@ -326,6 +328,7 @@ button:active {
opacity: 0.7; opacity: 0.7;
} }
} }
.stack-copy-button { .stack-copy-button {
padding: 4px; padding: 4px;
min-width: 24px; min-width: 24px;
samples/calc-02/index.html
+35 -33
View File
@@ -4,49 +4,51 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>HP48GX RPN Calculator</title> <title>HP48GX RPN Calculator</title>
<link rel="stylesheet" href="./index.css"> <link rel="stylesheet" href="./index.css?ver=1">
</head> </head>
<body> <body>
<main class="app-shell"> <main class="app-shell">
<section class="calculator calculator-portrait" aria-label="HP48GX style RPN calculator"> <section class="calculator" aria-label="HP48GX style RPN calculator">
<div class="display-block"> <div class="display-block">
<div class="display-panel"> <div class="display-panel">
<div class="status-bar" id="statusLine" aria-live="polite"></div> <div class="status-bar" id="statusLine" aria-live="polite"></div>
<div class="display-frame"> <div class="display-frame">
<div class="display-grid"> <div class="display-grid">
<div class="stack-cell"><span class="stack-label">T:</span><button type="button" class="stack-copy-button" data-copy-stack="T" aria-label="Copy T value"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M15.5 4h-7A2.5 2.5 0 0 0 6 6.5V8H5.5A1.5 1.5 0 0 0 4 9.5v8A2.5 2.5 0 0 0 6.5 20H13a1 1 0 0 0 1-1v-1.5H17.5A2.5 2.5 0 0 0 20 15V6.5A2.5 2.5 0 0 0 17.5 4h-2Zm.5 2h1.5a.5.5 0 0 1 .5.5V14a.5.5 0 0 1-.5.5H13V6.5A2.5 2.5 0 0 0 15.5 6Zm-1.5 12H6.5a.5.5 0 0 1-.5-.5v-8a.5.5 0 0 1 .5-.5h7.5V18Zm-1.5-8h-4V8.5A.5.5 0 0 1 9 8h4a.5.5 0 0 1 .5.5V10Z"/></svg></button><span id="stackT" class="stack-value"></span></div> <div class="stack-cell"><span class="stack-label">T:</span><button type="button" class="stack-copy-button" data-copy-stack="T" aria-label="Copy T value"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M15.5 4h-7A2.5 2.5 0 0 0 6 6.5V8H5.5A1.5 1.5 0 0 0 4 9.5v8A2.5 2.5 0 0 0 6.5 20H13a1 1 0 0 0 1-1v-1.5H17.5A2.5 2.5 0 0 0 20 15V6.5A2.5 2.5 0 0 0 17.5 4h-2Zm.5 2h1.5a.5.5 0 0 1 .5.5V14a.5.5 0 0 1-.5.5H13V6.5A2.5 2.5 0 0 0 15.5 6Zm-1.5 12H6.5a.5.5 0 0 1-.5-.5v-8a.5.5 0 0 1 .5-.5h7.5V18Zm-1.5-8h-4V8.5A.5.5 0 0 1 9 8h4a.5.5 0 0 1 .5.5V10Z"/></svg></button><span id="stackT" class="stack-value"></span></div>
<div class="stack-cell"><span class="stack-label">Z:</span><button type="button" class="stack-copy-button" data-copy-stack="Z" aria-label="Copy Z value"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M15.5 4h-7A2.5 2.5 0 0 0 6 6.5V8H5.5A1.5 1.5 0 0 0 4 9.5v8A2.5 2.5 0 0 0 6.5 20H13a1 1 0 0 0 1-1v-1.5H17.5A2.5 2.5 0 0 0 20 15V6.5A2.5 2.5 0 0 0 17.5 4h-2Zm.5 2h1.5a.5.5 0 0 1 .5.5V14a.5.5 0 0 1-.5.5H13V6.5A2.5 2.5 0 0 0 15.5 6Zm-1.5 12H6.5a.5.5 0 0 1-.5-.5v-8a.5.5 0 0 1 .5-.5h7.5V18Zm-1.5-8h-4V8.5A.5.5 0 0 1 9 8h4a.5.5 0 0 1 .5.5V10Z"/></svg></button><span id="stackZ" class="stack-value"></span></div> <div class="stack-cell"><span class="stack-label">Z:</span><button type="button" class="stack-copy-button" data-copy-stack="Z" aria-label="Copy Z value"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M15.5 4h-7A2.5 2.5 0 0 0 6 6.5V8H5.5A1.5 1.5 0 0 0 4 9.5v8A2.5 2.5 0 0 0 6.5 20H13a1 1 0 0 0 1-1v-1.5H17.5A2.5 2.5 0 0 0 20 15V6.5A2.5 2.5 0 0 0 17.5 4h-2Zm.5 2h1.5a.5.5 0 0 1 .5.5V14a.5.5 0 0 1-.5.5H13V6.5A2.5 2.5 0 0 0 15.5 6Zm-1.5 12H6.5a.5.5 0 0 1-.5-.5v-8a.5.5 0 0 1 .5-.5h7.5V18Zm-1.5-8h-4V8.5A.5.5 0 0 1 9 8h4a.5.5 0 0 1 .5.5V10Z"/></svg></button><span id="stackZ" class="stack-value"></span></div>
<div class="stack-cell"><span class="stack-label">Y:</span><button type="button" class="stack-copy-button" data-copy-stack="Y" aria-label="Copy Y value"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M15.5 4h-7A2.5 2.5 0 0 0 6 6.5V8H5.5A1.5 1.5 0 0 0 4 9.5v8A2.5 2.5 0 0 0 6.5 20H13a1 1 0 0 0 1-1v-1.5H17.5A2.5 2.5 0 0 0 20 15V6.5A2.5 2.5 0 0 0 17.5 4h-2Zm.5 2h1.5a.5.5 0 0 1 .5.5V14a.5.5 0 0 1-.5.5H13V6.5A2.5 2.5 0 0 0 15.5 6Zm-1.5 12H6.5a.5.5 0 0 1-.5-.5v-8a.5.5 0 0 1 .5-.5h7.5V18Zm-1.5-8h-4V8.5A.5.5 0 0 1 9 8h4a.5.5 0 0 1 .5.5V10Z"/></svg></button><span id="stackY" class="stack-value"></span></div> <div class="stack-cell"><span class="stack-label">Y:</span><button type="button" class="stack-copy-button" data-copy-stack="Y" aria-label="Copy Y value"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M15.5 4h-7A2.5 2.5 0 0 0 6 6.5V8H5.5A1.5 1.5 0 0 0 4 9.5v8A2.5 2.5 0 0 0 6.5 20H13a1 1 0 0 0 1-1v-1.5H17.5A2.5 2.5 0 0 0 20 15V6.5A2.5 2.5 0 0 0 17.5 4h-2Zm.5 2h1.5a.5.5 0 0 1 .5.5V14a.5.5 0 0 1-.5.5H13V6.5A2.5 2.5 0 0 0 15.5 6Zm-1.5 12H6.5a.5.5 0 0 1-.5-.5v-8a.5.5 0 0 1 .5-.5h7.5V18Zm-1.5-8h-4V8.5A.5.5 0 0 1 9 8h4a.5.5 0 0 1 .5.5V10Z"/></svg></button><span id="stackY" class="stack-value"></span></div>
<div class="stack-cell"><span class="stack-label">X:</span><button type="button" class="stack-copy-button" data-copy-stack="X" aria-label="Copy X value"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M15.5 4h-7A2.5 2.5 0 0 0 6 6.5V8H5.5A1.5 1.5 0 0 0 4 9.5v8A2.5 2.5 0 0 0 6.5 20H13a1 1 0 0 0 1-1v-1.5H17.5A2.5 2.5 0 0 0 20 15V6.5A2.5 2.5 0 0 0 17.5 4h-2Zm.5 2h1.5a.5.5 0 0 1 .5.5V14a.5.5 0 0 1-.5.5H13V6.5A2.5 2.5 0 0 0 15.5 6Zm-1.5 12H6.5a.5.5 0 0 1-.5-.5v-8a.5.5 0 0 1 .5-.5h7.5V18Zm-1.5-8h-4V8.5A.5.5 0 0 1 9 8h4a.5.5 0 0 1 .5.5V10Z"/></svg></button><span id="stackX" class="stack-value"></span></div> <div class="stack-cell"><span class="stack-label">X:</span><button type="button" class="stack-copy-button" data-copy-stack="X" aria-label="Copy X value"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M15.5 4h-7A2.5 2.5 0 0 0 6 6.5V8H5.5A1.5 1.5 0 0 0 4 9.5v8A2.5 2.5 0 0 0 6.5 20H13a1 1 0 0 0 1-1v-1.5H17.5A2.5 2.5 0 0 0 20 15V6.5A2.5 2.5 0 0 0 17.5 4h-2Zm.5 2h1.5a.5.5 0 0 1 .5.5V14a.5.5 0 0 1-.5.5H13V6.5A2.5 2.5 0 0 0 15.5 6Zm-1.5 12H6.5a.5.5 0 0 1-.5-.5v-8a.5.5 0 0 1 .5-.5h7.5V18Zm-1.5-8h-4V8.5A.5.5 0 0 1 9 8h4a.5.5 0 0 1 .5.5V10Z"/></svg></button><span id="stackX" class="stack-value"></span></div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="display-buttons-panel"> <div class="display-buttons-panel">
<div class="display-buttons-grid"> <div class="display-buttons-grid">
<button id="constButton" class="display-button">π</button> <button id="constButton" class="display-button">π</button>
<button id="pasteButton" class="display-button"><span class="display-button-symbol paste-symbol">⎘</span></button> <button id="pasteButton" class="display-button"><span class="display-button-symbol paste-symbol">⎘</span></button>
<button id="upButton" class="display-button"><span class="display-button-symbol arrow-symbol">↑</span></button> <button id="upButton" class="display-button"><span class="display-button-symbol arrow-symbol">↑</span></button>
<button id="modeButton" class="display-button">Mode</button> <button id="modeButton" class="display-button">Mode</button>
<div class="display-button-spacer"></div> <div class="display-button-spacer"></div>
<button id="leftButton" class="display-button display-button-offset"><span class="display-button-symbol arrow-symbol">←</span></button> <button id="leftButton" class="display-button display-button-offset"><span class="display-button-symbol arrow-symbol">←</span></button>
<button id="downButton" class="display-button"><span class="display-button-symbol arrow-symbol">↓</span></button> <button id="downButton" class="display-button"><span class="display-button-symbol arrow-symbol">↓</span></button>
<button id="rightButton" class="display-button"><span class="display-button-symbol arrow-symbol">→</span></button> <button id="rightButton" class="display-button"><span class="display-button-symbol arrow-symbol">→</span></button>
</div>
</div> </div>
</div>
<div class="keypad-panel">
<div class="keypad-grid" id="keypadGrid"></div>
</div>
<div class="functions-panel"> <div class="keypad-scroll-area">
<div class="functions-grid" id="functionsGrid"></div> <div class="keypad-panel">
</div> <div class="keypad-grid" id="keypadGrid"></div>
</div>
<div class="trigo-panel"> <div class="functions-panel">
<div class="trigo-grid" id="trigoGrid"></div> <div class="functions-grid" id="functionsGrid"></div>
</div> </div>
<div class="trigo-panel">
<div class="trigo-grid" id="trigoGrid"></div>
</div>
</div>
<input id="hiddenInput" class="hidden-input" type="text" autocomplete="off" aria-hidden="true" tabindex="-1"> <input id="hiddenInput" class="hidden-input" type="text" autocomplete="off" aria-hidden="true" tabindex="-1">
</section> </section>
samples/calc-02/index.js
+3 -17
View File
@@ -30,10 +30,10 @@ const calculatorEl = document.querySelector('.calculator');
const statusLine = document.getElementById('statusLine'); const statusLine = document.getElementById('statusLine');
const keypadKeys = [ const keypadKeys = [
{ 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: 'backspace', className: 'key-danger' }, { label: '⌫', action: 'backspace', className: 'key-danger' },
{ label: '⎋', action: 'escape', className: 'key-escape' },
{ label: '⏎', action: 'enter', className: 'key-enter' },
{ 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' },
{ label: '9', input: '9', className: 'key-default' }, { label: '9', input: '9', className: 'key-default' },
@@ -237,22 +237,8 @@ function execute(name) {
if (calc.isEditing) { if (calc.isEditing) {
calc.inputValue = calc.inputValue.startsWith('-') ? calc.inputValue.slice(1) : `-${calc.inputValue}`; calc.inputValue = calc.inputValue.startsWith('-') ? calc.inputValue.slice(1) : `-${calc.inputValue}`;
} else { } else {
calc.push(calc.pop() * -1); calc.command('neg');
} }
} else if (name === 'pow10') {
pushEditingValueIfNeeded();
const exponent = calc.stack[0];
calc.remove(0);
calc.push(10);
calc.push(exponent);
calc.command('pow');
} else if (name === 'exp') {
pushEditingValueIfNeeded();
const exponent = calc.stack[0];
calc.remove(0);
calc.push(Math.E);
calc.push(exponent);
calc.command('pow');
} else { } else {
pushEditingValueIfNeeded(); pushEditingValueIfNeeded();
calc.command(name); calc.command(name);
src/rpn-calculator.js
+13 -1
View File
@@ -49,6 +49,18 @@ class RpnCalculator {
aliases: ['^', 'y^x'], aliases: ['^', 'y^x'],
execute: (calc, a, b) => Math.pow(a, b), execute: (calc, a, b) => Math.pow(a, b),
}, },
pow10: {
category: 'Arithmetic',
argCount: 1,
aliases: ['10^x'],
execute: (calc, a) => Math.pow(10, a),
},
exp: {
category: 'Arithmetic',
argCount: 1,
aliases: ['e^x'],
execute: (calc, a) => Math.exp(a),
},
root: { root: {
category: 'Arithmetic', category: 'Arithmetic',
argCount: 2, argCount: 2,
@@ -195,7 +207,7 @@ class RpnCalculator {
static getOperationsByCategory() { static getOperationsByCategory() {
return { return {
Stack: ['dup', 'drop', 'swap', 'clear', 'enter'], Stack: ['dup', 'drop', 'swap', 'clear', 'enter'],
Arithmetic: ['add', 'sub', 'mul', 'div', 'mod', 'pow', 'root', 'sqr', 'neg', 'sqrt', 'recip', 'log', 'ln'], Arithmetic: ['add', 'sub', 'mul', 'div', 'mod', 'pow', 'pow10', 'exp', 'root', 'sqr', 'neg', 'sqrt', 'recip', 'log', 'ln'],
Trigonometry: ['sin', 'cos', 'tan', 'asin', 'acos', 'atan'], Trigonometry: ['sin', 'cos', 'tan', 'asin', 'acos', 'atan'],
}; };
} }