Roman Numeral Converter Javascript | Convert Decimal To Roman Numerals Javascript

Roman Numeral Converter Javascript | Convert Decimal To Roman Numerals Javascript

Roman Numeral Converter Javascript | Convert Decimal To Roman Numerals Javascript


Welcome🎉 to Code With Random blog. In this blog, we learn how we create a Roman Numeral Converter Javascript. We use HTML, Css, and javascript for this Roman Numeral Converter Javascript. I hope you enjoy our blog so let’s start with a basic HTML structure for the Roman Numeral Converter Javascript.
 <div class="container">  
  <h1>Roman Numeral Converter</h1>  
  <input type="number" placeholder="Type a number" id="number">  
  <div id="result">&nbsp;</div>  
 </div>

There is all the HTML code for the Roman Numeral Converter Javascript. Now, you can see an output with Roman Numeral Converter Javascript then we write javascript for Roman Numeral Converter Javascript.

output

Roman Numeral Converter Javascript | Convert Decimal To Roman Numerals Javascript

CSS code

 body {  
  background: #ddc;  
  font-family: 'Cinzel Decorative', cursive;  
 }  
 .container {  
  text-align: center;  
  margin: 80px auto;  
  width: 600px;  
  background: #eee;  
  padding: 10px;  
  border-radius: 5px;  
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);  
  border: 1px solid rgba(0, 0, 0, 0.4);  
 }  
 h1 {  
  color: #aaa;  
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1);  
 }  
 input {  
  font-family: 'Cinzel Decorative', cursive;  
  padding: 10px;  
  outline: none;  
  font-size: 18px;  
 }  
 #result {  
  padding: 10px 0;  
  font-weight: bold;  
 }  
 p.footer {  
  font-size: 0.8rem;  
  text-align: center;  
 }  
 p.footer a {  
  text-decoration: none;  
  color: #333;  
  border-bottom: 2px solid #ccc;  
 }

Css Updated output


Roman Numeral Converter Javascript | Convert Decimal To Roman Numerals Javascript

Javascript code

 var ONES = ['I', 'II', 'III', 'IV', 'V', 'VI', 'VII', 'VIII', 'IX'];  
 var TENS = ['X', 'XX', 'XXX', 'XL', 'L', 'LX', 'LXX', 'LXXX', 'XC'];  
 var HUNDREDS = ['C', 'CC', 'CCC', 'CD', 'D', 'DC', 'DCC', 'DCCC', 'CM'];  
 var THOUSANDS = ['M', 'MM', 'MMM', 'MMMM'];  
 function convertToRoman(num) {  
  var ones = num % 10;  
  var tens = Math.floor(num / 10) % 10;  
  var hundreds = Math.floor(num / 100) % 10;  
  var thousands = Math.floor(num / 1000) % 10;  
  var largest = 1;  
  var s = '';  
  if (thousands > 0) {  
   s += THOUSANDS[thousands - 1];  
  }  
  if (hundreds > 0) {  
   s += HUNDREDS[hundreds - 1];  
  }  
  if (tens > 0) {  
   s += TENS[tens - 1];  
  }  
  if (ones > 0) {  
   s += ONES[ones - 1];  
  }  
  return s;  
 }  
 function onSubmit(e) {  
  e.preventDefault();  
  var val = document.querySelector('#number').value;  
  val = parseInt(val);  
  var result = '';  
  if (isNaN(val)) {  
   result = 'Not a number.';  
  } else if (val < 0) {  
   result = 'This doesn't work for negative numbers.';  
  } else if (val === 0) {  
   result = 'Romans have no concept of zero.';  
  } else if (val >= 5000) {  
   result = 'Only numbers up to 4999 are supported.';  
  } else {  
   result = convertToRoman(val);  
  }  
  document.querySelector('#result').innerHTML = result;  
  return false;  
 }  
 document.addEventListener('DOMContentLoaded', function() {  
  document.querySelector('#number').addEventListener('input', onSubmit);  
 });

Final output

Roman Numeral Converter Javascript | Convert Decimal To Roman Numerals Javascript


Now that we have completed our javascript section,  Here is our updated output with javascript. Hope you like the Roman Numeral Converter Javascript . you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕!

In this post, we learn how to create aRoman Numeral Converter Javascript using simple HTML & CSS, and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning. 

Written by – Code With Random/Anki 

Code by – Frederik De Bleser



Leave a Reply