Multiply Fractions in JavaScript | A Junior Secondary Math Guide

Understanding the Math Behind Fraction Multiplication | Maths Explanation for JavaScript Kids

Learning how to multiply fractions in JavaScript is a great way to combine math skills with coding. This tutorial is designed for junior secondary students who want to understand fraction multiplication using simple JavaScript classes and constructors.

Multiplying fractions is pretty straightforward:
Cancel out all common factors between numerators and denominators, then multiply whatever is left numerator to numerator and denominator to denominator.

In this lesson, we'll walk through the step-by-step method of multiplying fractions using JavaScript. You'll learn how to define a class, use constructors, and apply logic to find mutual factors and simplify results.

Step-by-Step Explanation of Algorithm to Multiply Fractions in JavaScript

This JavaScript algorithm for fractions shows how to multiply two fractions and reduce them to their lowest terms. It's a great math coding project for beginners.
Understanding how to multiply multiple fractions in JavaScript helps students build both computational thinking and math fluency. It's a foundational skill for more advanced topics like algebra and data science.

If we have
⁴/₉ x ²¹/₈;

Step 1:

Find any common factor between any numerator and any denominator.

Step 2:

Cancel out any such common factor.

=		X	7
	4		21
	9		8
	3

Step 3:

Repeat Steps 1 & 2 recursively until there are no more common factors.

=	1	X
	4		7
	3		8
			2

=	7
	6

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

So! JavaScript Fun Practice Exercise - Multiply 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 multiplies those fractions.

JavaScript Code for MultiplyFraction.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Multiplying Fractions</title>
        <script src="MultiplyFraction.js"></script>
    </head>
    <body>

        <h3>Multiply Fractions</h3>
        
        <div id="multiply_fraction"></div>

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

            try {
                // Carry out multiplication
                maxMember();
                doMultiply();

                result += "         ";
                // Print as fraction
                result += "Answer     =      ";
                result += " <sup>" + answer[0] + "</sup> ";
                result += "/ <sub>" + answer[1] + "</sub><br/>";

                document.getElementById("multiply_fraction").innerHTML = result;
            } catch (e) {
                alert(e.toString);
            }
        </script>

    </body>
</html>

JavaScript Code for MultiplyFraction.js

I have a better version / See other versions.