fix(calc-01): show errors in the display area

samples/calc-01/index.js

@@ -4,7 +4,6 @@ const screen = document.getElementById('screen');
 const stackEl = document.getElementById('stack');
 
 const displayEl = document.getElementById('display');
-const errorEl = document.getElementById('error');
 const modeLabel = document.getElementById('modeLabel');
 const angleMode = document.getElementById('angleMode');
 const modeMenuButton = document.getElementById('modeMenuButton');
@@ -96,6 +95,7 @@ let isMovingStackItem = false;
 let stackSnapshotBeforeMove = null;
 let stackViewOffset = 0;
 let editRestoreValue = null;
+let statusMessage = '';
 
 function handleEscapeAction() {
   if (calc.isEditing) {
@@ -124,6 +124,7 @@ function handleEscapeAction() {
 }
 
 function pressKey(key) {
+  statusMessage = '';
   clearStackSelection();
   editXWithKey(key);
   render();
@@ -372,13 +373,14 @@ function render() {
     displayEl.textContent = `MOVING: ${stackCursor}`;
   } else if (hasStackSelection()) {
     displayEl.textContent = `SELECTED: ${stackCursor}`;
+  } else if (statusMessage) {
+    displayEl.textContent = statusMessage;
   } else {
     displayEl.textContent = 'READY';
   }
   modeLabel.textContent = calc.angleMode;
   modeMenuButton.textContent = calc.angleMode.toUpperCase();
   angleMode.value = calc.angleMode;
-  errorEl.textContent = '';
 }
 
 function pushEditingValueIfNeeded() {
@@ -395,6 +397,7 @@ function pushEditingValueIfNeeded() {
 
 function execute(name) {
   try {
+    statusMessage = '';
     if (name === 'enter') {
       if (calc.isEditing) {
         pushEditingValueIfNeeded();
@@ -425,7 +428,8 @@ function execute(name) {
     syncInputFromState();
     render();
   } catch (error) {
-    errorEl.textContent = error.message;
+    statusMessage = error.message;
+    render();
   }
 }
 
@@ -549,6 +553,7 @@ function handleKeydown(event) {
   }
 
   try {
+    statusMessage = '';
     if (action.type === 'escapeKey') {
       event.preventDefault();
       handleEscapeAction();
@@ -616,7 +621,8 @@ function handleKeydown(event) {
       execute(action.value);
     }
   } catch (error) {
-    errorEl.textContent = error.message;
+    statusMessage = error.message;
+    render();
   }
 }