{"id":716,"date":"2024-10-30T19:59:14","date_gmt":"2024-10-30T22:59:14","guid":{"rendered":"https:\/\/urutaudev.com.br\/?p=716"},"modified":"2024-10-30T21:27:43","modified_gmt":"2024-10-31T00:27:43","slug":"convertendo-numeros-para-algarismos-romanos-em-javascript","status":"publish","type":"post","link":"https:\/\/urutaudev.com.br\/index.php\/2024\/10\/30\/convertendo-numeros-para-algarismos-romanos-em-javascript\/","title":{"rendered":"Convertendo N\u00fameros para Algarismos Romanos em Javascript"},"content":{"rendered":"

<\/h1>\n
\"Convertendo
Convertendo N\u00fameros para Algarismos Romanos em Javascript<\/figcaption><\/figure>\n

 <\/p>\n

 <\/p>\n

Introdu\u00e7\u00e3o<\/span><\/h2>\n

Neste tutorial,\u00a0 vou mostrar como converter N\u00fameros para algarismos Romanos utilizando apenas html, css e Javascritpt.\u00a0<\/span><\/p>\n

Ser\u00e1 um breve tutorial sem a necessidade de usar algum tipo de biblioteca externa, ser\u00e1 apenas html, css e Javascript .<\/span><\/p>\n

O Conversor de N\u00fameros Inteiros para N\u00fameros Romanos \u00e9 uma ferramenta pr\u00e1tica que transforma n\u00fameros inteiros modernos em sua representa\u00e7\u00e3o equivalente aos algarismos romanos. Este conversor \u00e9 muito \u00fatil para fins educativos, ele simplifica a compreens\u00e3o e utiliza\u00e7\u00e3o dos sistemas num\u00e9ricos antigos.<\/span><\/div>\n

 <\/p>\n

Convertendo N\u00fameros para Algarismos Romanos em Javascript<\/span><\/h3>\n

 <\/p>\n

Primeiro passo voc\u00ea dever\u00e1 criar a estrutura da p\u00e1gina, para isso crie um arquivo html contendo\u00a0 o seguinte c\u00f3digo :<\/span><\/strong><\/span><\/p>\n

 <\/p>\n

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

 <\/p>\n

Logo ap\u00f3s crio a estrutura do conversor:<\/span><\/strong><\/span><\/p>\n

 <\/p>\n

\n
<div class=\"container\"><\/code><\/div>\n
\u00a0 \u00a0 <img src=\"th.png\" alt=\"\"><\/code><\/div>\n
\u00a0 \u00a0 <div class=\"right-side\"><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 <h1>Conversor de N\u00fameros Inteiros para Algarismos Romanos<\/h1><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 <div class=\"conversor-input\"><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <input type=\"number\" id=\"inputNumber\" min=\"1\" max=\"3999\" placeholder=\"Digite um n\u00famero inteiro. ex: 2000\" \/><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <button onclick=\"convertToRomanNumerals()\"><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" x=\"0px\" y=\"0px\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\"<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 stroke=\"currentColor\" fill=\"currentColor\"><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <path d=\"M16 15L24 15 20 20zM8 9L0 9 4 4z\"><\/path><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <path<\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 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\"><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/path><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/svg><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/button><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 <\/div><\/code><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 <div class=\"conversor-response\" id=\"result\"><\/div><\/code><\/div>\n
\u00a0 \u00a0 <\/div><\/code><\/div>\n
<\/div><\/code><\/div>\n<\/div>\n

 <\/p>\n

No c\u00f3digo acima crio a interface do conversor de n\u00fameros inteiros para algarismos romanos.<\/span>
\nAdicionei um campo para entrada de um n\u00famero e um bot\u00e3o para executar a convers\u00e3o e por fim adicionei uma \u00e1rea para exibir o resultado. <\/span><\/p>\n

 <\/p>\n

Depois adiciono o css respons\u00e1vel pela estiliza\u00e7\u00e3o da p\u00e1gina :<\/span><\/strong><\/span><\/p>\n

 <\/p>\n

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

 <\/p>\n

Por ultimo adiciono o script respons\u00e1vel por realizar a convers\u00e3o de N\u00famero Inteiro para Algarismos Romanos:<\/span><\/strong><\/span><\/p>\n

 <\/p>\n

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

 <\/p>\n

Uma breve explica\u00e7\u00e3o do c\u00f3digo Javascript<\/a> criado:\u00a0\u00a0<\/span><\/p>\n

Na Fun\u00e7\u00e3o intToRomanNumerals<\/span><\/strong><\/p>\n