In this tutorial we will create a roman numeral to integer and integer to roman, two in one converter in javascript.
Roman numerals are a number system that originated in ancient Rome. Numbers in this system are represented by combinations of letters where each letter have fixed integer value.
HTML:- Layout the elements.
CSS:- Styling the layout.
Javascript:- Creating two different programs to convert roman to integer(Easy) and integer to roman(Hard).
I assume you have got a good idea about what are we going to do, so lets start building it.
Creating the layout of the roman to numeral converter.
As you can see in the above image we have two sections, one which has the calculator and second which as the info of the letter and their associated values.
So we will create two sections inside a wrapper and then each section will have their respective elements.
Converter layout
Converter area contains a checkbox which helps to decide which type of conversion we are going to do.
Then an input area which will take the input and output area which will show the result.
A button which will convert the value when clicked.
Convert Roman To Integer
In this we just add multiple rows which show the letter and its associated value.
Roman Letter Integer Value
I 1
V 5
X 10
L 50
C 100
D 500
M 1000
Styling the layout.
I will be using flexbox to align the items. Each section will be flexed depending upon how we want to show them.
Converting roman numeral to integer and integer to roman with javascript.
There are two function which we will have to create one for each type of conversion.
Converting roman to integer.
It is not easy to come up with a solution to convert roman numeral to integer but I would recommend that you should practice solving this problem by your own.
This is little simple than the second method in which we have to convert the integer to roman.
If we get the input in different case then convert it to uppercase before proceeding any further.
Validate the input to make sure we get the roman numeral in proper format. If it is in incorrect format then show an alert with message.
If everything is good then perform the conversion.
//Converts roman numeral to integer const convertRomanToInteger = () => < //Regex to validate roman numberal const romanNumeralRegex = new RegExp( /^M(CM|CD|D?C)(XC|XL|L?X)(IX|IV|V?I)$/ ); let < value: roman >= conversionInput; roman = roman.toUpperCase(); const regexResult = romanNumeralRegex.test(roman); if (!regexResult) < alert("Please enter a valid roman numeral"); return false; >//sequence of roman letters let arr = ["I", "V", "X", "L", "C", "D", "M"]; //value of the respective roman letters let values = < I: 1, V: 5, X: 10, L: 50, C: 100, D: 500, M: 1000, >; let sum = 0; //keep track of the previous index let prevIndex = 0; for (let i = roman.length - 1; i >= 0; i--) < //if the current letter is having greater index than previous letter then add values if (arr.indexOf(roman[i]) >= prevIndex) < sum = sum + values[roman[i]]; >else < //if the current letter is having lesser index than previous letter then sub values sum = sum - values[roman[i]]; >//store the index of the previous roman letters prevIndex = arr.indexOf(roman[i]); > //Add the result to the output area outputArea.innerHTML = sum; >;
Converting roman to integer
Writing a program for this conversion is little difficult because you will have to first understand the pattern of how roman numeral works.
Make sure the input we receive are only numbers.
The max number for which we will be doing conversion is 5000. Because this is the limit for the current case, We can do more than this but we will have to add extra Latin alphabets.
Our conversion function is divided in two different formats, one which converts the value less than 9 because it follows different pattern and then value which is greater than 9 because it follows another pattern.
I would not go into to the details of how this program works, this is a exercise for you to figure it out because it will really increase your problem solving skills.
//Converts integer to roman numeral const convertIntegerToRoman = () => < //Regex to validate if there are only numbers const numberRegex = new RegExp(/^\d+$/); let < value: num >= conversionInput; const regexResult = numberRegex.test(num); if (!regexResult) < alert("Please enter a valid integer"); return false; >if (Number(num) > 4999) < alert("Out of range. Please enter a integer less than 5000."); return false; >//Mapping const mapping = < 1: "I", 5: "V", 10: "X", 50: "L", 100: "C", 500: "D", 1000: "M", >; let count = 1; let str = ""; while (num > 0) < let last = parseInt(num % 10); last *= count; if (last < 10) < str += lessThan9(last, mapping); >else < str = greaterThan9(last, mapping) + str; >count *= 10; num = parseInt(num / 10); > outputArea.innerHTML = str; >; //If the integer is less than one //Generte the roman numeral const lessThan9 = (num, obj) => < if (num === 9) < return obj[1] + obj[10]; >else if (num >= 5 && num < 9) < return obj[5] + obj[1].repeat(num % 5); >else if (num === 4) < return obj[1] + obj[5]; >else < return obj[1].repeat(num); >>; //If integer is greater than 9 //Generate the roman numeral const greaterThan9 = (num, obj) => < if (num >= 10 && num < 50) < if (num === 10) < return obj[10]; >if (num === 40) < return obj[10] + obj[50]; >else < return obj[10].repeat(parseInt(num / 10)); >> else if (num >= 50 && num < 100) < if (num === 50) < return obj[50]; >if (num === 90) < return obj[10] + obj[100]; >else < return obj[50] + obj[10].repeat(parseInt((num - 50) / 10)); >> else if (num >= 100 && num < 500) < if (num === 100) < return obj[100]; >if (num === 400) < return obj[100] + obj[500]; >else < return obj[100].repeat(parseInt(num / 100)); >> else if (num >= 500 && num < 1000) < if (num === 500) < return obj[500]; >if (num === 900) < return obj[100] + obj[1000]; >else < return obj[500] + obj[100].repeat(parseInt(num - 500) / 100); >> else if (num >= 1000 && num < 5000) < if (num === 1000) < return obj[1000]; >return obj[1000].repeat(parseInt(num / 1000)); > >;
Now when the convert button is clicked or enter button is pressed we have to perform the conversion, for which we need to get the inputs and show the output.
When the checkbox is checked we have to update the text to notify user which type of conversion is going to happen.
romanToNumeral.addEventListener("change", (e) => < const < checked >= e.target; if (checked) < heading.innerHTML = "Convert Integer To Roman"; >else < heading.innerHTML = "Convert Roman To Integer"; >>);
After this when convert button is clicked or enter button is pressed we should perform the conversion, so it is good idea to create a function which will call the appropriate conversion function based on the checkbox value and we call this function to trigger the conversion.
//Call the appropriate conversion function const calc = () => < const < checked >= romanToNumeral; if (checked) < convertIntegerToRoman(); >else < convertRomanToInteger(); >>; //Calculate on convert button click convertButton.addEventListener("click", () => < calc(); >); //Calculate when enter is pressed. window.addEventListener("keypress", (e) => < if (e.key === "Enter") < calc(); >>);
Предлагаем Вашему вниманию JavaScript код, при помощи которого Вы сможете переводить арабские числа в римские и обратно. При помощи данного кода Вы легко можете удивить Ваших посетителей, отобразив какие-либо числа в виде римских цифр.
Для того чтобы убедиться в работоспособности скрипта воспользуйтесь формой перевода чисел расположенной ниже.
Обращаем Ваше внимание, что для вывода корректного результата работы скрипта рекомендуется вводить числа до 40 тысяч (т.к. ↂ = 10000). Если Вам требуется перевести большое число (например, 123456), то разбейте его по три знака (123 и 456) и переведите каждое число в отдельности. После перевода объедините получившиеся числа (CXXIII CDLVI) т.к. такой вариант написания длинных чисел тоже допускается.
Для получения у себя точно такой же формы перевода арабских чисел в римские и обратно, для начала добавьте на свой сайт следующую форму:
Дальше необходимо добавить JavaScript код, который выполняет преобразование чисел в нужном направлении. Для этого скопируйте код, расположенный ниже себе на сайт:
function to_roman ( text ) if (! text ) return «» ; var rezult = «» ; var n = font_ar . length — 1 ; while ( text > 0 ) if ( text >= font_ar [ n ]) rezult += font_rom [ n ]; text -= font_ar [ n ]; > else n —; > return rezult ; >
function to_arab ( text ) var text = text . toUpperCase (); var rezult = 0 ; var posit = 0 ; var n = font_ar . length — 1 ; while ( n >= 0 && posit < text . length ) if ( text . substr ( posit , font_rom [ n ]. length ) == font_rom [ n ]) rezult += font_ar [ n ]; posit += font_rom [ n ]. length ; > else n —; > return rezult ; >
Как Вы могли заметить, для обозначения римских цифр мы используем аналоги из английского алфавита. В коде также присутствуют коды Юникода ↁ и ↂ, которые соответствуют символам ↁ и ↂ соответственно. При этом ↁ = 5000, а ↂ = 10000.
Хочу создать калькулятор, который бы работал не только с арабскими числами, но и римскими. Подскажите с чего начать? Именно работа с римскими числами. Сама только недавно в этом. Интересно ваше мнение
Калькулятор римских цифр Я сделал обычный калькулятор. Как мне перейти от арабских цифр к римским цифрам? unit Unit1; .
Калькулятор Римских цифр Всем привет. Проблема такова что мне нужно сделать калькулятор римских цифр,но я столкнулся с.
Калькулятор, как сделать выдвижную панель для выбора категории вычислений У меня Visual Basik 2010.Я создал простенький калькулятор,мне нужно сделать панель (Например слева.
Перевод списка арабских чисел в список соответствующих им римских чисел Создайте предикат, переводящий список арабских чисел в список соответствующих им римских чисел
Это чего за математика такая ? 1 + 1 вроде равен приблизительно двум ?)
Добавлено через 2 минуты Ну вы можете конвертировать римское число в какое нибудь которое может посчитать процессор. Потом вернуть все назад.
Подменить цифры до 10 не особо сложно, немного придется повозиться с числами от 10, но там тоже несколько условий.
const digits ={Z:2000, M:1000,CM:900,D:500,CD:400,C:100,XC:90,L:50,XL:40,X:10,IX:9,V:5,IV:4,I:1};function roman2arabic(str){if(!/^[IVXLCDMZ]+$/i.test(str))thrownew Error('Incorrect roman number format: '+ str)return str.toUpperCase().split('').reduce(function(r,v,i,arr){const[ a, b, c ]=[ digits[arr[i]], digits[arr[i+1]], digits[arr[i+2]]];if(b && c && a b && b c)thrownew Error('Incorrect roman number format: '+ str);return b > a ? r - a : r + a;},0)}function arabic2roman(num){if(!/^\-?\d+$/.test(num+''))thrownew Error('Can`t convert that arabic numeric to roman: '+ num)if(num 1)return''; let result ='';for(let key in digits) while ( num >= digits[key]){ result += key; num -= digits[key];}return result;}
Добавлено через 1 минуту Алгоритм получается такой: римские цифры в арабские -> расчёты -> арабские цифры в римские
Use saved searches to filter your results more quickly
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.
Implements a simple roman numeral based calculator in JavaScript
samcgardner/roman-calculator
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Name already in use
A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Sign In Required
Please sign in to use Codespaces.
Launching GitHub Desktop
If nothing happens, download GitHub Desktop and try again.
Launching GitHub Desktop
If nothing happens, download GitHub Desktop and try again.
Launching Xcode
If nothing happens, download Xcode and try again.
Launching Visual Studio Code
Your codespace will open once ready.
There was a problem preparing your codespace, please try again.
Latest commit
Git stats
Files
Failed to load latest commit information.
README.md
Implements a simple library that provides a calculator which evaluates arithmetic expressions using Roman numerals. Relies on the eval function, so is not safe to use with untrusted input.
Install the dependencies by running yarn install . Tests can be executed with yarn test .
