14
Solve any Quadratic Equation (HTML, CSS, JS)
sharpvik (36)

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:

<!-- This file is: index.html -->
<!DOCTYPE html>
<html>
  <head>
    <title>Quad</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <link href="style.css" rel="stylesheet" type="text/css">
  </head>
  
  <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 divs to display answers.

<!-- This file is: index.html -->
<!DOCTYPE html>
<html>
  <head>
    <title>Quad</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <link href="style.css" rel="stylesheet" type="text/css">
  </head>
  
  <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>
    <div id="answers">
      <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 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:

/* 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;
  padding: 10px 15px;
  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.

You are viewing a single comment. View All
1
2IsAPrimeNumber (10)

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

2
sharpvik (36)

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