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

samples/calc-02/index.css

@@ -17,6 +17,8 @@
 	--btnAltBottom: #3a434f;
 	--btnDangerTop: #584042;
 	--btnDangerBottom: #402d2f;
+	--btnEscapeTop: #6a4a2a;
+	--btnEscapeBottom: #4a331d;
 	--btnEnterTop: #465349;
 	--btnEnterBottom: #303a31;
 	--btnText: #eef2f7;
@@ -180,7 +182,15 @@ body {
 	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) {
 	background: linear-gradient(180deg, #343b46, #20262e);
 }

samples/calc-02/index.js

@@ -23,9 +23,9 @@ const calculatorEl = document.querySelector('.calculator');
 const statusLine = document.getElementById('statusLine');
 
 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: '⎋', action: 'escape', className: 'key-danger' },
 	{ label: '⌫', action: 'backspace', className: 'key-danger' },
 	{ label: '7', input: '7', className: 'key-default' },
 	{ label: '8', input: '8', className: 'key-default' },
@@ -41,7 +41,7 @@ const keypadKeys = [
 	{ label: '-', action: 'sub', className: 'key-accent' },
 	{ label: '0', input: '0', 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' },
 ];