Convertendo Números para Algarismos Romanos em Javascript
JavascriptTutorias

Convertendo Números para Algarismos Romanos em Javascript

C. Junior

Convertendo Números para Algarismos Romanos em Javascript
Convertendo Números para Algarismos Romanos em Javascript

 

 

Introdução

Neste tutorial,  vou mostrar como converter Números para algarismos Romanos utilizando apenas html, css e Javascritpt. 

Será um breve tutorial sem a necessidade de usar algum tipo de biblioteca externa, será apenas html, css e Javascript .

O Conversor de Números Inteiros para Números Romanos é uma ferramenta prática que transforma números inteiros modernos em sua representação equivalente aos algarismos romanos. Este conversor é muito útil para fins educativos, ele simplifica a compreensão e utilização dos sistemas numéricos antigos.

 

Convertendo Números para Algarismos Romanos em Javascript

 

Primeiro passo você deverá criar a estrutura da página, para isso crie um arquivo html contendo  o seguinte código :

 

<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Conversor de Números para Algarismos Romanos</title>
</head>
<body>
    <script>
    </script>
</body>
</html>

 

Logo após crio a estrutura do conversor:

 

<div class="container">
    <img src="th.png" alt="">
    <div class="right-side">
        <h1>Conversor de Números Inteiros para Algarismos Romanos</h1>
        <div class="conversor-input">
            <input type="number" id="inputNumber" min="1" max="3999" placeholder="Digite um número inteiro. ex: 2000" />
            <button onclick="convertToRomanNumerals()">
                <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="1em" height="1em" viewBox="0 0 24 24"
                    stroke="currentColor" fill="currentColor">
                    <path d="M16 15L24 15 20 20zM8 9L0 9 4 4z"></path>
                    <path
                        d="M21 6c0-1.654-1.346-3-3-3H7.161l1.6 2H18c.551 0 1 .448 1 1v10h2V6zM3 18c0 1.654 1.346 3 3 3h10.839l-1.6-2H6c-.551 0-1-.448-1-1V8H3V18z">
                    </path>
                </svg>
            </button>
        </div>
        <div class="conversor-response" id="result"></div>
    </div>
</div>

 

No código acima crio a interface do conversor de números inteiros para algarismos romanos.
Adicionei um campo para entrada de um número e um botão para executar a conversão e por fim adicionei uma área para exibir o resultado.

 

Depois adiciono o css responsável pela estilização da página :

 

*,
*:after,
*:before {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
  text-decoration: none;
}
:root {
  --white: #ffffff;
  --dark: rgb(40, 44, 51);
  --green: rgb(166, 247, 80);
  --orange: rgb(255, 216, 98);
  --red: #f46663;
}
body {
  height: 100vh;
  display: flex;
  background-color: #121f32;
  color: var(--white);
  font-family: basic-sans, sans-serif !important;
}
.container {
  width: calc(100% - 4rem);
  padding: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6rem;
}
img {
  max-width: 30%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
}
.right-side {
  flex: 1;
  width: 50%;
  max-width: 40%;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  gap: 1rem;
  border-radius: 6px;
  border: 1px solid var(--red);
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}
h1 {
  font-size: 1.1rem;
  font-weight: 900;
  font-style: normal;
  padding: 1rem;
  border-radius: 6px;
  text-align: center;
  color: var(--orange);
  border: 1px solid var(--red);
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}
.conversor-response {
  padding: 1rem;
  min-height: 4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 1px solid var(--red);
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 900;
  color: var(--orange);
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}
.conversor-response span {
  font-size: 1.5rem;
  color: var(--green);
}
.conversor-response .invalid {
  font-size: 0.8rem;
  color: var(--red);
}
.conversor-input {
  display: flex;
  align-items: center;
  position: relative;
  padding: 0.625rem;
  background: var(--dark);
  border: 1px solid var(--orange);
  border-radius: 6px;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px,
   rgba(0, 0, 0, 0.23) 0px 3px 6px;
}
.conversor-input input {
  width: 100%;
  font-size: 1rem;
  color: var(--white);
  position: relative;
  outline: none;
  padding: 0.625rem 1.25rem;
  background: var(--dark);
  border: 1px solid transparent;
}
.conversor-input button {
  height: 3.25rem;
  padding: 0px 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  text-decoration: none;
  background-color: var(--green);
}
.conversor-input button > svg {
  font-size: 1.25rem;
  margin-right: 0px;
}
.conversor-input button:hover{
  transform: scale(0.95);
}

 

Por ultimo adiciono o script responsável por realizar a conversão de Número Inteiro para Algarismos Romanos:

 

       function intToRomanNumerals(intNumber) {
            const romanNumeralsMap = [
                [1000, 'M'], [900, 'CM'], [500, 'D'], [400, 'CD'],
                [100, 'C'], [90, 'XC'], [50, 'L'], [40, 'XL'],
                [10, 'X'], [9, 'IX'], [5, 'V'], [4, 'IV'], [1, 'I']
            ];
            let romanNumerals = '';
            for (let [value, simbol] of romanNumeralsMap) {
                const count = Math.floor(intNumber / value);
                romanNumerals += simbol.repeat(count);
                intNumber %= value;
            }
            return romanNumerals;
        }
        function convertToRomanNumerals() {
            const number = parseInt(document.getElementById('inputNumber').value);
            const result = document.getElementById('result');
            if (Number.isNaN(number) || number < 1 || number > 3999) {
                result.innerHTML = '<p class="invalid">Por favor, insira um número entre 1 e 3999. </p>';
                result.style.display = 'flex';
                return
            }
            const romanNumerals = intToRomanNumerals(number);
            result.innerHTML = `<p>O número em romano é: </p> <span>${romanNumerals}</span>`;
            result.style.display = 'flex';
        }

 

Uma breve explicação do código Javascript criado:  

Na Função intToRomanNumerals

  • Objetivo: Converter números inteiros para algarismos romanos.
  • Parâmetro: Recebe um número inteiro (intNumber).
  • Processo:
    • Define um mapa de valores de números romanos.
    • Itera sobre o mapa, calculando quantas vezes cada valor cabe no número.
    • Concatena os símbolos romanos correspondentes.
    • Retorna a string de algarismos romanos.

 

Função convertToRomanNumerals

  • Objetivo: Converter e exibir o número romano baseado na entrada do usuário.
  • Processo:
    • Lê o valor do campo de entrada (inputNumber).
    • Verifica se o número é válido (entre 1 e 3999).
    • Exibe uma mensagem de erro se o número for inválido.
    • Converte o número para algarismos romanos usando intToRomanNumerals.
    • Atualiza o conteúdo da página para mostrar o resultado.

 

 

Você pode visualizar o componente no link abaixo:

Conversor 

 

Deixo aqui um vídeo curto do processo de criação do componente:

 

 

https://youtu.be/onKsOdYbyaU

Conclusão

Com esses simples  passos, você consegue de forma rápida criar um Conversor de Números Inteiros para Algarismos Romanos usando apenas HTML e CSS.  Caso necessite você pode personalizar estilizar conforme a sua necessidade.

 

Código fonte do tutorial  do Convertendo Números para Algarismos Romanos em Javascript:

Código Fonte

 

Você pode gostar também

html javascript

Como manipular componente html com Javascript.

C. Junior
Rating Component

Como criar Rating Component

C. Junior
Como ler e escrever csv comPython

Como ler e escrever csv com Python

C. Junior

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *