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

JavaScript
1

Tell us what’s happening:

I went for a clever idea and it seems fine, but it just returns some NaN’s, I really have no idea what’s wrong

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  
  
  <head>
    <link rel="stylesheet" href="styles.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Roman Numeral Converter</title>
  </head>
  
  
  <body>
    
    <div class="column right">
      <div class="title">
      <span id="title">Roman Numeral Converter<span>
      
    </div>
      <div class="input">
        <input id="number" placeholder="Enter a number">
        <button id="convert-btn">Convert</button>
      </div> 

    <div class="output">
      <p id="output"></p>
    </div>
  </div>
<div class="column left">
    <div class="history" id="history">
    </div>
</div>
    
    
    <script src="script.js"></script>
  </body>
</html>

/* file: script.js */
const input = document.getElementById("number")
const o = document.getElementById("output")
const btn = document.getElementById("convert-btn")
const his = document.getElementById("history")
let d
let i = input.value

const romans=[
  ["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]
]

btn.addEventListener("click",convert)

console.log(i)//this does nothing idk why

function convert(){
  
  o.innerText = "" // just making sure
  

if(isNaN(i)){o.innerText = "Please enter a valid number"}
else if(i<1){o.innerText = "Please enter a number greater than or equal to 1"}
else if(i>3999){o.innerText = "Please enter a number less than or equal to 3999"}

else{
  while(romans.length>0){ //I really loved this idea
    //here is out declared d

    d = Math.floor(i/romans[0][1])// i / the first number of the array
    o.innerText += d*romans[0][0] // if i is 3900 the it'll be 3 * "M"
    i %= romans[0][1] // if i is 3900 this will be 900
    romans.shift() // removes the first element and goes on
    
    }
  }
  input.value="" // clear
}

function updateHistory(){} // haven't touched it yet




/* file: styles.css */
html{
  background-color: #182530;
}


body{
  margin:50 auto 50 auto;
  font-family: 'Lexend Deca', sans-serif; 
  background-color:#283f52;
  max-width:800px;
  border:solid 14px #203241;
  box-shadow: 0px 0px 30px 1px #203241;
  max-height:498;
}

.title{
  margin: 20% 0 0 25%;
  padding:0;
  font-size:24;
}

.input{
  padding-top:20;
  text-align:center;
  margin: 0 0 0 25%;
  width: 50%;
}

.column {
  float: left;
}

.left {
  width: 30%;
}

.right {
  width: 70%;
}

#number{
  background-color:#0c1218;
  color:#e3e3e3;
  width:140;
  height:25;
}

#convert-btn{
  background-color:#b54c02;
  color:#e3e3e3;
  width:70;
  height:25;
}

.history{
  background-color:#0d2e4a;
  width:234;
  height:100%;
  border-left:solid 7px #0f2a40;
  border-radius:10% 0% 0% 10%;
}

.output{
 width:320;
 height:120;
 background-color:#202841;
 border-left:solid 3px green;
 border-radius:10%;
 margin: 14% 0 0 22%;
}

Your browser information:

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

Challenge Information:

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

2

what are these supposed to be?
(please consider using descriptive variable names when asking for help so that the code is more readable).

When trying to get the value in the input element, you should not do it in the global scope. The value must be obtained only after a click event occurs on the convert button.

3

I forgot about them, they are short for input and devided and do you mean that I should use it in the convert function? well it didn’t make any change, it feels like the input will not return a number but something not even convertible to a number because parseInt() doesn’t work either