JavaScript Add Fractions | Canonise and Rationalise Fractions Tutorial

Why Rationalise or Canonise Fractions before Addition | Maths Explanation for JavaScript Kids

In this JavaScript tutorial for junior secondary students, we explore how to add fractions. Before performing the addition, we rationalise or canonise the fractions to ensure accuracy. This method uses Finding LCM in JavaScript class to align denominators, making it ideal for math programming beginners.
This JavaScript tutorial teaches young students how to add fractions with different denominators.

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

Step-by-Step Guide for Addition of Fractions - JavaScript Algorithm

The following steps will guide us in writing our JavaScript code for adding fractions.
Let's illustrate the steps to follow with the example fractional expression ²/₅ + ⁷/₄

Step 1:

Using the Find LCM in JavaScript class from the Primary Category, 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 Learn how to find LCM in JavaScript has been explained in the Primary Category.
Just make a copy of it to your current directory.

So! JavaScript Fun Practice Exercise - Add Fractions

As a fun practice exercise, feel free to try out your own fractions with different numerators and denominators, and see how the JavaScript code adds these fractions.

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>

JavaScript Code for AddFraction.js

I have a better version / See other versions.