| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>SymCalc - Symbolic Calculator</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <script src="https://cdn.jsdelivr.net/pyodide/v0.23.4/full/pyodide.js"></script> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Source+Code+Pro:wght@400;600&display=swap'); |
| |
| :root { |
| --primary: #4f46e5; |
| --primary-light: #e0e7ff; |
| --text: #1f2937; |
| --text-light: #6b7280; |
| --border: #e5e7eb; |
| --bg: #f9fafb; |
| } |
| |
| body { |
| font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; |
| color: var(--text); |
| line-height: 1.5; |
| } |
| |
| .mono { |
| font-family: 'Source Code Pro', monospace; |
| } |
| |
| .document { |
| max-width: 800px; |
| margin: 0 auto; |
| background: white; |
| box-shadow: 0 1px 3px rgba(0,0,0,0.05); |
| border-radius: 8px; |
| overflow: hidden; |
| } |
| .analysis-box { |
| background-color: #f8fafc; |
| border: 1px solid #e5e7eb; |
| padding: 16px; |
| margin-top: 12px; |
| border-radius: 8px; |
| font-family: 'Inter', sans-serif; |
| color: #334155; |
| box-shadow: 0 1px 2px rgba(0,0,0,0.05); |
| } |
| .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; |
| } |
| .symbol-btn:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); |
| } |
| .history-item:hover { |
| background-color: #f3f4f6; |
| cursor: pointer; |
| } |
| .fade-in { |
| animation: fadeIn 0.3s ease-in-out; |
| } |
| @keyframes fadeIn { |
| from { opacity: 0; transform: translateY(10px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50 min-h-screen p-6"> |
| <div class="document"> |
| <header class="border-b border-gray-200 px-6 py-4"> |
| <div class="flex items-center justify-between"> |
| <div class="flex items-center space-x-3"> |
| <i class="fas fa-infinity text-indigo-600 text-2xl"></i> |
| <h1 class="text-2xl font-semibold">SymCalc</h1> |
| <span class="text-sm text-gray-500">Symbolic Mathematics Calculator</span> |
| </div> |
| <div class="flex space-x-4"> |
| <button class="text-gray-500 hover:text-indigo-600 transition" title="History"> |
| <i class="fas fa-history"></i> |
| </button> |
| <button class="text-gray-500 hover:text-indigo-600 transition" title="Documentation"> |
| <i class="fas fa-question-circle"></i> |
| </button> |
| </div> |
| </div> |
| </header> |
| |
| <main class="p-6"> |
| <section class="mb-8"> |
| <div id="loading" class="hidden text-indigo-600 text-sm mb-2 font-medium">Calculating...</div> |
| <div class="mb-1 text-sm text-gray-500 font-medium">Input Expression</div> |
| <div class="relative"> |
| <textarea |
| id="formulaInput" |
| class="w-full bg-white text-gray-900 text-lg mono resize-none outline-none border border-gray-200 rounded p-3 mb-2 focus:ring-2 focus:ring-indigo-200 focus:border-indigo-500" |
| rows="2" |
| placeholder="Enter a mathematical expression (e.g. 2x + 3 = 7, sin(π/2), √(16))" |
| spellcheck="false" |
| ></textarea> |
| <div id="latexPreview" class="absolute right-3 top-3 text-gray-400 text-sm hidden"> |
| <span class="bg-white px-2 py-1 rounded">LaTeX Preview</span> |
| </div> |
| </div> |
| <div id="latexOutput" class="text-center p-2 bg-gray-50 border border-gray-200 rounded hidden"> |
| <div class="katex-display"></div> |
| </div> |
| |
| <div class="mt-6 mb-1 text-sm text-gray-500 font-medium">Result</div> |
| <div id="result" class="text-xl font-medium text-gray-900 mono p-3 bg-gray-50 rounded border border-gray-200 min-h-[60px]"></div> |
| <div id="steps" class="mt-3 hidden"> |
| <div class="text-sm text-gray-500 font-medium mb-1">Solution Steps</div> |
| <div id="stepsContent" class="text-sm mono p-3 bg-blue-50 rounded border border-blue-200"></div> |
| </div> |
| <div id="error" class="mt-2 text-sm text-red-500"></div> |
| <div id="sympyCode" class="hidden mt-3"> |
| <div class="text-sm text-gray-500 font-medium mb-1">SymPy Code</div> |
| <pre class="text-xs mono p-3 bg-gray-100 rounded overflow-x-auto"></pre> |
| </div> |
| </section> |
| |
| <section class="mb-8"> |
| <div class="mb-3 text-sm text-gray-500 font-medium">Common Symbols</div> |
| <div class="grid grid-cols-8 gap-2 mb-4"> |
| <button onclick="addSymbol('π')" class="p-2 bg-gray-100 hover:bg-gray-200 rounded text-sm mono">π</button> |
| <button onclick="addSymbol('e')" class="p-2 bg-gray-100 hover:bg-gray-200 rounded text-sm mono">e</button> |
| <button onclick="addSymbol('√(')" class="p-2 bg-gray-100 hover:bg-gray-200 rounded text-sm mono">√</button> |
| <button onclick="addSymbol('^')" class="p-2 bg-gray-100 hover:bg-gray-200 rounded text-sm mono">^</button> |
| <button onclick="addSymbol('!')" class="p-2 bg-gray-100 hover:bg-gray-200 rounded text-sm mono">!</button> |
| <button onclick="addSymbol('(')" class="p-2 bg-gray-100 hover:bg-gray-200 rounded text-sm mono">(</button> |
| <button onclick="addSymbol(')')" class="p-2 bg-gray-100 hover:bg-gray-200 rounded text-sm mono">)</button> |
| <button onclick="addSymbol('+')" class="p-2 bg-gray-100 hover:bg-gray-200 rounded text-sm mono">+</button> |
| </div> |
| |
| <div class="grid grid-cols-8 gap-2 mb-4"> |
| <button onclick="addSymbol('-')" class="p-2 bg-gray-100 hover:bg-gray-200 rounded text-sm mono">-</button> |
| <button onclick="addSymbol('*')" class="p-2 bg-gray-100 hover:bg-gray-200 rounded text-sm mono">×</button> |
| <button onclick="addSymbol('/')" class="p-2 bg-gray-100 hover:bg-gray-200 rounded text-sm mono">÷</button> |
| <button onclick="addSymbol('sin(')" class="p-2 bg-gray-100 hover:bg-gray-200 rounded text-sm mono">sin</button> |
| <button onclick="addSymbol('cos(')" class="p-2 bg-gray-100 hover:bg-gray-200 rounded text-sm mono">cos</button> |
| <button onclick="addSymbol('tan(')" class="p-2 bg-gray-100 hover:bg-gray-200 rounded text-sm mono">tan</button> |
| <button onclick="addSymbol('ln(')" class="p-2 bg-gray-100 hover:bg-gray-200 rounded text-sm mono">ln</button> |
| <button onclick="addSymbol('log(')" class="p-2 bg-gray-100 hover:bg-gray-200 rounded text-sm mono">log</button> |
| </div> |
| |
| <div class="flex space-x-3"> |
| <button onclick="calculate()" class="px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white rounded text-sm font-medium flex items-center"> |
| <i class="fas fa-equals mr-2"></i> Calculate |
| </button> |
| <button onclick="analyzeExpression()" class="px-4 py-2 bg-white hover:bg-gray-50 border border-gray-200 rounded text-sm font-medium flex items-center"> |
| <i class="fas fa-search mr-2"></i> Analyze |
| </button> |
| <button onclick="clearAll()" class="px-4 py-2 bg-white hover:bg-gray-50 border border-gray-200 rounded text-sm font-medium flex items-center"> |
| <i class="fas fa-trash-alt mr-2"></i> Clear |
| </button> |
| </div> |
| </section> |
| |
| <section id="historyPanel" class="hidden mt-8 border-t border-gray-200 pt-6"> |
| <div class="flex justify-between items-center mb-4"> |
| <h3 class="font-medium text-gray-900">Calculation History</h3> |
| <button onclick="clearHistory()" class="text-gray-500 hover:text-red-500 text-sm flex items-center"> |
| <i class="fas fa-trash-alt mr-1"></i> Clear All |
| </button> |
| </div> |
| <div id="historyList" class="space-y-3"></div> |
| </section> |
| </div> |
| |
| <footer class="border-t border-gray-200 px-6 py-4 text-center text-gray-500 text-sm"> |
| <p>SymCalc v1.0 · Symbolic Mathematics Calculator</p> |
| </footer> |
| </div> |
|
|
| <script> |
| let currentExpression = ''; |
| let history = JSON.parse(localStorage.getItem('calcHistory')) || []; |
| |
| |
| document.addEventListener('DOMContentLoaded', () => { |
| updateScreen(); |
| renderHistory(); |
| |
| |
| document.querySelector('.fa-history').parentElement.addEventListener('click', toggleHistoryPanel); |
| |
| |
| document.addEventListener('keydown', handleKeyPress); |
| }); |
| |
| function handleKeyPress(e) { |
| const input = document.getElementById('formulaInput'); |
| const cursorPos = input.selectionStart; |
| const textBeforeCursor = input.value.substring(0, cursorPos); |
| |
| |
| if (e.key === '(' && !e.shiftKey) { |
| const lastWord = textBeforeCursor.split(/[\s\+\-\*\/\^\(\)]/).pop(); |
| if (['sin', 'cos', 'tan', 'log', 'ln', 'sqrt'].includes(lastWord)) { |
| e.preventDefault(); |
| const newPos = cursorPos - lastWord.length; |
| input.value = input.value.substring(0, newPos) + |
| lastWord + '()' + |
| input.value.substring(cursorPos); |
| input.setSelectionRange(newPos + lastWord.length + 1, |
| newPos + lastWord.length + 1); |
| return; |
| } |
| } |
| |
| |
| if (e.key === 'Enter' && e.shiftKey) { |
| e.preventDefault(); |
| addSymbol('\n'); |
| return; |
| } |
| |
| |
| if (e.key === 'Tab') { |
| e.preventDefault(); |
| const lastWord = textBeforeCursor.split(/[\s\+\-\*\/\^\(\)]/).pop(); |
| const matches = ['pi', 'theta', 'alpha', 'beta', 'gamma'] |
| .filter(sym => sym.startsWith(lastWord.toLowerCase())); |
| if (matches.length === 1) { |
| const match = matches[0]; |
| const newPos = cursorPos - lastWord.length; |
| input.value = input.value.substring(0, newPos) + |
| match + |
| input.value.substring(cursorPos); |
| input.setSelectionRange(newPos + match.length, |
| newPos + match.length); |
| } |
| return; |
| } |
| |
| const keyMap = { |
| '0': '0', '1': '1', '2': '2', '3': '3', '4': '4', |
| '5': '5', '6': '6', '7': '7', '8': '8', '9': '9', |
| '+': '+', '-': '-', '*': '*', '/': '/', |
| '.': '.', '^': '^', '!': '!', |
| '(': '(', ')': ')', |
| 'Enter': '=', |
| 'Backspace': 'backspace', |
| 'Escape': 'clear', |
| 'ArrowUp': 'history-up', |
| 'ArrowDown': 'history-down' |
| }; |
| |
| const key = keyMap[e.key]; |
| if (key) { |
| e.preventDefault(); |
| if (key === '=') calculate(); |
| else if (key === 'backspace') backspace(); |
| else if (key === 'clear') clearAll(); |
| else if (key === 'history-up') navigateHistory(-1); |
| else if (key === 'history-down') navigateHistory(1); |
| else addSymbol(key); |
| } |
| } |
| |
| let historyNavigationIndex = -1; |
| let historyNavigationTemp = ''; |
| |
| function navigateHistory(direction) { |
| const input = document.getElementById('formulaInput'); |
| |
| if (historyNavigationIndex === -1) { |
| historyNavigationTemp = input.value; |
| } |
| |
| historyNavigationIndex += direction; |
| |
| if (historyNavigationIndex < -1) { |
| historyNavigationIndex = -1; |
| } else if (historyNavigationIndex >= history.length) { |
| historyNavigationIndex = history.length - 1; |
| } |
| |
| if (historyNavigationIndex === -1) { |
| input.value = historyNavigationTemp; |
| } else { |
| input.value = history[historyNavigationIndex].expression; |
| } |
| |
| input.focus(); |
| } |
| |
| function addSymbol(symbol) { |
| const input = document.getElementById('formulaInput'); |
| const startPos = input.selectionStart; |
| const endPos = input.selectionEnd; |
| const currentValue = input.value; |
| |
| input.value = currentValue.substring(0, startPos) + symbol + currentValue.substring(endPos); |
| input.focus(); |
| input.setSelectionRange(startPos + symbol.length, startPos + symbol.length); |
| } |
| |
| function clearAll() { |
| currentExpression = ''; |
| document.getElementById('error').textContent = ''; |
| updateScreen(); |
| } |
| |
| function backspace() { |
| 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() { |
| |
| } |
| |
| let pyodide; |
| async function initializePyodide() { |
| const loadingEl = document.getElementById('loading'); |
| loadingEl.classList.remove('hidden'); |
| document.getElementById('loadingText').textContent = "Loading SymPy..."; |
| |
| try { |
| pyodide = await loadPyodide({ |
| indexURL: "https://cdn.jsdelivr.net/pyodide/v0.23.4/full/" |
| }); |
| await pyodide.loadPackage(['sympy']); |
| loadingEl.classList.add('hidden'); |
| return true; |
| } catch (error) { |
| document.getElementById('error').innerHTML = ` |
| <div class="bg-red-50 border border-red-200 p-3 rounded"> |
| <div class="font-medium text-red-600">Failed to initialize SymPy:</div> |
| <div class="text-sm">${error.message}</div> |
| </div> |
| `; |
| loadingEl.classList.add('hidden'); |
| return false; |
| } |
| } |
| |
| async function calculate() { |
| if (!pyodide) { |
| const initialized = await initializePyodide(); |
| if (!initialized) return; |
| } |
| |
| const input = document.getElementById('formulaInput'); |
| currentExpression = input.value.trim(); |
| if (!currentExpression) return; |
| |
| const loadingEl = document.getElementById('loading'); |
| loadingEl.classList.remove('hidden'); |
| document.getElementById('loadingText').textContent = "Calculating..."; |
| |
| try { |
| |
| let pythonCode = ` |
| from sympy import * |
| from sympy.parsing.sympy_parser import parse_expr |
| import traceback |
| |
| x, y, z = symbols('x y z') |
| result = None |
| error = None |
| |
| try: |
| if '=' in expr: |
| if expr.count('=') == 1: |
| # Single equation solving |
| lhs, rhs = expr.split('=', 1) |
| lhs_expr = parse_expr(lhs.strip()) |
| rhs_expr = parse_expr(rhs.strip()) |
| solution = solve(Eq(lhs_expr, rhs_expr)) |
| if isinstance(solution, dict): |
| result = "\\n".join([f"{k} = {v}" for k,v in solution.items()]) |
| elif isinstance(solution, list): |
| result = "\\n".join([f"Solution {i+1}: {s}" for i,s in enumerate(solution)]) |
| else: |
| result = str(solution) |
| else: |
| # System of equations |
| equations = [eq.strip() for eq in expr.split(';') if '=' in eq] |
| syms = set() |
| for eq in equations: |
| syms.update([str(s) for s in parse_expr(eq.split('=')[0].strip()).free_symbols]) |
| syms = sorted(syms, key=lambda s: str(s)) |
| eqs = [Eq(*map(parse_expr, eq.split('=', 1))) for eq in equations] |
| solution = solve(eqs, syms) |
| if solution: |
| if isinstance(solution, list): |
| result = "\\n".join([f"Solution {i+1}: {s}" for i,s in enumerate(solution)]) |
| else: |
| result = "\\n".join([f"{k} = {v}" for k,v in solution.items()]) |
| else: |
| result = "No solution found" |
| else: |
| # Expression evaluation |
| expr_parsed = parse_expr(expr) |
| result = str(expr_parsed.evalf(4)) |
| except Exception as e: |
| error = traceback.format_exc() |
| `; |
| |
| |
| setTimeout(() => { |
| document.getElementById('sympyCode').textContent = sympyCode; |
| document.getElementById('sympyCode').classList.remove('hidden'); |
| try { |
| |
| if (!currentExpression.trim()) throw "Please enter an expression"; |
| if (currentExpression.length > 200) throw "Expression too long (max 200 chars)"; |
| |
| |
| if (currentExpression.includes('=')) { |
| |
| const equations = currentExpression.split(/[\n,;]+/).map(eq => eq.trim()).filter(eq => eq.includes('=')); |
| if (equations.length > 1) { |
| |
| const vars = new Set(); |
| const equationsList = []; |
| |
| for (const eq of equations) { |
| const parts = eq.split('='); |
| if (parts.length !== 2) throw "Each equation must have exactly one '='"; |
| |
| const left = parts[0].trim().replace(/\s+/g, ''); |
| const right = parts[1].trim().replace(/\s+/g, ''); |
| |
| |
| const rearranged = `(${left}) - (${right})`; |
| equationsList.push(rearranged); |
| |
| |
| const varRegex = /([a-zA-Z])/g; |
| let match; |
| while ((match = varRegex.exec(left + right)) !== null) { |
| vars.add(match[1]); |
| } |
| } |
| |
| if (equationsList.length !== vars.size) { |
| throw `Need ${vars.size} independent equations to solve for ${[...vars].join(', ')}`; |
| } |
| |
| |
| sympyCode += `sol = solve([${equationsList.map(eq => `Eq(${eq}, 0)`).join(', ')}], [${[...vars].join(', ')}])\n`; |
| |
| try { |
| |
| const solution = {}; |
| [...vars].forEach(v => solution[v] = `solution_for_${v}`); |
| |
| let resultText = ''; |
| for (const [varName, value] of Object.entries(solution)) { |
| resultText += `${varName} = ${value}\n`; |
| } |
| |
| document.getElementById('result').textContent = resultText; |
| addToHistory(currentExpression, resultText); |
| return; |
| } catch (e) { |
| throw `Failed to solve system: ${e.message || e}`; |
| } |
| |
| throw `System with ${vars.size} variables requires ${vars.size} equations`; |
| } |
| |
| |
| const parts = currentExpression.split('='); |
| if (parts.length !== 2) throw "Each equation must have exactly one '='"; |
| |
| const left = parts[0].trim(); |
| const right = parts[1].trim(); |
| |
| |
| const variables = new Set(); |
| const varRegex = /([a-zA-Z])/g; |
| let match; |
| |
| while ((match = varRegex.exec(left + right)) !== null) { |
| variables.add(match[1]); |
| } |
| |
| if (variables.size === 0) { |
| |
| const leftValue = eval(left.replace(/×/g, '*').replace(/÷/g, '/').replace(/−/g, '-')); |
| const rightValue = eval(right.replace(/×/g, '*').replace(/÷/g, '/').replace(/−/g, '-')); |
| if (Math.abs(leftValue - rightValue) < 1e-10) { |
| document.getElementById('result').textContent = "Equation is true"; |
| } else { |
| document.getElementById('result').textContent = "Equation is false"; |
| } |
| addToHistory(currentExpression, leftValue - rightValue); |
| return; |
| } |
| else if (variables.size === 1) { |
| |
| const varName = [...variables][0]; |
| sympyCode += `sol = solve(Eq(${left}, ${right}), ${varName})\n`; |
| |
| try { |
| |
| const solution = `solution_for_${varName}`; |
| document.getElementById('result').textContent = `${varName} = ${solution}`; |
| addToHistory(currentExpression, solution); |
| return; |
| } catch (e) { |
| throw `Failed to solve equation: ${e.message || e}`; |
| } |
| } |
| else { |
| |
| const varList = [...variables].join(', '); |
| document.getElementById('result').textContent = `Multi-variable equation: ${currentExpression}`; |
| document.getElementById('error').textContent = `Variables: ${varList}\nTo solve for ${variables.size > 1 ? 'these variables' : 'this variable'}, you need ${variables.size} independent equation${variables.size > 1 ? 's' : ''}.`; |
| addToHistory(currentExpression, NaN); |
| return; |
| } |
| } |
| |
| |
| sympyCode += `expr = ${currentExpression.replace(/=/g, '==')}\n`; |
| |
| if (variables.length > 0) { |
| sympyCode += `result = expr.subs({${variables.map(v => `${v}: 1`).join(', ')}})\n`; |
| } else { |
| sympyCode += `result = N(expr)\n`; |
| } |
| |
| |
| const sanitized = expr.replace(/Math\./g, ''); |
| |
| const invalidVars = sanitized.match(/[^a-zA-Z\s\d\.\+\-\*\/\^\(\)\,]/g); |
| if (invalidVars) { |
| const uniqueVars = [...new Set(invalidVars)]; |
| throw `Invalid character${uniqueVars.length > 1 ? 's' : ''}: ${uniqueVars.join(', ')}`; |
| } |
| |
| |
| if (/[xyz]/.test(sanitized) && !currentExpression.includes('=')) { |
| const vars = [...new Set(sanitized.match(/[xyz]/g))]; |
| const varList = vars.join(', '); |
| |
| 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; |
| } |
| |
| |
| if (expr.includes('**') && expr.split('**')[1].match(/\d{3,}/)) { |
| console.warn("Warning: Very large exponent may cause performance issues"); |
| } |
| |
| let result; |
| try { |
| result = eval(expr); |
| if (typeof result !== 'number' || isNaN(result)) { |
| throw "Calculation did not produce a valid number"; |
| } |
| |
| |
| if (Math.abs(result) > 1e100) { |
| console.warn("Warning: Result is extremely large - may be inaccurate"); |
| } |
| } catch (e) { |
| throw `Calculation error: ${e.message || e}`; |
| } |
| document.getElementById('result').textContent = formatResult(result); |
| document.getElementById('error').textContent = ''; |
| |
| |
| addToHistory(currentExpression, result); |
| |
| } catch (error) { |
| if (typeof error === 'string' && error.startsWith('<div')) { |
| document.getElementById('error').innerHTML = error; |
| } else { |
| document.getElementById('error').innerHTML = ` |
| <div class="analysis-box"> |
| <div class="flex items-center text-red-500 mb-2"> |
| <i class="fas fa-exclamation-circle mr-2"></i> |
| <div class="font-medium">SymPy Calculation Error</div> |
| </div> |
| <div class="text-sm mb-3">${error}</div> |
| <div class="text-xs mono bg-gray-100 p-2 rounded mb-3">${sympyCode}</div> |
| <div class="analysis-tip bg-red-50 p-3 rounded-lg"> |
| <div class="flex items-center text-red-600 font-medium mb-1"> |
| <i class="fas fa-lightbulb mr-2"></i> |
| <div>SymPy Suggestions</div> |
| </div> |
| <ul class="list-disc pl-5 space-y-1 text-sm"> |
| ${error.includes('variables') ? '<li>Use symbols() to define variables first</li>' : ''} |
| ${error.includes('solve') ? '<li>Ensure equations are properly formatted</li>' : ''} |
| <li>Use simplify() for complex expressions</li> |
| <li>Check SymPy documentation for function syntax</li> |
| </ul> |
| </div> |
| </div> |
| `; |
| } |
| document.getElementById('result').textContent = ''; |
| console.error("Calculation error:", error); |
| } finally { |
| loadingEl.classList.add('hidden'); |
| } |
| }, 10); |
| } |
| |
| function formatResult(num) { |
| if (num === undefined || num === null) return ''; |
| if (!Number.isFinite(num)) { |
| return num > 0 ? "Infinity" : "-Infinity"; |
| } |
| if (Number.isInteger(num)) return num; |
| |
| |
| if (Math.abs(num) > 1e12 || (Math.abs(num) < 1e-4 && num !== 0)) { |
| return num.toExponential(6).replace(/(\.\d*?[1-9])0+e/, '$1e'); |
| } |
| |
| |
| const str = num.toFixed(8); |
| if (str.indexOf('.') !== -1) { |
| return str.replace(/\.?0+$/, ''); |
| } |
| return str; |
| } |
| |
| function addToHistory(expression, result, steps = null, sympyCode = null) { |
| const historyItem = { |
| expression, |
| result, |
| steps, |
| sympyCode, |
| timestamp: new Date().toISOString(), |
| id: Date.now().toString() |
| }; |
| |
| history.unshift(historyItem); |
| |
| |
| if (history.length > 20) history.pop(); |
| |
| localStorage.setItem('calcHistory', JSON.stringify(history)); |
| renderHistory(); |
| return historyItem; |
| } |
| |
| function renderHistory() { |
| const historyList = document.getElementById('historyList'); |
| historyList.innerHTML = ''; |
| |
| history.forEach((item, index) => { |
| const historyItem = document.createElement('div'); |
| historyItem.className = 'p-3 history-item fade-in'; |
| historyItem.innerHTML = ` |
| <div class="flex justify-between items-start"> |
| <div> |
| <div class="text-xs text-gray-400">${new Date(item.timestamp).toLocaleString()}</div> |
| <div class="font-mono text-gray-700">${item.expression}</div> |
| </div> |
| <div class="font-medium text-indigo-600">= ${formatResult(item.result)}</div> |
| </div> |
| `; |
| |
| historyItem.addEventListener('click', () => { |
| currentExpression = item.expression; |
| updateScreen(); |
| document.getElementById('result').textContent = formatResult(item.result); |
| }); |
| |
| historyList.appendChild(historyItem); |
| }); |
| } |
| |
| function clearHistory() { |
| history = []; |
| localStorage.setItem('calcHistory', JSON.stringify(history)); |
| renderHistory(); |
| } |
| |
| function toggleHistoryPanel() { |
| const panel = document.getElementById('historyPanel'); |
| panel.classList.toggle('hidden'); |
| } |
| |
| function analyzeExpression() { |
| const input = document.getElementById('formulaInput'); |
| const expr = input.value.trim(); |
| if (!expr) return; |
| |
| let analysis = ''; |
| |
| |
| analysis += `<div class="analysis-box"> |
| <div class="flex items-center mb-3"> |
| <i class="fas fa-search text-indigo-500 mr-2"></i> |
| <div class="analysis-title text-lg font-semibold text-gray-800">Expression Analysis</div> |
| </div> |
| <div class="grid grid-cols-2 gap-3 mb-3"> |
| <div class="bg-white p-2 rounded border border-gray-100"> |
| <div class="text-xs text-gray-500">Type</div> |
| <div class="font-medium">${expr.includes('=') ? 'Equation' : 'Expression'}</div> |
| </div> |
| <div class="bg-white p-2 rounded border border-gray-100"> |
| <div class="text-xs text-gray-500">Length</div> |
| <div class="font-medium">${expr.length} chars</div> |
| </div> |
| </div>`; |
| |
| |
| const variables = [...new Set(expr.match(/[a-zA-Z]/g) || [])]; |
| const operators = [...new Set(expr.match(/[\+\-\*\/\^]/g) || [])]; |
| |
| if (variables.length > 0 || operators.length > 0) { |
| analysis += `<div class="grid grid-cols-2 gap-3 mb-3">`; |
| if (variables.length > 0) { |
| analysis += `<div class="bg-white p-2 rounded border border-gray-100"> |
| <div class="text-xs text-gray-500">Variables</div> |
| <div class="font-mono text-indigo-600">${variables.join(', ')}</div> |
| </div>`; |
| } |
| if (operators.length > 0) { |
| analysis += `<div class="bg-white p-2 rounded border border-gray-100"> |
| <div class="text-xs text-gray-500">Operators</div> |
| <div class="font-mono text-indigo-600">${operators.map(op => { |
| if (op === '*') return '×'; |
| if (op === '/') return '÷'; |
| return op; |
| }).join(', ')}</div> |
| </div>`; |
| } |
| analysis += `</div>`; |
| } |
| |
| |
| const functions = [...new Set(expr.match(/(sin|cos|tan|ln|log|sqrt)\(/g) || [])]; |
| if (functions.length > 0) { |
| analysis += `<div class="analysis-item"> |
| <span class="font-medium">Functions:</span> |
| <span class="font-mono bg-gray-100 px-1 rounded">${functions.join('</span>, <span class="font-mono bg-gray-100 px-1 rounded">')}</span> |
| </div>`; |
| } |
| |
| |
| const constants = [...new Set(expr.match(/(π|e)/g) || [])]; |
| if (constants.length > 0) { |
| analysis += `<div class="analysis-item"> |
| <span class="font-medium">Constants:</span> |
| <span class="font-mono bg-gray-100 px-1 rounded">${constants.join('</span>, <span class="font-mono bg-gray-100 px-1 rounded">')}</span> |
| </div>`; |
| } |
| |
| |
| const openParens = (expr.match(/\(/g) || []).length; |
| const closeParens = (expr.match(/\)/g) || []).length; |
| if (openParens !== closeParens) { |
| analysis += `<div class="analysis-item text-red-500"> |
| <i class="fas fa-exclamation-triangle mr-1"></i> |
| Unbalanced parentheses (${openParens} open, ${closeParens} close) |
| </div>`; |
| } |
| |
| |
| if (expr.match(/\/\s*0/g)) { |
| analysis += `<div class="analysis-item text-red-500"> |
| <i class="fas fa-exclamation-triangle mr-1"></i> |
| Potential division by zero detected |
| </div>`; |
| } |
| if (expr.match(/\^\-?\d+/g)) { |
| analysis += `<div class="analysis-item"> |
| <i class="fas fa-info-circle text-blue-500 mr-1"></i> |
| Contains exponentiation operations |
| </div>`; |
| } |
| if (expr.match(/\!/g)) { |
| analysis += `<div class="analysis-item"> |
| <i class="fas fa-info-circle text-blue-500 mr-1"></i> |
| Contains factorial operations |
| </div>`; |
| } |
| |
| |
| if (expr.includes('=')) { |
| const parts = expr.split('='); |
| if (parts.length === 2) { |
| const left = parts[0].trim(); |
| const right = parts[1].trim(); |
| |
| analysis += `<div class="analysis-item mt-3"> |
| <div class="font-medium">Equation Analysis:</div> |
| <div class="grid grid-cols-2 gap-2 mt-2"> |
| <div class="bg-gray-50 p-2 rounded"> |
| <div class="text-xs text-gray-500">Left Side</div> |
| <div class="font-mono">${left}</div> |
| </div> |
| <div class="bg-gray-50 p-2 rounded"> |
| <div class="text-xs text-gray-500">Right Side</div> |
| <div class="font-mono">${right}</div> |
| </div> |
| </div> |
| </div>`; |
| |
| if (variables.length > 0) { |
| analysis += `<div class="analysis-item"> |
| <div class="font-medium">Solution Strategy:</div> |
| <div class="mt-1 text-sm"> |
| ${variables.length === 1 ? |
| `To solve for ${variables[0]}, isolate the variable on one side` : |
| `Need ${variables.length} independent equations to solve for ${variables.join(', ')}`} |
| </div> |
| </div>`; |
| } |
| } |
| } |
| |
| analysis += `<div class="analysis-tip bg-indigo-50 p-3 rounded-lg mt-4"> |
| <div class="flex items-center text-indigo-600 font-medium mb-2"> |
| <i class="fas fa-lightbulb mr-2"></i> |
| <div>Quick Tips</div> |
| </div> |
| <ul class="list-disc pl-5 space-y-1 text-sm"> |
| <li>Use '=' to create equations (e.g. 2x+3=7)</li> |
| <li>Assign values to variables (e.g. x=5) before evaluation</li> |
| <li>Press 'Calculate' or Enter to evaluate</li> |
| ${variables.length > 0 ? `<li>For ${variables.length > 1 ? 'systems of equations' : 'equations'}, provide ${variables.length} equation${variables.length > 1 ? 's' : ''}</li>` : ''} |
| ${functions.length > 0 ? `<li>Trigonometric functions use radians by default</li>` : ''} |
| <li>Use parentheses to control operation order</li> |
| </ul> |
| </div></div>`; |
| |
| document.getElementById('error').innerHTML = analysis; |
| document.getElementById('result').textContent = ''; |
| } |
| </script> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=shism/symcalc" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
