Aprenda a criar uma Calculadora Simples e Uma Científica, código todo documentado para ajudar em seus estudos de programação.
Calculadora Simples:
Display
Botões numéricos e operadores +, -, *, /
Botão igual (=) para calcular expressão
Botão limpar (C)
Botão ponto decimal
Tratamento de erro.
Calculadora Científica:
Display maior
Botões numéricos, operadores básicos, parênteses, ponto
Funções: sin, cos, tan, asin, acos, atan, log (log10), ln, sqrt, pow (x^y), pi, e, exp, etc.
Botão igual para avaliar expressão.
Botão limpar (C), apagar (DEL).
Irá usar eval.
Documentação: explicar como os eventos de clique adicionam ao display, como a avaliação é feita, tratamento de erros.
Também preciso garantir que o Tailwind esteja incluído.
Escreverei o HTML completo com duas seções. Usarei layout responsivo com grid.
Vou produzir o código.
Segue o código HTML completo que implementa uma calculadora simples e uma científica, com documentação detalhada passo a passo.
<!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"> <title>Athena Calc | Calculadora Simples + Científica</title> <!-- Tailwind CSS v3 + CDN oficial + Font Awesome para ícones opcionais (melhoria visual) --> <script src="https://cdn.tailwindcss.com"></script> <!-- Fonte moderna e suavização --> <link href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400;14..32,500;14..32,600;14..32,700&display=swap" rel="stylesheet"> <style> /* Customização leve para melhorar a experiência e foco visual */ body { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; background: linear-gradient(145deg, #f1f5f9 0%, #e2e8f0 100%); } /* Efeito sutil nos botões */ button { transition: all 0.15s ease; cursor: pointer; user-select: none; } button:active { transform: scale(0.96); } /* Estilo para o display simular um visor digital */ .calc-display { background: #0f172a; color: #f8fafc; font-family: 'JetBrains Mono', 'Inter', monospace; letter-spacing: 1px; box-shadow: inset 0 2px 5px rgba(0,0,0,0.2), 0 1px 0 rgba(255,255,255,0.1); } /* Rolagem suave para telas pequenas */ @media (max-width: 640px) { .container-calc { padding-left: 0.75rem; padding-right: 0.75rem; } } /* Tooltip visual para funções (melhoria didática) */ [data-tooltip] { position: relative; } [data-tooltip]:hover::after { content: attr(data-tooltip); position: absolute; bottom: 120%; left: 50%; transform: translateX(-50%); background: #1e293b; color: white; font-size: 0.7rem; padding: 0.2rem 0.5rem; border-radius: 6px; white-space: nowrap; z-index: 20; pointer-events: none; } </style> </head> <body class="antialiased"> <!-- Cabeçalho profissional e descrição do artigo --> <header class="max-w-6xl mx-auto pt-8 px-4 text-center md:text-left"> <div class="bg-white/60 backdrop-blur-sm rounded-2xl p-5 shadow-sm border border-white/40"> <h1 class="text-3xl md:text-4xl font-extrabold bg-gradient-to-r from-indigo-700 to-purple-800 bg-clip-text text-transparent">📐 Athena Calc: Calculadoras Web — Simples & Científica</h1> <p class="text-gray-700 mt-2 text-lg font-medium">Implementação completa com <code class="bg-gray-200 px-1 rounded">HTML5</code>, <code class="bg-gray-200 px-1 rounded">JavaScript (ES6+)</code> e <code class="bg-gray-200 px-1 rounded">Tailwind CSS</code>. Documentação passo a passo, lógica funcional e design responsivo.</p> <div class="flex flex-wrap gap-2 mt-3 justify-center md:justify-start text-sm text-indigo-800"> <span class="bg-indigo-100 px-3 py-1 rounded-full">✔️ Operações básicas</span> <span class="bg-indigo-100 px-3 py-1 rounded-full">✔️ Funções trigonométricas</span> <span class="bg-indigo-100 px-3 py-1 rounded-full">✔️ Logaritmos e exponenciais</span> <span class="bg-indigo-100 px-3 py-1 rounded-full">✔️ Layout responsivo</span> </div> </div> </header> <!-- Container principal com duas colunas (grid) para as duas calculadoras --> <main class="max-w-6xl mx-auto py-8 px-4 container-calc"> <div class="grid grid-cols-1 lg:grid-cols-2 gap-8"> <!-- ============================================ --> <!-- CALCULADORA SIMPLES (BÁSICA) --> <!-- ============================================ --> <section class="bg-white/90 backdrop-blur-sm rounded-2xl shadow-xl overflow-hidden border border-gray-200 transition-all hover:shadow-2xl"> <div class="bg-gradient-to-r from-slate-800 to-slate-900 px-5 py-4"> <h2 class="text-2xl font-bold text-white flex items-center gap-2"> 🧮 Calculadora Simples <span class="text-xs bg-white/20 px-2 py-0.5 rounded-full font-mono">Aritmética básica</span> </h2> <p class="text-slate-300 text-sm mt-1">Adição, subtração, multiplicação, divisão e expressões com ponto decimal.</p> </div> <div class="p-5"> <!-- Display da calculadora simples --> <div class="calc-display w-full p-4 text-right text-3xl font-mono rounded-xl mb-5 overflow-x-auto whitespace-nowrap" id="displaySimples"> 0 </div> <!-- Grade de botões (layout semelhante a calculadora comum) --> <div class="grid grid-cols-4 gap-2.5"> <!-- Linha 1: C, /, *, ← (limpar, operadores e apagar último) --> <button data-simples="clear" class="bg-red-500 hover:bg-red-600 text-white font-bold py-3 rounded-xl shadow-md transition">AC</button> <button data-simples="/" class="bg-gray-700 hover:bg-gray-800 text-white font-bold py-3 rounded-xl shadow-md text-xl">÷</button> <button data-simples="*" class="bg-gray-700 hover:bg-gray-800 text-white font-bold py-3 rounded-xl shadow-md text-xl">×</button> <button data-simples="backspace" class="bg-amber-600 hover:bg-amber-700 text-white font-bold py-3 rounded-xl shadow-md">⌫</button> <!-- Linha 2: 7 8 9 - --> <button data-simples="7" class="bg-gray-200 hover:bg-gray-300 text-gray-900 font-bold py-3 rounded-xl shadow-md">7</button> <button data-simples="8" class="bg-gray-200 hover:bg-gray-300 text-gray-900 font-bold py-3 rounded-xl shadow-md">8</button> <button data-simples="9" class="bg-gray-200 hover:bg-gray-300 text-gray-900 font-bold py-3 rounded-xl shadow-md">9</button> <button data-simples="-" class="bg-gray-700 hover:bg-gray-800 text-white font-bold py-3 rounded-xl shadow-md">−</button> <!-- Linha 3: 4 5 6 + --> <button data-simples="4" class="bg-gray-200 hover:bg-gray-300 text-gray-900 font-bold py-3 rounded-xl shadow-md">4</button> <button data-simples="5" class="bg-gray-200 hover:bg-gray-300 text-gray-900 font-bold py-3 rounded-xl shadow-md">5</button> <button data-simples="6" class="bg-gray-200 hover:bg-gray-300 text-gray-900 font-bold py-3 rounded-xl shadow-md">6</button> <button data-simples="+" class="bg-gray-700 hover:bg-gray-800 text-white font-bold py-3 rounded-xl shadow-md">+</button> <!-- Linha 4: 1 2 3 = (botão igual destaque) --> <button data-simples="1" class="bg-gray-200 hover:bg-gray-300 text-gray-900 font-bold py-3 rounded-xl shadow-md">1</button> <button data-simples="2" class="bg-gray-200 hover:bg-gray-300 text-gray-900 font-bold py-3 rounded-xl shadow-md">2</button> <button data-simples="3" class="bg-gray-200 hover:bg-gray-300 text-gray-900 font-bold py-3 rounded-xl shadow-md">3</button> <button data-simples="=" class="bg-green-600 hover:bg-green-700 text-white font-bold py-3 rounded-xl shadow-md row-span-2 text-2xl">=</button> <!-- Linha 5: 0 . e espaço (zero dupla largura visual) --> <button data-simples="0" class="bg-gray-200 hover:bg-gray-300 text-gray-900 font-bold py-3 rounded-xl shadow-md col-span-2">0</button> <button data-simples="." class="bg-gray-200 hover:bg-gray-300 text-gray-900 font-bold py-3 rounded-xl shadow-md">.</button> </div> <!-- Explicação passo a passo simples (didática) --> <div class="mt-5 text-xs text-gray-500 border-t pt-3 italic"> 📘 <strong class="text-gray-700">Passo a passo (Simples):</strong> Clique nos dígitos/operadores para montar a expressão. Pressione <strong class="bg-gray-100 px-1 rounded">=</strong> para calcular. <strong>AC</strong> limpa tudo, <strong>⌫</strong> apaga último caractere. O JavaScript avalia a expressão com <code>eval()</code> seguro após sanitização. </div> </div> </section> <!-- ============================================ --> <!-- CALCULADORA CIENTÍFICA (AVANÇADA) --> <!-- ============================================ --> <section class="bg-white/90 backdrop-blur-sm rounded-2xl shadow-xl overflow-hidden border border-gray-200 transition-all hover:shadow-2xl"> <div class="bg-gradient-to-r from-indigo-800 to-purple-900 px-5 py-4"> <h2 class="text-2xl font-bold text-white flex items-center gap-2"> 🔬 Calculadora Científica <span class="text-xs bg-white/20 px-2 py-0.5 rounded-full font-mono">Trig + Log + Exp</span> </h2> <p class="text-indigo-200 text-sm mt-1">Funções: seno, cosseno, tangente, logaritmo, potência, raiz quadrada, constantes.</p> </div> <div class="p-5"> <!-- Display da calculadora científica --> <div class="calc-display w-full p-4 text-right text-2xl md:text-3xl font-mono rounded-xl mb-4 overflow-x-auto whitespace-nowrap" id="displayCientifica"> 0 </div> <!-- Painel de botões científicos (2 linhas adicionais com funções) --> <div class="grid grid-cols-5 gap-2 mb-3"> <!-- Funções científicas linha superior --> <button data-cient="sin" class="bg-indigo-100 hover:bg-indigo-200 text-indigo-800 font-semibold py-2 rounded-lg shadow text-sm" data-tooltip="sin(radianos)">sin</button> <button data-cient="cos" class="bg-indigo-100 hover:bg-indigo-200 text-indigo-800 font-semibold py-2 rounded-lg shadow text-sm" data-tooltip="cos(radianos)">cos</button> <button data-cient="tan" class="bg-indigo-100 hover:bg-indigo-200 text-indigo-800 font-semibold py-2 rounded-lg shadow text-sm" data-tooltip="tan(radianos)">tan</button> <button data-cient="log" class="bg-indigo-100 hover:bg-indigo-200 text-indigo-800 font-semibold py-2 rounded-lg shadow text-sm" data-tooltip="log10(x)">log₁₀</button> <button data-cient="ln" class="bg-indigo-100 hover:bg-indigo-200 text-indigo-800 font-semibold py-2 rounded-lg shadow text-sm" data-tooltip="ln(x)">ln</button> <button data-cient="sqrt" class="bg-indigo-100 hover:bg-indigo-200 text-indigo-800 font-semibold py-2 rounded-lg shadow text-sm" data-tooltip="√(x)">√</button> <button data-cient="pow2" class="bg-indigo-100 hover:bg-indigo-200 text-indigo-800 font-semibold py-2 rounded-lg shadow text-sm" data-tooltip="x²">x²</button> <button data-cient="pow" class="bg-indigo-100 hover:bg-indigo-200 text-indigo-800 font-semibold py-2 rounded-lg shadow text-sm" data-tooltip="x^y">xʸ</button> <button data-cient="pi" class="bg-indigo-100 hover:bg-indigo-200 text-indigo-800 font-semibold py-2 rounded-lg shadow text-sm">π</button> <button data-cient="e" class="bg-indigo-100 hover:bg-indigo-200 text-indigo-800 font-semibold py-2 rounded-lg shadow text-sm">e</button> <button data-cient="asin" class="bg-indigo-50 hover:bg-indigo-100 text-indigo-700 font-medium py-2 rounded-lg text-xs">asin</button> <button data-cient="acos" class="bg-indigo-50 hover:bg-indigo-100 text-indigo-700 font-medium py-2 rounded-lg text-xs">acos</button> <button data-cient="atan" class="bg-indigo-50 hover:bg-indigo-100 text-indigo-700 font-medium py-2 rounded-lg text-xs">atan</button> <button data-cient="exp" class="bg-indigo-50 hover:bg-indigo-100 text-indigo-700 font-medium py-2 rounded-lg text-xs">eˣ</button> <button data-cient="abs" class="bg-indigo-50 hover:bg-indigo-100 text-indigo-700 font-medium py-2 rounded-lg text-xs">|x|</button> </div> <!-- Grade principal de dígitos e operadores (layout 5 colunas) --> <div class="grid grid-cols-5 gap-2"> <button data-cient="clear" class="bg-red-500 hover:bg-red-600 text-white font-bold py-2.5 rounded-xl shadow-md col-span-2">AC</button> <button data-cient="backspace" class="bg-amber-600 hover:bg-amber-700 text-white font-bold py-2.5 rounded-xl shadow-md">⌫</button> <button data-cient="(" class="bg-gray-600 hover:bg-gray-700 text-white font-bold py-2.5 rounded-xl shadow-md">(</button> <button data-cient=")" class="bg-gray-600 hover:bg-gray-700 text-white font-bold py-2.5 rounded-xl shadow-md">)</button> <button data-cient="7" class="bg-gray-200 hover:bg-gray-300 text-gray-900 font-bold py-3 rounded-xl">7</button> <button data-cient="8" class="bg-gray-200 hover:bg-gray-300 text-gray-900 font-bold py-3 rounded-xl">8</button> <button data-cient="9" class="bg-gray-200 hover:bg-gray-300 text-gray-900 font-bold py-3 rounded-xl">9</button> <button data-cient="/" class="bg-gray-700 hover:bg-gray-800 text-white font-bold py-3 rounded-xl">÷</button> <button data-cient="%" class="bg-gray-700 hover:bg-gray-800 text-white font-bold py-3 rounded-xl">%</button> <button data-cient="4" class="bg-gray-200 hover:bg-gray-300 text-gray-900 font-bold py-3 rounded-xl">4</button> <button data-cient="5" class="bg-gray-200 hover:bg-gray-300 text-gray-900 font-bold py-3 rounded-xl">5</button> <button data-cient="6" class="bg-gray-200 hover:bg-gray-300 text-gray-900 font-bold py-3 rounded-xl">6</button> <button data-cient="*" class="bg-gray-700 hover:bg-gray-800 text-white font-bold py-3 rounded-xl">×</button> <button data-cient="-" class="bg-gray-700 hover:bg-gray-800 text-white font-bold py-3 rounded-xl">−</button> <button data-cient="1" class="bg-gray-200 hover:bg-gray-300 text-gray-900 font-bold py-3 rounded-xl">1</button> <button data-cient="2" class="bg-gray-200 hover:bg-gray-300 text-gray-900 font-bold py-3 rounded-xl">2</button> <button data-cient="3" class="bg-gray-200 hover:bg-gray-300 text-gray-900 font-bold py-3 rounded-xl">3</button> <button data-cient="+" class="bg-gray-700 hover:bg-gray-800 text-white font-bold py-3 rounded-xl">+</button> <button data-cient="=" class="bg-green-600 hover:bg-green-700 text-white font-bold py-3 rounded-xl row-span-2 text-xl">=</button> <button data-cient="0" class="bg-gray-200 hover:bg-gray-300 text-gray-900 font-bold py-3 rounded-xl col-span-2">0</button> <button data-cient="." class="bg-gray-200 hover:bg-gray-300 text-gray-900 font-bold py-3 rounded-xl">.</button> <button data-cient="^" class="bg-gray-700 hover:bg-gray-800 text-white font-bold py-3 rounded-xl">^</button> </div> <div class="mt-4 text-xs text-gray-500 border-t pt-3"> 📐 <strong class="text-gray-700">Passo a passo (Científica):</strong> Expressões completas aceitam funções como <code>sin(30*pi/180)</code>, log, potência (^ convertido para **). <strong>AC</strong> limpa, <strong>⌫</strong> deleta caractere. <strong>π</strong> e <strong>e</strong> inserem constantes. O cálculo é feito com <code>Function()</code> seguro pós-substituição de ^ e funções matemáticas. </div> </div> </section> </div> </main> <!-- Rodapé com palavras-chave e hashtags conforme solicitado --> <footer class="bg-white/70 backdrop-blur-sm border-t border-gray-200 py-6 mt-6"> <div class="max-w-6xl mx-auto px-4 text-center text-gray-600 text-sm"> <p class="font-mono text-gray-500 break-words">🔑 <span class="font-semibold">15 PALAVRAS-CHAVE:</span> calculadora simples, calculadora científica, HTML5, JavaScript, Tailwind CSS, funções trigonométricas, logaritmos, exponenciais, interface responsiva, manipulação DOM, eventos de clique, avaliação de expressões, design moderno, front-end interativo, projeto educacional</p> <p class="font-mono text-gray-500 break-words mt-2">🏷️ <span class="font-semibold">15 HASHTAGS:</span> #CalculadoraWeb #JavaScript #HTML5 #TailwindCSS #FrontEnd #DevWeb #CalculadoraCientifica #Programacao #CSS3 #MathJS #ProjetoJavaScript #AprenderProgramar #WebApp #UIclean #LogicaDeProgramacao</p> <p class="text-xs text-gray-400 mt-4">© 2025 Athena Calc — Implementação didática open-source. Documentação completa e código comentado.</p> </div> </footer> <script> // ================================================================== // DOCUMENTAÇÃO GERAL // ================================================================== // 1. Duas calculadoras independentes: Simples e Científica. // 2. Manipulação via dataset e listeners centralizados. // 3. Display dinâmico e validação de erros com try/catch. // 4. Função segura para avaliar expressões (sem eval puro, usando Function). // 5. Suporte a funções matemáticas (Math object), substituição de ^ por **. // 6. Tratamento de backspace, limpeza e prevenção de erros de sintaxe. // ================================================================== // -------------------- DOM elements -------------------- const displaySimples = document.getElementById('displaySimples'); const displayCientifica = document.getElementById('displayCientifica'); // Estado atual das expressões (strings) let expressaoSimples = '0'; let expressaoCientifica = '0'; // Função auxiliar para atualizar o display da simples function atualizarDisplaySimples() { if (expressaoSimples === '' || expressaoSimples === null) expressaoSimples = '0'; displaySimples.innerText = expressaoSimples; } function atualizarDisplayCientifica() { if (expressaoCientifica === '' || expressaoCientifica === null) expressaoCientifica = '0'; displayCientifica.innerText = expressaoCientifica; } // ========== LÓGICA DA CALCULADORA SIMPLES ========== // Limpa tudo function limparSimples() { expressaoSimples = '0'; atualizarDisplaySimples(); } // Apagar último caractere (backspace) function backspaceSimples() { if (expressaoSimples.length === 1 || (expressaoSimples === '0')) { expressaoSimples = '0'; } else { expressaoSimples = expressaoSimples.slice(0, -1); if (expressaoSimples === '') expressaoSimples = '0'; } atualizarDisplaySimples(); } // Adicionar valor/operador à expressão da calculadora simples function addToSimples(valor) { // Evita operador consecutivo no início? Regra amigável: se for operador e a expressão for 0, substitui? if (expressaoSimples === '0' && /[0-9.]/.test(valor)) { expressaoSimples = valor; } else if (expressaoSimples === '0' && /[+\-*/]/.test(valor)) { expressaoSimples = valor; } else { expressaoSimples += valor; } // Limita tamanho da expressão para não estourar visual (opcional) if (expressaoSimples.length > 50) expressaoSimples = expressaoSimples.slice(0, 50); atualizarDisplaySimples(); } // Função de cálculo para Simples (avalia a expressão matemática) function calcularSimples() { let expr = expressaoSimples; if (expr === '' || expr === '0') return; try { // Converte o símbolo "×" (multiplicação visual) para "*" e "÷" para "/" let exprFormatada = expr.replace(/×/g, '*').replace(/÷/g, '/'); // Avaliação segura usando Function (evita acesso ao window/dom) // Validação: apenas caracteres permitidos: números, operadores, ., parênteses if (!/^[\d\s+\-*/%.()]+$/.test(exprFormatada)) { throw new Error('Expressão inválida'); } // Função de cálculo segura const calcular = new Function('return (' + exprFormatada + ')'); let resultado = calcular(); // Tratamento de resultados decimais (até 8 casas) if (isNaN(resultado) || !isFinite(resultado)) throw new Error('Erro matemático'); resultado = parseFloat(resultado.toFixed(8)); expressaoSimples = resultado.toString(); atualizarDisplaySimples(); } catch (error) { displaySimples.innerText = 'Erro'; expressaoSimples = '0'; setTimeout(() => atualizarDisplaySimples(), 1200); } } // ========== LÓGICA DA CALCULADORA CIENTÍFICA ========== function limparCientifica() { expressaoCientifica = '0'; atualizarDisplayCientifica(); } function backspaceCientifica() { if (expressaoCientifica.length === 1 || expressaoCientifica === '0') { expressaoCientifica = '0'; } else { expressaoCientifica = expressaoCientifica.slice(0, -1); if (expressaoCientifica === '') expressaoCientifica = '0'; } atualizarDisplayCientifica(); } function addToCientifica(valor) { if (expressaoCientifica === '0' && /[0-9(]/.test(valor)) { expressaoCientifica = valor; } else if (expressaoCientifica === '0' && /[+\-*/^%]/.test(valor)) { expressaoCientifica = valor; } else { expressaoCientifica += valor; } if (expressaoCientifica.length > 70) expressaoCientifica = expressaoCientifica.slice(0, 70); atualizarDisplayCientifica(); } // Processar funções científicas (insere no display a chamada de função adequada) function inserirFuncaoCientifica(funcao) { let inserir = ''; switch(funcao) { case 'sin': inserir = 'sin('; break; case 'cos': inserir = 'cos('; break; case 'tan': inserir = 'tan('; break; case 'log': inserir = 'log10('; break; case 'ln': inserir = 'ln('; break; case 'sqrt': inserir = 'sqrt('; break; case 'pow2': inserir = '^2'; break; // x² simples case 'pow': inserir = '^'; break; // operador de potência case 'pi': inserir = 'π'; break; case 'e': inserir = 'e'; break; case 'asin': inserir = 'asin('; break; case 'acos': inserir = 'acos('; break; case 'atan': inserir = 'atan('; break; case 'exp': inserir = 'exp('; break; case 'abs': inserir = 'abs('; break; default: return; } // Se a expressão atual for 0 e não for operador, substitui if (expressaoCientifica === '0' && !/[0-9]/.test(inserir)) { expressaoCientifica = inserir; } else { expressaoCientifica += inserir; } atualizarDisplayCientifica(); } // Cálculo completo para a científica (com suporte a funções trigonométricas radianos, constantes, etc) function calcularCientifica() { let expr = expressaoCientifica; if (!expr || expr === '0') return; try { // Substituições: π -> Math.PI, e -> Math.E, ^ -> **, log10 -> log10, ln -> log, etc let expressaoPronta = expr .replace(/π/g, 'Math.PI') .replace(/e(?![a-zA-Z0-9_])/g, 'Math.E') .replace(/\^/g, '**') .replace(/log10\(/g, 'Math.log10(') .replace(/ln\(/g, 'Math.log(') .replace(/sin\(/g, 'Math.sin(') .replace(/cos\(/g, 'Math.cos(') .replace(/tan\(/g, 'Math.tan(') .replace(/asin\(/g, 'Math.asin(') .replace(/acos\(/g, 'Math.acos(') .replace(/atan\(/g, 'Math.atan(') .replace(/sqrt\(/g, 'Math.sqrt(') .replace(/exp\(/g, 'Math.exp(') .replace(/abs\(/g, 'Math.abs('); // Substituição para x²: se encontrar ^2, mantém, e já foi resolvido o ^ // Garantir que o símbolo de multiplicação e divisão visuais estejam corretos expressaoPronta = expressaoPronta.replace(/×/g, '*').replace(/÷/g, '/'); // Validação de segurança: permite apenas padrões matemáticos, números, Math, funções // Expressão regular mais permissiva mas bloqueia scripts if (/[^0-9+\-*/%().,Math\sPI\*\\*\\*\\^esin costan log ln sqrt abs asin acos atan exp pi e**]/i.test(expressaoPronta)) { // caracteres suspeitos throw new Error('Expressão contém caracteres inválidos'); } // Usa Function para contexto restrito passando o objeto Math const calculoFunction = new Function('Math', 'return (' + expressaoPronta + ')'); let resultado = calculoFunction(Math); if (isNaN(resultado) || !isFinite(resultado)) throw new Error('Resultado indefinido'); resultado = parseFloat(resultado.toFixed(10)); expressaoCientifica = resultado.toString(); atualizarDisplayCientifica(); } catch (err) { displayCientifica.innerText = 'Erro'; expressaoCientifica = '0'; setTimeout(() => atualizarDisplayCientifica(), 1300); } } // ========== EVENTOS GLOBAIS (DELEGAÇÃO) ========== document.querySelectorAll('[data-simples]').forEach(btn => { btn.addEventListener('click', (e) => { e.stopPropagation(); const acao = btn.getAttribute('data-simples'); if (acao === 'clear') limparSimples(); else if (acao === 'backspace') backspaceSimples(); else if (acao === '=') calcularSimples(); else addToSimples(acao); }); }); document.querySelectorAll('[data-cient]').forEach(btn => { btn.addEventListener('click', (e) => { e.stopPropagation(); const acao = btn.getAttribute('data-cient'); // Mapeamento de ações especiais científicas const funcoesCientificas = ['sin','cos','tan','log','ln','sqrt','pow2','pow','pi','e','asin','acos','atan','exp','abs']; if (acao === 'clear') limparCientifica(); else if (acao === 'backspace') backspaceCientifica(); else if (acao === '=') calcularCientifica(); else if (funcoesCientificas.includes(acao)) inserirFuncaoCientifica(acao); else addToCientifica(acao); }); }); // Inicialização dos displays atualizarDisplaySimples(); atualizarDisplayCientifica(); // Adiciona ao contexto global pequeno aviso no console amigável console.log('✅ Athena Calc carregada | Calculadora simples + científica | Documentação interativa'); </script> </body> </html>
0 Comentários
Deixe seu comentário e sua sugestão de conteúdo.