JSFiddle - React, Tailwind, and code Playground

by BurpmanJunior

HTML

<h2>Modulus calculator</h2>

<table border="0">
    <tr>
        <td>Input:</td>
        <td>
            <input type="number" id="input-a">
        </td>
    </tr>
    <tr>
        <td>Check against:</td>
        <td>
            <input type="number" id="input-b">
        </td>
    </tr>
</table>
<button onclick="modCalc();">Calculate</button>
<hr />
<div id="output"></div>

CSS

html, body {
    font-family: sans-serif;
    color: #111;
}
em {
    font-family: monospace;
}
strong {
    text-decoration: underline;
}

JavaScript

/**
 * MOD CALC
 */

function modCalc() {
    var a = document.getElementById('input-a').value;
    var b = document.getElementById('input-b').value;
    a = Math.max(0, a);
    b = Math.max(0, b);

    var r = a - (b * Math.floor(a / b));

    var str = '<p>';
    str += 'Input <em>(a)</em>: ' + a + '<br />';
    str += 'Checking against <em>(b)</em>: ' + b + '<br /><br />';
    str += 'Formula: <em>a - (b * &lfloor;(a / b)&rfloor;)</em><br /><br />';
    str += '<em>' + a + ' - (' + b + ' * &lfloor;(' + a + ' / ' + b + ')&rfloor;) = <strong>' + r + '</strong></em><br /></p>';

    document.getElementById('output').innerHTML = str;
}