From 0e72f64c3bd16cb7098a80db7728fc60721e9c6f Mon Sep 17 00:00:00 2001
From: MatMoul <matmoul@gmail.com>
Date: Sat, 25 Apr 2026 03:24:07 +0200
Subject: [PATCH] fix(calc-01): show errors in the display area

---
 samples/calc-01/index.css  |  7 -------
 samples/calc-01/index.html |  1 -
 samples/calc-01/index.js   | 14 ++++++++++----
 3 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/samples/calc-01/index.css b/samples/calc-01/index.css
index 1ad7f8f..b11a448 100644
--- a/samples/calc-01/index.css
+++ b/samples/calc-01/index.css
@@ -362,13 +362,6 @@ button:active {
   letter-spacing: 0.08em;
 }
 
-.error {
-  margin-top: 12px;
-  min-height: 20px;
-  color: #ff9f9f;
-  font-family: "Courier New", monospace;
-  font-size: 13px;
-}
 
 .hint {
   color: #cfd7e3;
diff --git a/samples/calc-01/index.html b/samples/calc-01/index.html
index f74e44d..5823fca 100644
--- a/samples/calc-01/index.html
+++ b/samples/calc-01/index.html
@@ -62,7 +62,6 @@
         </section>
       </div>
 
-      <div id="error" class="error"></div>
     </div>
   </div>
 
diff --git a/samples/calc-01/index.js b/samples/calc-01/index.js
index 09fd991..746516a 100644
--- a/samples/calc-01/index.js
+++ b/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();
   }
 }