Review the entire code and fix any bugs - Follow Up Deployment

index.html

@@ -23,6 +23,38 @@
             background-color: #4f46e5;
             border-radius: 3px;
         }
+        .analysis-box {
+            background-color: #f8fafc;
+            border-left: 4px solid #4f46e5;
+            padding: 12px;
+            margin-top: 8px;
+            border-radius: 0 4px 4px 0;
+            font-family: monospace;
+            white-space: pre-wrap;
+            color: #334155;
+        }
+        .analysis-title {
+            font-weight: bold;
+            color: #4f46e5;
+            margin-bottom: 6px;
+        }
+        .analysis-item {
+            margin-left: 12px;
+            position: relative;
+        }
+        .analysis-item:before {
+            content: "•";
+            position: absolute;
+            left: -12px;
+            color: #4f46e5;
+        }
+        .analysis-tip {
+            background-color: #e0e7ff;
+            padding: 8px;
+            border-radius: 4px;
+            margin-top: 8px;
+            font-style: italic;
+        }
         .symbol-btn {
             transition: all 0.2s ease;
         }
@@ -73,7 +105,7 @@
                         placeholder="Enter formula (e.g., 2x + 3 = 7)"
                     ></textarea>
                     <div id="result" class="text-2xl font-bold text-gray-800 mt-2 text-right"></div>
-                    <div id="error" class="text-red-500 text-sm mt-1 text-right"></div>
+                    <div id="error" class="text-sm mt-1"></div>
                 </div>
                 
                 <!-- Symbolic Input Buttons -->
@@ -193,8 +225,18 @@
         }
         
         function backspace() {
-            currentExpression = currentExpression.slice(0, -1);
-            updateScreen();
+            const input = document.getElementById('formulaInput');
+            const startPos = input.selectionStart;
+            const endPos = input.selectionEnd;
+            
+            if (startPos === endPos && startPos > 0) {
+                input.value = input.value.substring(0, startPos - 1) + input.value.substring(endPos);
+                input.setSelectionRange(startPos - 1, startPos - 1);
+            } else {
+                input.value = input.value.substring(0, startPos) + input.value.substring(endPos);
+                input.setSelectionRange(startPos, startPos);
+            }
+            input.focus();
         }
         
         function updateScreen() {
@@ -292,7 +334,7 @@
                     .replace(/log\(/g, 'Math.log10(');
                 
                 // Handle factorial with gamma function for non-integers and better precision
-                expr = expr.replace(/([\d.]+)!/g, function(match, num) {
+                expr = expr.replace(/([+-]?[\d.]+)!/g, function(match, num) {
                     const n = parseFloat(num);
                     if (n < 0) throw "Factorial of negative number";
                     if (n > 170) throw "Number too large for factorial";
@@ -323,16 +365,52 @@
                 
                 // Sanitize the expression before evaluation
                 const sanitized = expr.replace(/Math\./g, '');
-                // Check for invalid variables (only x,y,z allowed)
-                const invalidVars = sanitized.match(/[a-df-wA-DF-W]/g);
+                // Check for invalid variables (allow any single letter variables)
+                const invalidVars = sanitized.match(/[^a-zA-Z\s\d\.\+\-\*\/\^\(\)\,]/g);
                 if (invalidVars) {
                     const uniqueVars = [...new Set(invalidVars)];
-                    throw `Invalid variable${uniqueVars.length > 1 ? 's' : ''}: ${uniqueVars.join(', ')}. Only x, y, z are allowed as variables.`;
+                    throw `Invalid character${uniqueVars.length > 1 ? 's' : ''}: ${uniqueVars.join(', ')}`;
                 }
 
                 // If expression contains variables but no equals sign
                 if (/[xyz]/.test(sanitized) && !currentExpression.includes('=')) {
-                    throw `Expression contains variables but no equation (missing '='). Did you mean to solve for a variable?`;
+                    const vars = [...new Set(sanitized.match(/[xyz]/g))];
+                    const varList = vars.join(', ');
+                    // Special case for simple linear expressions like "2x+3"
+                    if (vars.length === 1 && /^[+-]?\d*[xyz]([+-]\d+)?$/.test(sanitized.replace(/\s/g, ''))) {
+                        const match = sanitized.match(/^([+-]?\d*)([xyz])([+-]\d+)?$/);
+                        const coeff = match[1] ? (match[1] === '+' ? 1 : match[1] === '-' ? -1 : parseFloat(match[1])) : 1;
+                        const varName = match[2];
+                        const constant = match[3] ? parseFloat(match[3]) : 0;
+                        
+                        const analysis = `<div class="analysis-box">
+                            <div class="analysis-title">Linear Expression Analysis</div>
+                            <div class="analysis-item">Form: <span class="font-mono">${coeff !== 1 ? coeff : ''}${varName} ${constant >= 0 ? '+' : ''}${constant !== 0 ? constant : ''}</span></div>
+                            <div class="analysis-item">Slope (coefficient of ${varName}): <span class="font-bold">${coeff}</span></div>
+                            <div class="analysis-item">Y-intercept: <span class="font-bold">${constant}</span></div>
+                            
+                            <div class="analysis-tip">
+                                <div class="font-bold mb-1">To evaluate:</div>
+                                <div>1. Assign value to ${varName} (e.g. <span class="font-mono bg-gray-100 px-1">${varName}=5</span>)</div>
+                                <div>2. Or make equation to solve (e.g. <span class="font-mono bg-gray-100 px-1">${currentExpression}=7</span>)</div>
+                            </div>
+                        </div>`;
+                        throw analysis;
+                    } else {
+                        const analysis = `<div class="analysis-box">
+                            <div class="analysis-title">Expression Analysis</div>
+                            <div class="analysis-item">Contains variable${vars.length > 1 ? 's' : ''}: <span class="font-bold">${varList}</span></div>
+                            <div class="analysis-item">Not an equation (missing '=')</div>
+                            
+                            <div class="analysis-tip">
+                                <div class="font-bold mb-1">To evaluate this expression:</div>
+                                <div>1. Assign values to variables (e.g. <span class="font-mono bg-gray-100 px-1">${vars[0]}=5</span>)</div>
+                                <div>2. Or make it an equation (e.g. <span class="font-mono bg-gray-100 px-1">${currentExpression}=7</span>)</div>
+                            </div>
+                        </div>`;
+                        throw analysis;
+                    }
+                    throw analysis;
                 }
                 
                 // Warn about very large/small numbers before evaluation
@@ -361,7 +439,11 @@
                 addToHistory(currentExpression, result);
                 
             } catch (error) {
-                document.getElementById('error').textContent = 'Error: ' + error;
+                if (typeof error === 'string' && error.startsWith('<div')) {
+                    document.getElementById('error').innerHTML = error;
+                } else {
+                    document.getElementById('error').textContent = 'Error: ' + error;
+                }
                 document.getElementById('result').textContent = '';
                 if (error.includes('variables but no equation')) {
                     document.getElementById('error').textContent += '\nTip: To evaluate expressions with variables, assign them values first (e.g. "x=5")';