feat: show calculator status messages as overlay bar

samples/calc-02/index.js

@@ -20,6 +20,7 @@ const keypadGrid = document.getElementById('keypadGrid');
 const functionsGrid = document.getElementById('functionsGrid');
 const trigoGrid = document.getElementById('trigoGrid');
 const calculatorEl = document.querySelector('.calculator');
+const statusLine = document.getElementById('statusLine');
 
 const keypadKeys = [
 	{ label: '±', action: 'neg', className: 'key-default' },
@@ -75,8 +76,20 @@ function focusInput() {
 	hiddenInput.focus();
 }
 
-function setStatus(message) {
-	console.log(message);
+let statusTimer = null;
+
+function setStatus(message, isError = false, timeoutMs = 1400) {
+	if (!statusLine) return;
+	clearTimeout(statusTimer);
+	statusLine.textContent = message;
+	statusLine.classList.toggle('is-error', isError);
+	statusLine.classList.toggle('is-visible', Boolean(message));
+	if (!message || timeoutMs <= 0) return;
+	statusTimer = window.setTimeout(() => {
+		statusLine.textContent = '';
+		statusLine.classList.remove('is-visible');
+		statusLine.classList.remove('is-error');
+	}, timeoutMs);
 }
 
 function normalizeStack() {
@@ -191,7 +204,7 @@ function execute(name) {
 		}
 		render();
 	} catch (error) {
-		console.error(error);
+		setStatus(error?.message || 'Operation error', true);
 	}
 }
 
@@ -311,7 +324,7 @@ pasteButton.addEventListener('click', async () => {
 		const text = await navigator.clipboard.readText();
 		pasteTextIntoStack(text);
 	} catch (error) {
-		setStatus('Paste unavailable');
+		setStatus('Paste unavailable', true);
 	}
 });
 
@@ -356,6 +369,7 @@ function openConstMenu() {
 			pushEditingValueIfNeeded();
 			calc.push(constant.value);
 			render();
+			setStatus(`Inserted ${constant.label}`);
 			closeConstMenu();
 			focusInput();
 		});