Roman Numeral Calculator

by Steven Rogers

HTML

<table>
    <tr>
        <td>
            <input id="input-n-to-r" type="text" placeholder="Number to Roman" /> <input type="button" value="Convert" id="calc-n-to-r" />
        </td>
        <td>
            <input id="input-r-to-n" type="text" placeholder="Roman to Number" /> <input type="button" value="Convert" id="calc-r-to-n" />
        </td>
    </tr>
    <tr>
        <td>
            RESULT: <span id="output-n-to-r"></span>
        </td>
        <td>
            RESULT: <span id="output-r-to-n"></span>
        </td>
    </tr>
</table>
<br>
<p>
    Warining: The converter does not have solid error checking, please make sure the Roman Numerals entered into the right side are in the correct order. Invalid Roman Numerals will be calculated vastly incorrectly resulting in weird outputs.<br><br>Please follow the rules listed <a href="http://home.hiwaay.net/~lkseitz/math/roman/numerals.shtml">HERE</a>
</p>
<br><br><br>
<table>
    <tr>
        <td>
            Roman Numeral
        </td>
        <td>
            Base 10 Equivelant
        </td>
    </tr>
    <tr>
        <td>
            I
        </td>
        <td>
            1
        </td>
    </tr>
    <tr>
        <td>
            V
        </td>
        <td>
            5
        </td>
    </tr>
    <tr>
        <td>
            X
        </td>
        <td>
            10
        </td>
    </tr>
    <tr>
        <td>
            L
        </td>
        <td>
            50
        </td>
    </tr>
    <tr>
        <td>
            C
        </td>
        <td>
            100
        </td>
    </tr>
    <tr>
        <td>
            D
        </td>
        <td>
            500
        </td>
    </tr>
    <tr>
        <td>
            M
        </td>
        <td>
            1,000
        </td>
    </tr>
    <tr>
        <td>
            V&#773;
        </td>
        <td>
            5,000
        </td>
    </tr>
    <tr>
        <td>
            X&#773;
        </td>
        <td>
            10,000
       ...

CSS

table, td, tr { border: 1px solid black; }
td { padding: 20px }
body{ padding: 20px }

JavaScript

// Binding functions to the buttons
$("#calc-n-to-r").click(calculateRoman);
$("#calc-r-to-n").click(calculateNumber);

// Create a global array of all the numbers
// I used an array so I could get the number by data.indexOf(letter);
// OR get the letter simply from data[number]
var data = [];
data[1] = 'I';
data[5] = 'V';
data[10] = 'X';
data[50] = 'L';
data[100] = 'C';
data[500] = 'D';
data[1000] = 'M';
data[5000] = 'V̅';
data[10000] = 'X̅';
data[50000] = 'L̅';
data[100000] = 'C̅';
data[500000] = 'D̅';
data[1000000] = 'M̅';





// This function calculates the roman numerals FROM a number
function calculateRoman() {
    console.log('start');
    // Get the input from the input box
    var input = $("#input-n-to-r").val();
    
    // Impossible to represent decimal points in roman numerals
    if((input.indexOf('.') != -1) || (input.indexOf('-') != -1)){
        alert("SORRY, romands didn't understand the concept of parts of a number or negative numbers. Minus signs and decimal points not allowed (NO '.' OR '-' ALLOWED)");
        return;
    }
    
    // Remove anything that is not a numberical value
    input = input.replace(/[^\d]/g, '');
    
    // Put it back, so the user knows what we're working with
    $("#input-n-to-r").val(input.replace(/\B(?=(\d{3})+(?!\d))/g, ","));
    
    // Romans couldn't handle anything bigger than 4 million
    if(input >= 4000000){
        alert("This number is waay too big, Romans can't handle that! Their numeric system went from 1 to 3,999,999");
        return;
    }
    
    // Make a variable to contain the output, we will add to this
    var output = '';
    
    console.log('Starting loop...');
    // Go through each digit from left to right
    for(var key in input){
        // Get the actual digit as an integer so we can use it
        var number = parseInt(input[key]);
        
        // If the number is bigger than 0, we got work to do...
        while(number > 0){
            
            // Get the placement...