How to design a quadratic equation calculator

Today I'll be showing you how I designed a web app that calculates the quadratic equation for real and imaginary numbers.

If you're not math savvy, real numbers in a quadratic equation are when the square root of b² - 4ac results in a negative number. We know negative square roots aren't solvable with real numbers. But they do have solutions with what we call imaginary numbers. The result of an imaginary number is denoted simply with an 'i'.

But to spare you the math course, let's talk about designing the calculator.
There's many ways to design the input for the calculator so let's go with the simplest method. We will add 3 input fields, the first for the coefficient of x², the second for the coefficient of x and the third, for the third coefficient. Which all equals to zero. If I lost you just Google the quadratic equation and read up quickly about what it is.
Moving on, here would be our input design

The markup for that:

<input class="x2" type="text">
<span>x<sup>2</sup> +</span>
<input class="x1" type="text">
<span>x+</span>
<input class="x0" type="text">
<span>= 0</span>

Then we'll add a button to calculate and a div were we can output the calculated results to:

<button>Calculate</button>    
<br><br>    
<h3>Solution</h3>
<p class="values"></p> 

This is what it looks like

Now that we have our UI, let's write the code to calculate the quadratic equation.

$('button').on('click', function() {
//we'll start by declaring our variables a,b and c as the value of the input fields above
a = $('.x2').val();
b = $('.x1').val();
c = $('.x0').val();

//our first result (the positive value of x) - here we use the quadratic equation to calculate the value of quad1
var quad1 = (-b + Math.sqrt(Math.pow(b, 2) - 4*a*c))/(2*a);
//Then again for the negative value of x
var quad2 = (-b - Math.sqrt(Math.pow(b, 2) - 4*a*c))/(2*a);

//then we can output our result to the screen inside the values p tag above
$('.values').html('X = '+quad1+' '+'X = '+quad2);
});

This will give us the result of any real roots for our quadratic equation:

But our calculator can only calculate real numbers, let's add the functionaility of calculating complex roots - results that give imaginary numbers

We'll add this right after our last line of code above:

//check if equation has complex roots (if sqrt of b^2 - 4ac is negative, result will have imaginary numbers)
if((Math.pow(b, 2) - (4*a*c)) < 0) {  
                    //if equation is even
                    if((Math.pow(b, 2) - (4*a*c)) % 2 == 0) {
                    $('.values').html('X = '+ ''+(-b/(2*a))+' + <em><i>'+((Math.sqrt(Math.abs(Math.pow(b, 2) - (4*a*c))))/(2*a))+'</i></em> i'+' , X = '+ ''+(-b/2*a)+' - <em><i>'+((Math.sqrt(Math.abs(Math.pow(b, 2) - (4*a*c))))/(2*a))+'</i></em> i'); 
                    } 
                    //if equation is odd
                    else {
                        $('.values').html('X = '+ ''+(-b/(2*a))+' + <em><i>'+((Math.sqrt(Math.abs(Math.pow(b, 2) - (4*a*c))))/(2*a)).toFixed(5)+'</i></em> i'+' , X = '+ ''+(-b/(2*a))+' - <em><i>'+((Math.sqrt(Math.abs(Math.pow(b, 2) - (4*a*c))))/(2*a)).toFixed(5)+'</i></em> i'); 
                    }
                }   
//if equation is positive, it has no imaginary numbers and is a regular quadratic equation
 else {
      //if the equation is regular but has decimals, print out only 5 decimals max
      if(quad1 % 1 != 0 && quad2 % 1 != 0) {
          $('.values').html('X = '+quad1.toFixed(5)+'&emsp;'+'X = '+quad2.toFixed(5));
       }
       else if(quad1 % 1 != 0 && quad2 % 1 == 0) {
              $('.values').html('X = '+quad1.toFixed(5)+'&emsp;'+'X = '+quad2);
            }
            else if(quad1 % 1 == 0 && quad2 % 1 != 0){
                 $('.values').html('X = '+quad1+'&emsp;'+'X = '+quad2.toFixed(5));
             }
             //if it is a regular quadratic equation with no decimals print out the results as is
             else {
                  $('.values').html('X = '+quad1+'&emsp;'+'X = '+quad2);
             }
}

And that's the entire code for a full quadratic equation calculator for real and imaginary numbers.

We can of course, add input validation so users don't enter letters or other symbols that aren't numbers.

That's it for this one, let me know what you thought about it.
Here's a link to the app online, try it out yourself!

https://flexrweb.com/quadratic/

I hope you enjoyed the article, I'll see you in the next one!

Uriel Bitton
Website: https://flexrweb.com
Portfolio: https://urielbitton.design
Email: [e-mail]