Convert Improper to Mixed Fractions Using JavaScript

Understanding Fractional Numbers | Maths Explanation for JavaScript Kids

Welcome to this junior secondary JavaScript math project! In this tutorial, you'll learn how to convert improper fractions to mixed fractions using JavaScript. This beginner-friendly guide is perfect for students exploring math with JavaScript, and includes a simple JavaScript script to help you understand fraction conversion step by step.

Whether you're just starting out with JavaScript or looking for a fun math coding activity, this project will show you how to build a mixed fraction calculator using basic programming concepts.
Coding fractions in JavaScript is a fun way to combine math and programming. This project helps junior secondary students build confidence in both areas, and also teaches how to apply math logic in JavaScript code.

As before, fractional numbers can either be Proper (e.g. ²/₅), Improper (e.g. ⁵/₂), or Mixed (e.g. 2¹/₂),

Step-by-Step Explanation of Improper Fraction to Mixed Fraction Conversion in JavaScript

Say we have the fraction ¹⁰/₃ - which is an improper fraction - we can write a JavaScript algorithm that converts this improper fraction to a mixed fraction by following a number of steps:

Step 1:

Find the largest number smaller than the numerator (10), that can divide the denominator - 3 - without remainder.
⇒ 9

Step 2:

Subtract the found number (9) - from Step 1 - from the numerator (10)
⇒ 10 - 9 = 1;
This yields the whole number.

Step 3:

Divide the found number (9) - from Step 1 - by the denominator (3)
⇒ ⁹/₃ = 3;
This yields the new numerator.

Step 4:

Reuse the denominator (3) to get our mixed fraction
⇒ 3¹/₃

Create a new file; On Notepad++: File, New.
Call it ImproperToMixed.html.
Type out the adjoining JavaScript code for converting improper to mixed fractions.

So! JavaScript Fun Practice Exercise - Convert Improper Fraction to Mixed Fraction

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

JavaScript Code for Convert Improper Fraction To Mixed Fraction

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Converting from Improper fraction to Mixed fraction</title>
    </head>
    <body>

        <h3>Converting from Improper to Mixed the fraction</h3>
        
        <div id="improper_mixed"></div>

        <script>

            var numerator = 10;
            var denominator = 3;
            var whole_number;
            var new_numerator = numerator;
            var result = "Converting from Improper to Mixed the fraction:<br/>";

            // Print as fraction
            result += "<sup>" + numerator + "</sup> / <sub>" + denominator + "</sub><br/><br/>";

            var dividend; // Highest multiple of denominator less than numerator
            // Carry out conversion
            // STEP 1:
            for (dividend = numerator - 1; dividend > 1; dividend--) {
                if ((dividend % denominator) === 0) {
                    // STEP 2:
                    new_numerator = numerator - dividend;
                    // STEP 3:
                    whole_number = dividend / denominator;
                    break;
                }
            }

            // Print as fraction
            // STEP 4:
            result += "Answer     =      " + whole_number;
            result += " <sup>" + new_numerator + "</sup> ";
            result += "/ <sub>" + denominator + "</sub><br/>";

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

        </script>

    </body>
</html>

I have a better version / See other versions.