<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/> </head> <body> <nav class="navbar navbar-default"> <div class="container-fluid"> </div> </nav> <div class="col-md-6 well"> <hr style="border-top:1px dotted #ccc;"/> <div class="col-md-6"> <div class="form-group"> <input type="number" id="number" class="form-control"/> <br /> <br /> <br /> </div> </div> </div> </body> </html>
function convert(){ if(document.getElementById('number').value != ""){ var number = parseInt(document.getElementById('number').value); if(romanConverter(number) !== 0){ document.getElementById('result').innerHTML = "<center><label style='font-size:20px;'><span style='font-size:25px;' class='text-primary'>"+number+"</span> is equivalent to <span style='font-size:30px;' class='text-success'>"+romanConverter(number)+"</span></label></center>"; }else{ document.getElementById('result').innerHTML = ""; } }else{ alert("Please enter a number first!"); } } function reset(){ document.getElementById('number').value = ""; document.getElementById('result').innerHTML = ""; } function romanConverter(val) { var roman=['I', 'IV', 'V', 'IX', 'X', 'XL', 'L', 'XC', 'C', 'CD', 'D', 'CM', 'M']; var numbers=[1, 4, 5, 9, 10, 40, 50, 90, 100, 400, 500, 900, 1000]; var x = parseInt(val); if( x<1 || x>4999 ){ alert(x+' is invalid number.'); return 0; } var result = ""; for(i=12; i>=0;) if(numbers[i]<=x ){ result += roman[i]; x -= numbers[i]; } else{ i--; } return(result); }