Build a Roman Numeral Converter Project - Build a Roman Numeral Converter

Tell us what’s happening:

Describe your issue in detail here.
is there any formula that is used to convert arabic to roman

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <link rel="stylesheet" href="styles.css">
   <h1>Roman Numeral Converter</h1>
<div class="container">
  <input id="number" placeholder="Number" type="number">
  <button id="convert-btn" type="submit">Convert</button>
  <div id="output">
  <p id="result"></p>

<script src="script.js">


/* file: styles.css */
body {width: 100vw;
    justify-content: center;
    align-items: center;
    background-color: azure;

.container {
    border: 4px solid rgb(0, 0, 0);
    background-color: silver;
    width: 500px;
    margin-top: 50px;
    margin-left: 80px;
    height: 200px;
    padding: 24px;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;

/* file: script.js */

let number = document.getElementById("number");
let btn = document.getElementById("convert-btn");
let result = document.getElementById("output");

btn.addEventListener("click", numberInput);
function numberInput(){
if(number.value === ''){
  result.textContent="Please enter a valid number";
else if (number.value < 1){
  result.textContent="Please enter a number greater than or equal to 1";
else if (number.value >=3999){
  result.textContent="Please enter a number less than or equal to 3999";
  const romantoArabic = [
    {roman: "M", arabic:1000}, 
    {roman: "CM", arabic:900} ,
    {roman: "D", arabic:500} ,
    {roman: "CD", arabic:400} ,
    {roman: "C", arabic:100} ,
    {roman: "XC", arabic:90} ,
    {roman: "L", arabic:50} ,
    {roman: "XL", arabic:40} ,
    {roman: "X", arabic:10} ,
    {roman: "IX", arabic:9} ,
    {roman: "V", arabic:5} ,
    {roman: "IV", arabic:4} ,
    {roman: "I", arabic:1} 
  let converted = []
for(let i=0; i < romantoArabic.length;i++)
  while(number >= romantoArabic[i].arabic){
    converted += romantoArabic[i].roman;
    number -= romantoArabic[i].arabic
  result.textContent = "Converted Roman Numeral: " + converted;

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/ Safari/537.36

Challenge Information:

Build a Roman Numeral Converter Project - Build a Roman Numeral Converter

You appear to have created this post without editing the template. Please edit your post to Tell us what’s happening in your own words.

A single simple formula? No. You’ll need to develop a process to convert between the two.

1 Like