Learn to Code via Tutorials on Repl.it!

← Back to all posts
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 divs to display answers.

I put them in divs so it's easier to manipulate their CSS styles. Our inputs 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 always works. You can see how good it is, we've just used it to solve any quadratic using our small personal web app :)


@sharpvik Cool!