|
|
<!DOCTYPE html> |
|
|
<html lang="pt-BR"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Calculadora de Equação do 2º Grau</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"> |
|
|
<style> |
|
|
.math-display { |
|
|
font-family: 'Times New Roman', Times, serif; |
|
|
font-style: italic; |
|
|
} |
|
|
.solution-step { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.solution-step:hover { |
|
|
transform: translateX(5px); |
|
|
background-color: rgba(243, 244, 246, 0.5); |
|
|
} |
|
|
.input-highlight { |
|
|
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gradient-to-br from-blue-50 to-indigo-100 min-h-screen"> |
|
|
<div class="container mx-auto px-4 py-8 max-w-4xl"> |
|
|
<div class="text-center mb-8"> |
|
|
<h1 class="text-4xl font-bold text-indigo-800 mb-2">Calculadora de Equação Quadrática</h1> |
|
|
<p class="text-lg text-gray-600">Resolva equações do segundo grau no formato ax² + bx + c = 0</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-xl shadow-lg overflow-hidden mb-8"> |
|
|
<div class="p-6"> |
|
|
<div class="flex flex-col md:flex-row gap-6"> |
|
|
<div class="flex-1"> |
|
|
<h2 class="text-2xl font-semibold text-gray-800 mb-4">Insira os coeficientes</h2> |
|
|
|
|
|
<div class="space-y-4"> |
|
|
<div> |
|
|
<label for="a" class="block text-sm font-medium text-gray-700 mb-1">Coeficiente a (x²)</label> |
|
|
<div class="relative"> |
|
|
<input type="number" id="a" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 input-highlight" placeholder="Ex: 1" step="any"> |
|
|
<div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none text-gray-400"> |
|
|
<span class="math-display">x² +</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label for="b" class="block text-sm font-medium text-gray-700 mb-1">Coeficiente b (x)</label> |
|
|
<div class="relative"> |
|
|
<input type="number" id="b" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 input-highlight" placeholder="Ex: 5" step="any"> |
|
|
<div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none text-gray-400"> |
|
|
<span class="math-display">x +</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label for="c" class="block text-sm font-medium text-gray-700 mb-1">Coeficiente c</label> |
|
|
<div class="relative"> |
|
|
<input type="number" id="c" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 input-highlight" placeholder="Ex: 6" step="any"> |
|
|
<div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none text-gray-400"> |
|
|
<span class="math-display">= 0</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-6"> |
|
|
<button onclick="solveEquation()" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-3 px-4 rounded-lg transition duration-300 flex items-center justify-center gap-2"> |
|
|
<i class="fas fa-calculator"></i> |
|
|
Calcular Raízes |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex-1"> |
|
|
<h2 class="text-2xl font-semibold text-gray-800 mb-4">Sua equação</h2> |
|
|
<div class="bg-gray-50 p-4 rounded-lg h-32 flex items-center justify-center"> |
|
|
<p id="equation-display" class="text-2xl math-display text-center text-gray-700"> |
|
|
<span class="text-gray-400">ax² + bx + c = 0</span> |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="mt-4"> |
|
|
<div class="flex items-center gap-2 text-sm text-gray-600"> |
|
|
<i class="fas fa-info-circle text-indigo-500"></i> |
|
|
<span>Insira os coeficientes para ver a equação formatada</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="solution-container" class="bg-white rounded-xl shadow-lg overflow-hidden hidden"> |
|
|
<div class="p-6"> |
|
|
<h2 class="text-2xl font-semibold text-gray-800 mb-4 flex items-center gap-2"> |
|
|
<i class="fas fa-brain text-indigo-600"></i> |
|
|
Passo a Passo da Solução |
|
|
</h2> |
|
|
|
|
|
<div id="solution-steps" class="space-y-4"> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="mt-6 pt-4 border-t border-gray-200"> |
|
|
<h3 class="text-xl font-medium text-gray-800 mb-2 flex items-center gap-2"> |
|
|
<i class="fas fa-chart-line text-green-600"></i> |
|
|
Resultado Final |
|
|
</h3> |
|
|
<div id="final-result" class="bg-green-50 p-4 rounded-lg"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-8 bg-indigo-50 rounded-lg p-4 border border-indigo-100"> |
|
|
<h3 class="text-lg font-medium text-indigo-800 mb-2 flex items-center gap-2"> |
|
|
<i class="fas fa-lightbulb text-indigo-600"></i> |
|
|
Sobre a Fórmula Quadrática |
|
|
</h3> |
|
|
<p class="text-gray-700 mb-3"> |
|
|
A fórmula quadrática para resolver equações do segundo grau é: |
|
|
</p> |
|
|
<div class="bg-white p-3 rounded-md shadow-sm text-center mb-3"> |
|
|
<p class="text-xl math-display font-medium"> |
|
|
x = [-b ± √(b² - 4ac)] / (2a) |
|
|
</p> |
|
|
</div> |
|
|
<p class="text-gray-700"> |
|
|
O discriminante Δ = b² - 4ac determina a natureza das raízes: |
|
|
</p> |
|
|
<ul class="list-disc pl-5 mt-2 space-y-1 text-gray-700"> |
|
|
<li>Δ > 0: Duas raízes reais distintas</li> |
|
|
<li>Δ = 0: Uma raiz real dupla</li> |
|
|
<li>Δ < 0: Duas raízes complexas conjugadas</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.querySelectorAll('input').forEach(input => { |
|
|
input.addEventListener('input', updateEquationDisplay); |
|
|
}); |
|
|
|
|
|
function updateEquationDisplay() { |
|
|
const a = document.getElementById('a').value || 'a'; |
|
|
const b = document.getElementById('b').value || 'b'; |
|
|
const c = document.getElementById('c').value || 'c'; |
|
|
|
|
|
|
|
|
let equation = ''; |
|
|
|
|
|
|
|
|
if (a === '1') equation += 'x²'; |
|
|
else if (a === '-1') equation += '-x²'; |
|
|
else equation += `${a}x²`; |
|
|
|
|
|
|
|
|
if (b[0] === '-') { |
|
|
equation += ` - ${b.slice(1) === '1' ? '' : b.slice(1)}x`; |
|
|
} else { |
|
|
equation += ` + ${b === '1' ? '' : b}x`; |
|
|
} |
|
|
|
|
|
|
|
|
if (c[0] === '-') { |
|
|
equation += ` - ${c.slice(1)}`; |
|
|
} else { |
|
|
equation += ` + ${c}`; |
|
|
} |
|
|
|
|
|
equation += ' = 0'; |
|
|
|
|
|
|
|
|
if (a === 'a' && b === 'b' && c === 'c') equation = 'ax² + bx + c = 0'; |
|
|
|
|
|
document.getElementById('equation-display').innerHTML = equation; |
|
|
} |
|
|
|
|
|
function solveEquation() { |
|
|
const a = parseFloat(document.getElementById('a').value); |
|
|
const b = parseFloat(document.getElementById('b').value); |
|
|
const c = parseFloat(document.getElementById('c').value); |
|
|
|
|
|
|
|
|
if (isNaN(a) || isNaN(b) || isNaN(c)) { |
|
|
alert('Por favor, insira valores válidos para todos os coeficientes.'); |
|
|
return; |
|
|
} |
|
|
|
|
|
if (a === 0) { |
|
|
alert('O coeficiente "a" não pode ser zero em uma equação quadrática.'); |
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
document.getElementById('solution-steps').innerHTML = ''; |
|
|
document.getElementById('final-result').innerHTML = ''; |
|
|
|
|
|
|
|
|
document.getElementById('solution-container').classList.remove('hidden'); |
|
|
|
|
|
|
|
|
const discriminant = b * b - 4 * a * c; |
|
|
|
|
|
|
|
|
addSolutionStep(`1. Identificamos os coeficientes: a = ${a}, b = ${b}, c = ${c}`); |
|
|
addSolutionStep(`2. Calculamos o discriminante Δ = b² - 4ac`); |
|
|
addSolutionStep(` Δ = (${b})² - 4 × ${a} × ${c} = ${b*b} - ${4*a*c} = ${discriminant}`); |
|
|
|
|
|
if (discriminant > 0) { |
|
|
addSolutionStep(`3. Como Δ > 0, a equação tem duas raízes reais distintas`); |
|
|
const sqrtDiscriminant = Math.sqrt(discriminant); |
|
|
addSolutionStep(`4. Calculamos a raiz quadrada do discriminante: √${discriminant} ≈ ${sqrtDiscriminant.toFixed(4)}`); |
|
|
|
|
|
const x1 = (-b + sqrtDiscriminant) / (2 * a); |
|
|
const x2 = (-b - sqrtDiscriminant) / (2 * a); |
|
|
|
|
|
addSolutionStep(`5. Aplicamos a fórmula quadrática:`); |
|
|
addSolutionStep(` x = [ -(${b}) ± ${sqrtDiscriminant.toFixed(4)} ] / (2 × ${a})`); |
|
|
addSolutionStep(` x₁ = [ ${-b} + ${sqrtDiscriminant.toFixed(4)} ] / ${2*a} ≈ ${x1.toFixed(4)}`); |
|
|
addSolutionStep(` x₂ = [ ${-b} - ${sqrtDiscriminant.toFixed(4)} ] / ${2*a} ≈ ${x2.toFixed(4)}`); |
|
|
|
|
|
|
|
|
document.getElementById('final-result').innerHTML = ` |
|
|
<p class="text-lg font-medium text-gray-800">A equação tem duas raízes reais:</p> |
|
|
<div class="mt-2 grid grid-cols-1 md:grid-cols-2 gap-4"> |
|
|
<div class="bg-blue-50 p-3 rounded-lg"> |
|
|
<p class="text-sm text-blue-600">Primeira raiz (x₁)</p> |
|
|
<p class="text-xl math-display font-bold">${x1.toFixed(4)}</p> |
|
|
</div> |
|
|
<div class="bg-blue-50 p-3 rounded-lg"> |
|
|
<p class="text-sm text-blue-600">Segunda raiz (x₂)</p> |
|
|
<p class="text-xl math-display font-bold">${x2.toFixed(4)}</p> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
} |
|
|
else if (discriminant === 0) { |
|
|
addSolutionStep(`3. Como Δ = 0, a equação tem uma raiz real dupla`); |
|
|
const x = -b / (2 * a); |
|
|
|
|
|
addSolutionStep(`4. Aplicamos a fórmula quadrática simplificada:`); |
|
|
addSolutionStep(` x = -b / (2a) = -(${b}) / (2 × ${a}) = ${x.toFixed(4)}`); |
|
|
|
|
|
|
|
|
document.getElementById('final-result').innerHTML = ` |
|
|
<p class="text-lg font-medium text-gray-800">A equação tem uma raiz real dupla:</p> |
|
|
<div class="mt-2 bg-blue-50 p-4 rounded-lg"> |
|
|
<p class="text-xl math-display font-bold text-center">${x.toFixed(4)}</p> |
|
|
</div> |
|
|
`; |
|
|
} |
|
|
else { |
|
|
addSolutionStep(`3. Como Δ < 0, a equação não tem raízes reais, mas duas raízes complexas conjugadas`); |
|
|
const realPart = -b / (2 * a); |
|
|
const imaginaryPart = Math.sqrt(-discriminant) / (2 * a); |
|
|
|
|
|
addSolutionStep(`4. Calculamos as partes real e imaginária:`); |
|
|
addSolutionStep(` Parte Real = -b / (2a) = -(${b}) / (2 × ${a}) = ${realPart.toFixed(4)}`); |
|
|
addSolutionStep(` Parte Imaginária = √|Δ| / (2a) = √${-discriminant} / ${2*a} ≈ ${imaginaryPart.toFixed(4)}`); |
|
|
|
|
|
|
|
|
document.getElementById('final-result').innerHTML = ` |
|
|
<p class="text-lg font-medium text-gray-800">A equação tem duas raízes complexas conjugadas:</p> |
|
|
<div class="mt-2 grid grid-cols-1 md:grid-cols-2 gap-4"> |
|
|
<div class="bg-purple-50 p-3 rounded-lg"> |
|
|
<p class="text-sm text-purple-600">Primeira raiz (x₁)</p> |
|
|
<p class="text-xl math-display font-bold">${realPart.toFixed(4)} + ${Math.abs(imaginaryPart).toFixed(4)}i</p> |
|
|
</div> |
|
|
<div class="bg-purple-50 p-3 rounded-lg"> |
|
|
<p class="text-sm text-purple-600">Segunda raiz (x₂)</p> |
|
|
<p class="text-xl math-display font-bold">${realPart.toFixed(4)} - ${Math.abs(imaginaryPart).toFixed(4)}i</p> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
} |
|
|
} |
|
|
|
|
|
function addSolutionStep(text) { |
|
|
const stepDiv = document.createElement('div'); |
|
|
stepDiv.className = 'solution-step bg-gray-50 p-3 rounded-lg'; |
|
|
stepDiv.innerHTML = `<p class="text-gray-800">${text}</p>`; |
|
|
document.getElementById('solution-steps').appendChild(stepDiv); |
|
|
} |
|
|
</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=Luiz74/equa-o-2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
