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

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:

Now, we'll need a header `h1`

, few `input`

fields, submit `button`

, and `div`

s to display answers.

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:

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.

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 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:

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`

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):

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

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

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

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

@2IsAPrimeNumber a quadratic equation is an equation of this form:

ax^2 + bx + c = 0

where a, b, and c are coefficients, a is not equal to 0 and x is the unknown variable.

It is usually solved using 2 different methods -- factorization or quadratic formula. Where factorization is usually done by humans and relies on some human abilities, quadratic formula is more deterministic and it

alwaysworks. You can see how good it is, we've just used it to solve any quadratic using our small personal web app :)@sharpvik Cool!