The Roman Numerator

index.html

<div id="main">
<div class="container-fluid">
  <div class="row" style="border-bottom: solid #ccc .5px;">
       <div class="col-md-6 text-center numerator">
  <h1>{{title}}</h1>
  <input class="form-control" v-model="number" placeholder="insert number here"></div>
  <div class="col-md-6 text-center" style="width: 100%;">
    <h1>{{roman | uppercase}}</h1>
    <hr>
    <p class="display-4">{{number | roman}}</p>  </div>
</div>
  <div class="row text-center">
    <div class="col-md-12">
      <a class="btn btn-lg btn-primary" target="_blank" href="http://dewofyouryouth.com">Dew of your Youth</a>
    </div>
    
  </div>
  </div>
</div>

script.js

Vue.filter('roman', function(value){
	
	function romanNums(value, int, str){
	var result = "";
  while(value >= int){
  	result += str;
    value -= int;
  }
  return result
}

var result = "";
var intArr = [100000, 50000, 10000, 5000, 1000, 900, 500, 400, 100, 90, 50, 40, 10, 9, 5, 4, 1];
var strArr = ["ↈ", "ↇ", "ↂ", "ↁ","M", "CM", "D", "CD", "C", "XC", "L", "XL", "X", "IX", "V", "IV", "I"];

for(i = 0; i < intArr.length; i++){
	result += romanNums(value, intArr[i], strArr[i]);
  value = value - Math.floor((value/intArr[i])) * intArr[i];
}
	
  return result;

});

Vue.filter('uppercase', function(value){
	return value.toUpperCase();
});

new Vue({
	el: '#main',
  data: {
	title: "The Roman Numerator",
  roman: "hic est numerus",
  number: ""
}
  
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>

style.css

body{
  background-color: #fbf7f5;
}

a {
  margin-top: 10px;
} 

.row{
  padding: 30px;
}

h1, .display-4{
font-family: 'DejaVu Serif', serif;
word-break: break-word;
color: #444;
}

.numerator{
  border-right: solid #ccc .5px;
}

@media only screen and (max-width: 770px) {
  .numerator{
    border-right: none;
  }
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css" rel="stylesheet" />

the-roman-numerator.markdown

The Roman Numerator

Converts a number to the roman numeral equivalent.

A Pen by Yaakov Shore on CodePen.

License.