.calculator-container {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
max-width: 600px;
margin: 20px auto;
padding: 25px;
border: 1px solid #e1e1e1;
border-radius: 12px;
background-color: #ffffff;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.calculator-container h2 {
color: #2c3e50;
text-align: center;
margin-bottom: 25px;
font-size: 24px;
}
.input-group {
margin-bottom: 15px;
}
.input-group label {
display: block;
margin-bottom: 8px;
font-weight: 600;
color: #34495e;
}
.input-group input {
width: 100%;
padding: 12px;
border: 2px solid #ddd;
border-radius: 6px;
box-sizing: border-box;
font-size: 16px;
transition: border-color 0.3s;
}
.input-group input:focus {
border-color: #3498db;
outline: none;
}
.calc-button {
width: 100%;
padding: 15px;
background-color: #3498db;
color: white;
border: none;
border-radius: 6px;
font-size: 18px;
font-weight: bold;
cursor: pointer;
margin-top: 10px;
transition: background-color 0.3s;
}
.calc-button:hover {
background-color: #2980b9;
}
.result-display {
margin-top: 25px;
padding: 20px;
background-color: #f8f9fa;
border-radius: 8px;
border-left: 5px solid #3498db;
}
.result-item {
font-size: 18px;
margin-bottom: 10px;
color: #2c3e50;
}
.result-value {
font-weight: bold;
color: #e67e22;
}
.article-section {
margin-top: 40px;
line-height: 1.6;
color: #444;
}
.article-section h3 {
color: #2c3e50;
border-bottom: 2px solid #eee;
padding-bottom: 10px;
}
.formula-box {
background: #f1f1f1;
padding: 15px;
text-align: center;
font-family: "Courier New", Courier, monospace;
font-size: 1.2em;
margin: 20px 0;
border-radius: 4px;
}
Quadratic Formula Calculator
Coefficient a (x² term):
Coefficient b (x term):
Coefficient c (constant):
Calculate Roots
Discriminant (D):
Root 1 (x₁):
Root 2 (x₂):
How the Quadratic Formula Works
The quadratic formula is used to find the solutions (roots) of a quadratic equation. A quadratic equation is a second-order polynomial equation in a single variable x , expressed in the standard form:
ax² + bx + c = 0
Where a , b , and c are numerical coefficients. The formula to solve for x is:
x = [-b ± sqrt(b² – 4ac)] / 2a
Understanding the Discriminant
The value inside the square root, D = b² – 4ac , is known as the discriminant. It determines the nature of the roots:
D > 0: Two distinct real roots.D = 0: One repeated real root.D < 0: Two complex (imaginary) roots.
Step-by-Step Calculation Example
Suppose you have the equation x² – 5x + 6 = 0 .
Identify the coefficients: a = 1, b = -5, c = 6 .
Calculate the discriminant: (-5)² – 4(1)(6) = 25 – 24 = 1 .
Since D > 0, calculate the two roots:
x₁ = (5 + sqrt(1)) / 2 = 3
x₂ = (5 – sqrt(1)) / 2 = 2
function calculateQuadratic() {
var a = parseFloat(document.getElementById('coeffA').value);
var b = parseFloat(document.getElementById('coeffB').value);
var c = parseFloat(document.getElementById('coeffC').value);
var resArea = document.getElementById('resultArea');
var valDisc = document.getElementById('valDisc');
var valX1 = document.getElementById('valX1');
var valX2 = document.getElementById('valX2');
var msgType = document.getElementById('msgType');
if (isNaN(a) || isNaN(b) || isNaN(c)) {
alert("Please enter valid numbers for all coefficients.");
return;
}
if (a === 0) {
alert("Coefficient 'a' cannot be zero in a quadratic equation.");
return;
}
var disc = (b * b) – (4 * a * c);
valDisc.innerHTML = disc.toFixed(4);
resArea.style.display = 'block';
if (disc > 0) {
var x1 = (-b + Math.sqrt(disc)) / (2 * a);
var x2 = (-b – Math.sqrt(disc)) / (2 * a);
valX1.innerHTML = x1.toFixed(4);
valX2.innerHTML = x2.toFixed(4);
msgType.innerHTML = "Two distinct real roots found.";
} else if (disc === 0) {
var x = -b / (2 * a);
valX1.innerHTML = x.toFixed(4);
valX2.innerHTML = x.toFixed(4);
msgType.innerHTML = "One repeated real root found.";
} else {
var realPart = (-b / (2 * a)).toFixed(4);
var imagPart = (Math.sqrt(-disc) / (2 * a)).toFixed(4);
valX1.innerHTML = realPart + " + " + imagPart + "i";
valX2.innerHTML = realPart + " – " + imagPart + "i";
msgType.innerHTML = "Two complex (imaginary) roots found.";
}
}