Як побудувати перетворювач римських цифр та інтерактивну діаграму римських цифр

Римські цифри вже не є важливою частиною нашого повсякденного життя. Але ми їх використовуємо при проектуванні пам’ятників, годинників і навіть для спортивних подій.

Що таке римські цифри?

Римські цифри виникли в Стародавньому Римі і протягом багатьох століть залишалися звичним способом написання цифр у всій Європі. Їх використання давно пережило саму Римську імперію. Їх поступово замінила індуїстсько-арабська система числення, яку ми використовуємо сьогодні - числа від нуля до дев'яти.

Римські цифри представлені комбінаціями літер латинського алфавіту, які служать цифрами в цій системі. Але в відміну від десяткового підстави, з символами 0 до 9 , то римська система використовує сім великі латинські літери I, V, X, L, C, D, M .

Спочатку не було однозначного позначення нуля. Натомість вони вживали латинське слово Nulla , що означає «немає».

Як працюють римські числівники?

Індуїстсько-арабське зображення цих букв є таким: I = 1, V = 5, X = 10, L = 50, C = 100, D = 500 і M = 1000 .

Інші цифри утворюються шляхом комбінування цих літер за певними правилами: Символ, розміщений після іншого, що має рівне або більше значення, додає його значення.

Наприклад,   VI = V + I = 5 + 1 = 6 або LX = L + X = 50 + 10 = 60 .Позначення VI і LX читаються як "один більше п'яти" і "десять більше п'ятдесяти".

Символ, розміщений перед одним із більших значень, віднімає його значення. Наприклад, IX = X - I = 10 - 1 = 9, а XC = C - X = 100 - 10 = 90 .

Позначення IX і XC читаються як "один менше десяти" і "десять менше ста".

Числа, більші за 1000, утворюються шляхом нанесення тире на символ. Таким чином, V̅ = 5000 , X̅ = 10000 , L̅ = 50000 , C̅ = 100000 , D̅ = 500000 та M̅ = 1000000 .

Так звана "стандартна" форма забороняє використовувати один і той же символ більше трьох разів поспіль. Але іноді можна спостерігати винятки. Наприклад, IIII для числа 4, VIIII для числа 9 та LXXXX для числа 90.

Інтерактивна схема римських числівників та їх поєднання

Наведіть курсор на кожен символ, щоб розкрити його індуїстсько-арабський еквівалент:

I II III IV V VI VII VIII IX X XX XXX XL L LX LXX LXXX XC C CC CCC CD D DC DCC DCCC CM M V̅ X̅ L̅ C̅ D̅ M̅

Я написав код цієї інтерактивної діаграми римських цифр, щоб вставити її сюди на FreeCodeCamp News.

Враховуючи той факт, що функція вбудовування HTML не є повномасштабним редактором коду, даний код не структурований і представлений як окремі файли HTML, CSS та JavaScript. Швидше , це записується в вигляді одного HTML - файла з і елементами доданим для укладання і функціональності.

Ось повне сховище коду для моєї інтерактивної діаграми римських цифр.

Перетворювач римських цифр

Введіть ціле невід’ємне число від 0 до 5000. Потім натисніть кнопку Конвертувати, щоб відкрити римський цифровий еквівалент.

З арабської на римську
Перетворити

Не існує програмного обмеження на число 5000 або більше. Алгоритм, який керує перетворенням, працював би однаково.

Простір, необхідний для відображення римських цифрових еквівалентів великих чисел, збільшується і збільшується без особливої ​​користі від виявлення чогось нового.

Сам код складається з частини HTML, що описує вміст із вбудованими стилями для зручності взаємодії та доданого JavaScript для функціональності.

Елемент введення типу "число" для обмеження вхідних даних числовими значеннями та двома кнопками. Кнопка "Конвертувати" підключена до функції, яка виконує перетворення, а кнопка "Дисплей" виводить еквівалент римського числа.

Навіщо виводити через елемент кнопки? Стиль добре працював, якщо застосовувати його до обох кнопок разом. А враховуючи обмежену функціональність вставки, це здавалося економією часу.

Для наочності ці елементи присвоюються змінним:

const inputField = document.querySelector('input'); // input element const convertButton = document.getElementById('convert'); // convert button const outputField = document.getElementById('display'); // output element

Функція convertToRoman()містить логіку і відображає результат:

function convertToRoman() { let arabic = document.getElementById('arabicNumeral').value; // input value let roman = ''; // variable that will hold the result }

Числове значення елемента введення зберігається у змінній, що називається " арабською ", для подальшого тестування. Змінна з назвою " роман " міститиме рядок, що представляє римський еквівалент арабського введення.

Далі є два масиви однакової довжини, один з арабськими цифрами, а другий - римські. Обидва знаходяться в порядку зменшення для спрощення віднімання:

// descending order simplifies subtraction while looping const arabicArray = [5000, 4000, 1000, 900, 500, 400, 100, 90, 50, 40, 10, 9, 5, 4, 1] const romanArray = ['V̅', 'MV̅','M', 'CM', 'D', 'CD', 'C', 'XC', 'L', 'XL', 'X', 'IX', 'V', 'IV', 'I'] 

Таблиці Unicode допомагають формувати символи більше 1000.

Нарешті, ось логіка, яка перевіряє введене число і перетворює його.

if (/^(0|[1-9]\d*)$/.test(arabic)) { // Regular expression tests if (arabic == 0) { // for decimal points and negative outputField.innerHTML = "Nulla"; // signs } else if (arabic != 0) { for (let i = 0; i < arabicArray.length; i++) { while (arabicArray[i] <= arabic) { roman += romanArray[i]; arabic -= arabicArray[i]; } } outputField.innerHTML = roman; } } else { outputField.innerHTML = "Please enter non negative integers only. No decimal points."; }

Перший тест перевіряє десяткові крапки та від’ємні знаки. Якщо знайдено, повідомлення просить "ввести лише невід’ємні цілі числа".

Наступний тест перевіряє, чи дорівнює введене число нулю. У такому випадку відображається рядок "Nulla".

В іншому випадку цикли продовжують об’єднувати римські рядки, віднімаючи арабські числа, поки останні не задовольнять умову для циклу while. Потім він відображає римський еквівалент вводу користувача.

Just like with the interactive chart, the code for the Roman Numeral Converter is all set for you to copy it and embed it into any article. Here's the full code repository.