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:
+11
-11
@@ -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 = '';
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user