HTML/JavaScript Code to find the GCD of two numbers

HTML/JavaScript Code to find the GCD of two numbers

4 years ago

According to Wikipedia - In mathematics, the greatest common divisor (gcd) of two or more integers, when at least one of them is not zero, is the largest positive integer that divides the numbers without a remainder. For example, the GCD of 8 and 12 is 4.

Here in this page I have shared HTML and Javascript program to find the greatest common division of two number.

Example:

Click Here For Demo

<!DOCTYPE html>
<html>
<head>
    <title> GCD Using Euclidean Algorithm </title>
    <style>
        .main{
            background-color: lime; 
            margin: auto;
            width: 40%;
            border: 3px solid green;
            padding: 10px;
            margin-top: 100px;
        }

        .head{
            background-color: rgb(230, 146, 230);
            padding: 2px;
            text-align: center;
            margin-bottom: 15px;
        }

        .result{
            font-size: 40px;
            margin-left: 50px;
        }

        .btn{
            background-color: #2d0af5; /* Green */
            border: none;
            border-radius: 10px;
            color: white;
            padding: 15px 32px;
            text-align: center;
            font-size: 16px;
            margin: 4px 2px;
            cursor: pointer;
        }

        input[type=number] {
            width: 100%;
            box-sizing: border-box;
            border: 2px solid #ccc;
            border-radius: 4px;
            font-size: 16px;
            background-color: white;
            padding: 10px;
        }
    </style>
</head>
<body>


<div class="main">
    <div class="head">
        <h2> GCD (Find Greatest Common Division) </h2>
    </div>

    <div style="text-align: center">
    <input type="number" placeholder="Enter R1" id="r1" required> <br> <br>
    <input type="number" placeholder="Enter R2" id="r2" required> <br> <br>

    <button class="btn" type="button" onclick="getInputValue();">Get Value</button>
    </div>
    <hr>
    <div class="result">
        GCD = <span id="gcd" style="color: #ff0000"></span>
    </div>
</div>

<div style="background-color: #ccc; padding: 2px; bottom: 0; position: fixed; width: 100%;">
    <marquee>
        <p> Created By Raj </p>
    </marquee>
</div>


<script>

    function gcd(a, b) {
    var R;
    while ((a % b) > 0)  {
        R = a % b;
        a = b;
        b = R;
    }
    return b;
    }

    function getInputValue(){
        var r1 = document.getElementById("r1").value;
        var r2 = document.getElementById("r2").value;
        console.log(r1);
        console.log(r2);
        document.getElementById("gcd").innerHTML = gcd(r1, r2); 
    }

</script>
</html>