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

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">
     <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"/>
      <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 id="output" for="number"
        <script src="script.js"></script>

/* 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);
    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";
  result.textContent = convertToRoman(inputInt);
  // number.value="";
/* file: styles.css */
*::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;

  font-size: 2.5rem;
  margin: 50px 10px;

  cursor: pointer;
  padding: 5px;

  border:5px solid var(--orange);
  margin: 10px;
  padding: 15px;
  min-width: 200px;
  min-height: 50px;
@media screen and (min-width: 500px){

Your browser information:

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

Challenge Information:

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

Hello @kaykay11

This is your codebase:

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


1 Like

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