← Back to Community

# Solve any Quadratic Equation (HTML, CSS, JS)

Profile icon
sharpvik

If you are lazy like me, it won't hurt you to just create this little app and solve all the quadratics with it instead of factorizing every damn time... so let's begin.

First things first, let's prepare our basic HTML backbone:

```.css-19sk4h4{position:relative;}.css-1bu6gr6{-webkit-align-items:stretch;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;border-width:0;border-style:solid;box-sizing:border-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-basis:auto;-ms-flex-preferred-size:auto;flex-basis:auto;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;outline:none;min-height:0;min-width:0;position:relative;}.css-1n2m10r{padding:var(--space-8);border-radius:var(--border-radius-4);background-color:var(--background-higher);}.css-1hwur6u{-webkit-align-items:stretch;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;border-width:0;border-style:solid;box-sizing:border-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-basis:auto;-ms-flex-preferred-size:auto;flex-basis:auto;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;outline:none;min-height:0;min-width:0;padding:var(--space-8);border-radius:var(--border-radius-4);background-color:var(--background-higher);}.css-1svvr0w{height:0;}.css-rk73ff{padding:var(--space-4);padding-left:var(--space-4);padding-right:var(--space-2);font-family:var(--font-family-code);font-size:14px;line-height:var(--line-height-small);overflow-x:auto;tab-size:2;word-break:break-word;white-space:break-spaces;overflow-wrap:anywhere;}```<!-- This file is: index.html -->
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link href="style.css" rel="stylesheet" type="text/css">

<body>
<!-- HTML elements go here -->

<script src="script.js"></script>
</body>
</html>``````

Now, we'll need a header `h1`, few `input` fields, submit `button`, and `div`s to display answers.

``````<!-- This file is: index.html -->
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link href="style.css" rel="stylesheet" type="text/css">

<body>
<h1>Solve Any Quadratic Equation</h1>
<div id="input">
<input id="a"> x<sup>2</sup> <input id="b"> x <input id="c"> = 0
</div>
<button id="submit">Solve</button>
<p id="DIS"></p>
<p id="NOS">No solutions</p>
<p id="S1"></p>
<p id="S2"></p>
</div>

<script src="script.js"></script>
</body>
</html>``````

I put them in `div`s so it's easier to manipulate their CSS styles. Our `input`s are going to be filled with the coefficients for the quadratic, `#DIS` is going to display the discriminant, `#NOS` is a single line that says "No solutions" (we are going to only make it visible when there are no real roots), `#S1` & `#S2` are going to hold the answers.

The HTML portion of our code is now complete.

Let's add some styles now:

``````/* This file is: style.css */
h1 {
font-family: Arial, Calibry, sans-serif;
margin-bottom: 30px;
}

body {
font-family: Georgia, serif;
text-align: center;
}

input {
text-align: center;
width: 80px;
font-size: 28px;
}

#input {
font-size: 28px;
}

button {
margin: 30px auto;
background-color: blue;
border: none;
color: white;
cursor: pointer;
}

#NOS {
display: none;
}``````

I recon I don't need to explain anything here since these are just styles. You can change these as you like. I didn't make it too fancy because why would I, but if you want to, you can "sweat" a bit.

The only important part is to make `#NOS` `display: none` since we only want to display this one when there are no real roots.

The last and the main thing we need is some JavaScript magic to make it work. I am not going to use JQuery just because this app is too small and we can actually deal with it without any external help, so first of all I'll write 2 functions to replace some of the JQuery's functionality.

``````/* This file is: script.js */
function getID(i) {
return document.getElementById(i);
}
function getVal(i) {
return getID(i).value;
}``````

Now that we have `getID()` and `getVal()` in place, we can code for real. What we want is this: whenever user would press the `#submit` button, we want to do execute some function `solve()`. To do so, we are going to add an event listener to the button and also let's declare an empty (for now) function `solve()`.

``````/* This file is: script.js */
function getID(i) {
return document.getElementById(i);
}
function getVal(i) {
return getID(i).value;
}

function solve() {
// IMPLEMENT ME, PLEASE!
}

var submitButton = document.getElementById("submit");
submitButton.onclick = function() {
solve();
};``````

This is the backbone of our JS. Now let's `solve()` it.

Before anything else, we have to fetch those coefficients, so let's get to it:

``````/* Focusing on the solve() function */
function solve() {
var a = parseInt( getVal("a") ),
b = parseInt( getVal("b") ),
c = parseInt( getVal("c") );
if ( isNaN(a) ) { a = 1; }
if ( isNaN(b) ) { b = 0; }
if ( isNaN(c) ) { c = 0; }
}``````

Last 3 lines with `if ( isNaN(x) ) { x = ... }` ensure that we don't have a `NaN` type inside `a`, `b`, or `c`.

The next thing to do is calculating the discriminant. Discriminant is always equal to `D = b*b - 4ac`

``````/* Focusing on the solve() fucntion */
function solve() {
var a = parseInt( getVal("a") ),
b = parseInt( getVal("b") ),
c = parseInt( getVal("c") );
if ( isNaN(a) ) { a = 1; }
if ( isNaN(b) ) { b = 0; }
if ( isNaN(c) ) { c = 0; }
var D = b*b - 4 * a * c;
}``````

Let's declare some more variables and set everything to its initial state (e.g. `#S1` & `#S2` must be empty before we display any solutions and `#NOS` must be reset to `display: none` every time the `#submit` button is pressed):

``````/* Focusing on the solve() fucntion */
function solve() {
var a = parseInt( getVal("a") ),
b = parseInt( getVal("b") ),
c = parseInt( getVal("c") );
if ( isNaN(a) ) { a = 1; }
if ( isNaN(b) ) { b = 0; }
if ( isNaN(c) ) { c = 0; }
var D = b*b - 4 * a * c;
var dis = getID("DIS"),
nos = getID("NOS"),
s1  = getID("S1"),
s2  = getID("S2");
nos.style.display = "none";
s1.innerHTML = "";
s2.innerHTML = "";
dis.innerHTML = 'Discriminant = <span id="D"></span>';
var d = getID("D");
}``````

Now that all the helper variables are put in place, we can start displaying the answer. First of all, let's display the discriminant. After we do that, we have three options depending on its value:

• D is smaller than 0 --> no real roots
• D is equal to 0 --> one root
• D is greater than 0 --> two roots
``````/* Focusing on the solve() function */
function solve() {
var a = parseInt( getVal("a") ),
b = parseInt( getVal("b") ),
c = parseInt( getVal("c") );
if ( isNaN(a) ) { a = 1; }
if ( isNaN(b) ) { b = 0; }
if ( isNaN(c) ) { c = 0; }
var D = b*b - 4 * a * c;
var dis = getID("DIS"),
nos = getID("NOS"),
s1  = getID("S1"),
s2  = getID("S2");
nos.style.display = "none";
s1.innerHTML = "";
s2.innerHTML = "";
dis.innerHTML = 'Discriminant = <span id="D"></span>';
var d = getID("D");
d.innerHTML = D.toString();
if (D < 0) {
// no real roots
// display #NOS
}
else if (D == 0) {
// one root equal to
// S = -b / (2a)
}
else {
// two roots equal to
// S1 = (-b + √D) / (2a)
// S2 = (-b - √D) / (2a)
}
}``````

Last step and we are all set! Let's just replace comments with real code!

``````/* Focusing on the solve() function */
function solve() {
var a = parseInt( getVal("a") ),
b = parseInt( getVal("b") ),
c = parseInt( getVal("c") );
if ( isNaN(a) ) { a = 1; }
if ( isNaN(b) ) { b = 0; }
if ( isNaN(c) ) { c = 0; }
var D = b*b - 4 * a * c;
var dis = getID("DIS"),
nos = getID("NOS"),
s1  = getID("S1"),
s2  = getID("S2");
nos.style.display = "none";
s1.innerHTML = "";
s2.innerHTML = "";
dis.innerHTML = 'Discriminant = <span id="D"></span>';
var d = getID("D");
d.innerHTML = D.toString();
if (D < 0) {
nos.style.display = "block";
}
else if (D == 0) {
var S = -b / (2 * a);
s1.innerHTML = S.toString();
}
else {
var S1 = ( -b + Math.sqrt(D) ) / (2 * a),
S2 = ( -b - Math.sqrt(D) ) / (2 * a);
s1.innerHTML = S1.toString();
s2.innerHTML = S2.toString();
}
}``````

Our script is now finally ready. We can now solve any quadratic equation using this simple web app! Enjoy.

Voters
Profile icon
brandogudino36
Profile icon
Mansoorhgy
Profile icon
randihotdog
Profile icon
Retrospicer
Profile icon
studentPranavPr
Profile icon
Khalid718
Profile icon
jacobxycat1395
Profile icon
RunMyLIfe
Profile icon
Juanb95
Profile icon
FRANKVENZARA
hotnewtop
Profile icon

This is really interesting, but what's a quadratic equation?

Profile icon
sharpvik