What is a quadratic equation?

A quadratic equation is an algebraic equation in the form ax² + bx + c where a, b and c are real numbers and a is not equal to 0. Also, a and b are coefficients of x² (pronounced x-squared) and x respectively while c is a constant.

Note: ax² is pronounced a x-squared

To solve a quadratic equation, we need to find its roots. Mathematically, we can solve the equation (or determine its roots) using any of the following methods:

Completing the square
Factorisation
Formula x = (−b ± √(b² − 4ac)) / 2a.

This tutorial follows the formula method. To follow along, you need basic knowledge of:

HTML: for markup of the app
CSS: Interface design
JavaScript: for the logic to solve the equation

Let's build the UI using HTML.

First, we need to build the user interface of our app. This is where you will input the coefficients of the equation to obtain its roots.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Quadratic Formula</title>
  </head>
  <body>
       <div class="container">
              <h1>Find the roots of a quadratic equation</h1>
                <p>Assume that this is your quadratic equation: <em>3x<sup>2</sup> + 9x + 6c</em>;</p>
                <p>a = 3, b = 9 and c = 6</p>
                <div class="input_a">
                    <em>a : </em>
                    <input class="input_num numa" type="number">
              </div>
              <div class="input_b">
                  <em>b : </em>
                <input class="input_num numb" type="number">
              </div>
              <div class="input_c">
                  <em>c : </em>
                  <input class="input_num numc" type="number">
              </div>
              <button class="btn" onclick="calculate()">Calculate</button>
              <p class="result"></p>
    </div>


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

Upon implementing the markup above, you should get a UI that looks like this:

To style our app and make it functional, we have linked our CSS <link rel="stylesheet" href="style.css"> and JavaScript files <script src="app.js"></script> within the head and body tags respectively. (We have only linked the files, we are yet to write any code for them)

Let's write the logic

Next, implement the JavaScript code to solve the quadratic equation.

To do this, create a new file and name it app.js. This has already been linked in our HTML body tag. You can output anything to the console to confirm that the JS file has been linked correctly.

Here is the JavaScript code for our app:

  function calculate(){
    let result = document.querySelector(".result")
    let a = document.querySelector(".numa").value;
    let b = document.querySelector(".numb").value;
    let c = document.querySelector(".numc").value;
    let root1 = ((-b + Math.sqrt((Math.pow(b, 2) - (4 * a * c)))) / (2 * a)).toFixed(1);
    let root2 = ((-b - Math.sqrt((Math.pow(b, 2) - (4 * a * c)))) / (2 * a)).toFixed(1);
    result.textContent = "The roots of this equation are " + root1 + " and " + root2;

}

Let's break down the code:

In the first line, we're declaring a function called calculate. All our logic will live inside this function.

    function calculate(){
  }

If you go back to our HTML file, you will realise that this function is being called each time the calculate button is clicked. You may as well decide to use the addEventListener in your JS file.

In the first four lines inside the function, we are declaring variables with reference to some class names. This enables us to manipulate the elements:

    let result = document.querySelector(".result");
    let a = document.querySelector(".numa").value;
    let b = document.querySelector(".numb").value;
    let c = document.querySelector(".numc").value;

In the next two lines, we are declaring two variables root1 and root2

   let root1 = ((-b + Math.sqrt((Math.pow(b, 2) - (4 * a * c)))) / (2 * a)).toFixed(1);
   let root2 = ((-b - Math.sqrt((Math.pow(b, 2) - (4 * a * c)))) / (2 * a)).toFixed(1);

Note: The Math.sqrt() and Math.pow() are in-built JavaScript methods for solving mathematical problems. You can find more information about JavaScript math objects here.

This calculation is done based on the formula given at the beginning of the article:

x = (−b ± √(b² − 4ac)) / 2a By appending toFixed(1), we are telling JavaScript to round up all answers to 1 decimal place.

Now, let's try with the given equation 3x² + 9x + 6; (3x-squared plus 9x plus 6)

a = 3 // coefficient of x² b = 9 // coefficient of 9 c = 6 // constant

By putting the respective values of a, b and c into the fields provided and clicking the calculate button, we get the following values which are the roots of the equation:

CSS

Finally, let's add some style to give the app some aesthetic appeal. Create a style.css file and add the following:

   * {
    box-sizing: border-box;
    margin: 0;
  }
  body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 10px;
    /* background-color: #b83b5e; */
  }

  .container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    min-height: 100vh;
    flex-direction: column;
    background-color: #463333;
  }

  h1 {
    color: #fff;
  }

  .input_num {
    max-width: 3rem;
    height: 1.5rem;
    margin: 0.3rem;
    outline: none;
    padding: 0.2rem;
  }

  span,
  p {
    font-size: large;
    color: #fff;
  }

  .btn {
    margin-top: 0.7rem;
    margin-left: 1rem;
    padding: 0.7rem;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
      Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
    background-color: crimson;
    border: none;
    color: #fff;
    font-weight: 800;
    border-radius: 0.3rem;
    cursor: pointer;
  }

  .btn:hover {
    background-color: rgb(145, 110, 110);
    color: #fff;
  }

  p {
    font-size: 1rem;
    margin-bottom: 15px;
  }
  sup {
    font-size: 0.8rem;
  }

  em {
    font-size: x-large;
    color: lightsalmon;
  }

Final app:

Conclusion:

In this tutorial, you have learnt how to write a JavaScript program to solve a math problem.

Thank you for reading.

Victor's Thoughts

Victor's Thoughts

Solve Quadratic Equations on the Go!

Creating a JS program to solve quadratic equations

Table of contents

What is a quadratic equation?

Let's build the UI using HTML.

Let's write the logic

CSS