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

JavaScript
1

Tell us what’s happening:

my code doesn’t pass, the logic seems right and it uses simple HTML CSS and JS logic to convert.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title> Roman Numeral Converter</title>
    <link rel="stylesheet" href="styles.css"/>
    </head>
    <body>
      <h1>Roman Numeral Converter</h1>
      <div class="input-container">
        <label for="number"> Enter a number </label>
        <input id="number" class="number-input" value="" type="number" name="number input"/>
        <button class="convert-btn" id="convert-btn"> Convert </button>
        </div>
<div id="output" for="number"
         </div>
        <script src="script.js"></script>

      </body>
  </html>

/* file: script.js */
const numberInput = document.getElementById("number");
const convertBtn = document.getElementById("convert-btn");
const result = document.getElementById("output");
const romanNumerals=[
  {value:1000, numeral:M},
  {value:900, numeral:CM},
  {value:500, numeral:D},
  {value:400, numeral:CD},
  {value:100, numeral:C},
  {value:90, numeral:XC},
  {value:50, numeral:L},
  {value:40, numeral:XL},
  {value:10, numeral:X},
  {value:9, numeral:IX},
  {value:5, numeral:V},
  {value:4, numeral:IV},
  {value:1, numeral:I},
];
const convertToRoman =()=>{
 let roman="";
 for(let i=0; i<romanNumerals.length; i++){
   while(num >= romanNumerals[i].value){
     roman += romanNumerals[i].numeral;
     num -= romanNumerals[i].value;
   }
 }
 return roman;
}


convertBtn.addEventListener("click", ()=>{
  const inputInt = Number(number.value);
  
  if(isNaN(inputInt)){
    result.textContent ="Please enter a valid number";
    
  }
  else if(inputInt<1){
    result.textContent ="Please enter a number greater than or equal to 1";
    
  }
  else if(inputInt>=4000){
    result.textContent ="Please enter a number less than or equal to 3999";
    
  }else{
  result.textContent = convertToRoman(inputInt);
  // number.value="";
  }
});

/* file: styles.css */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
:root {
  --light-grey: #f5f6f7;
  --dark-blue: #1b1b32;
  --orange: #f1be32;
}

body {
  background-color: var(--dark-blue);
  font-family: "Times New Roman", Times, serif;
  font-size: 20px;
  color: var(--light-grey);
  padding: 0 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

h1{
  text-align:center;
  font-size: 2.5rem;
  margin: 50px 10px;
}

.convert-btn{
  background-color:var(--orange);
  cursor: pointer;
  padding: 5px;
  border:none;
}

.number{
  height:40px;
}
.output{
  border:5px solid var(--orange);
  text-align:center;
  margin: 10px;
  padding: 15px;
  min-width: 200px;
  min-height: 50px;
}
@media screen and (min-width: 500px){
  .input-container{
    flex-direction:row;
  }
  
}

Your browser information:

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

Challenge Information:

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

2

Hello @kaykay11

This is your codebase:

image
image1680×879 245 KB

First, try to read the console error message
For example, if you notice in the romanNumerals array of objects you assign a variable instead of a string to the numeral key, and because of that it says M is not defined
Try to resolve your errors one by one

If you need more help let me know

Best,

3

Thanks for the tip!!
there were too many silly mistakes, that needed to be fixed.