Adding Fractions in JavaScript

Rationalise (Canonise) the Fractions before Addition

Normally before fractions are added, they are rationalised; i.e., they are put in a form where their denominators become the same. This same denominator is the LCM of the denominators of all the separate fractions.
After this is done, the new numerators can then be added together.

Steps for Addition of Fractions JavaScript code

The following steps will guide us in writing our code.
Let's illustrate with ²/₅ + ⁷/₄

Step 1:

Find the LCM of the denominators.
⇒ LCM of 5 & 4 = 20

Step 2:

In a turn by turn fashion, divide the found LCM from Step 1 by each denominator, multiplying the quotient by the corresponding numerator.
⇒ ^{((2 x 4) + (7 x 5))}/₂₀
= ^{(8 + 35)}/₂₀

Step 3:

Go ahead and add the numerators.
⇒ ⁴³/₂₀

Create 2 new files; On Notepad++: File, New.
Call them AddFraction.html and AddFraction.js;
Type out the adjoining JavaScript code for adding fractions.

Note: The code module for finding LCM has been explained in the Primary Category.
Just make a copy of it to your current directory.

So!

Feel free to try out your own set of numerators and denominators for fractional addition.

JavaScript code for AddFraction.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Adding Fractions</title>
        <script src="LCM.js"></script>
        <script src="AddFraction.js"></script>
    </head>
    <body>

        <h3>Add Fractions</h3>
        
        <div id="add_fraction"></div>

        <script>

            var result = "Solving:<br/>";

            // Print as fraction
            for (var i = 0; i < numerators.length-1; i++) {
                result += "<sup>" + numerators[i] + "</sup> / <sub>" + denominators[i] + "</sub>";
            result += "    +     ";
            }
            result += "<sup>" + numerators[i] + "</sup> / <sub>" + denominators[i] + "</sub><br/><br/>";

            // Carry out addition
            doAdd();

            // Print as fraction
            result += "Answer     =      ";
            result += " <sup>" + answer + "</sup> ";
            result += "/ <sub>" + LCM + "</sub><br/>";

            document.getElementById("add_fraction").innerHTML = result;

        </script>

    </body>
</html>

AddFraction.js

I have a better version / See other versions.