Fix: Add dimension validation and result reset logic to Matrix Calculator

Author: rishabhahuja12

web-app/js/projects/matrix-calculator.js

@@ -501,15 +501,76 @@ function initMatrixCalculator() {
         } else {
             document.getElementById('matrixBDimensions').style.opacity = '1';
         }
+
+        // Reset result display to default when operation changes
+        if (resultDiv) {
+            resultDiv.innerHTML = 'Select an operation and click Calculate';
+        }
     }
 
-    // Apply dimensions and create grids
-    function applyDimensions() {
+    // Validate a single dimension value; returns an error string or null if valid
+    function validateDimension(value, label) {
+        if (value === null || value === undefined || (typeof value === 'string' && value.trim() === '')) {
+            return `${label} is empty. Please enter a value between 1 and 5.`;
+        }
+        const num = Number(value);
+        if (isNaN(num)) {
+            return `${label} is not a valid number.`;
+        }
+        if (!Number.isInteger(num)) {
+            return `${label} must be a whole number (got ${value}).`;
+        }
+        if (num < 1 || num > 5) {
+            return `${label} must be between 1 and 5 (got ${num}).`;
+        }
+        return null;
+    }
+
+    // Validate all required dimension inputs; returns { valid, aRows, aCols, bRows, bCols, error }
+    function validateDimensions() {
+        const operation = operationSelect.value;
+        const needsB = ['add', 'subtract', 'multiply'].includes(operation);
+
+        const checks = [
+            { value: matrixARows.value, label: 'Matrix A Rows' },
+            { value: matrixACols.value, label: 'Matrix A Cols' },
+        ];
+
+        if (needsB) {
+            checks.push(
+                { value: matrixBRows.value, label: 'Matrix B Rows' },
+                { value: matrixBCols.value, label: 'Matrix B Cols' },
+            );
+        }
+
+        for (const { value, label } of checks) {
+            const error = validateDimension(value, label);
+            if (error) {
+                return { valid: false, error };
+            }
+        }
+
         const aRows = parseInt(matrixARows.value);
         const aCols = parseInt(matrixACols.value);
-        const bRows = parseInt(matrixBRows.value);
-        const bCols = parseInt(matrixBCols.value);
-        
+        const bRows = needsB ? parseInt(matrixBRows.value) : 2;
+        const bCols = needsB ? parseInt(matrixBCols.value) : 2;
+
+        return { valid: true, aRows, aCols, bRows, bCols, error: null };
+    }
+
+    // Apply dimensions and create grids
+    function applyDimensions() {
+        const dims = validateDimensions();
+        if (!dims.valid) {
+            resultDiv.innerHTML = `<span style="color: #ef4444;">⚠️ ${dims.error}</span>`;
+            return;
+        }
+
+        const { aRows, aCols, bRows, bCols } = dims;
+
+        // Reset result display to default when dimensions are successfully applied
+        resultDiv.innerHTML = 'Select an operation and click Calculate';
+
         // Initialize matrices with zeros
         matrixA = Array(aRows).fill().map(() => Array(aCols).fill(0));
         matrixB = Array(bRows).fill().map(() => Array(bCols).fill(0));
@@ -523,16 +584,23 @@ function initMatrixCalculator() {
     // Perform calculation
     function calculate() {
         try {
-            // Get current values from grids
-            const aRows = parseInt(matrixARows.value);
-            const aCols = parseInt(matrixACols.value);
-            const bRows = parseInt(matrixBRows.value);
-            const bCols = parseInt(matrixBCols.value);
-            
+            // Validate dimensions before reading matrix values
+            const dims = validateDimensions();
+            if (!dims.valid) {
+                resultDiv.innerHTML = `<span style="color: #ef4444;">⚠️ ${dims.error}</span>`;
+                return;
+            }
+
+            const { aRows, aCols, bRows, bCols } = dims;
+
+            const operation = operationSelect.value;
+            const needsB = ['add', 'subtract', 'multiply'].includes(operation);
+
             matrixA = getMatrixValues(aRows, aCols, matrixAGrid);
-            matrixB = getMatrixValues(bRows, bCols, matrixBGrid);
+            if (needsB) {
+                matrixB = getMatrixValues(bRows, bCols, matrixBGrid);
+            }
 
-            const operation = operationSelect.value;
             let result;
             let operationName = '';