Works on local machine but not on fCC

JavaScript
1

Tell us what’s happening:

this code works perfectly on my local machine but yields no results when i run it here.

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>Document</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="header">
        <h2>my Projects</h2>
        <h1>ROMAN NUMERAL CONVERTER</h1>
    </div>
    <div id="converter">
        <form>
            <label for="number">Enter a number: </label>
            <input type="number" id="number">
            <button id="convert-btn">Convert</button>
        </form>
    </div>
    <script src="script.js"></script>
</body>
</html>

/* file: styles.css */
*{
    background-color:lavender;
    font-family: Arial, sans-serif;
}
body{
    display: block;
    margin: 0 auto;
}
#header{
    width: 400px;
    height: 200px;
    margin: 0 auto;
    text-align: center;
}

#converter{
    display: block;
    position: relative;
    border: 3px solid white;
    border-radius: 10px;
    width: 400px;
    height: 200px;
    margin: 0 auto;
    padding: 40px;
    text-align: center;
    font-size: 130%;
    margin-bottom: 10%;
    border-color: cornflowerblue;
}


#number{
    width: 200px;
    height: 40px;
    background-color: white;
    display: block;
    margin: 0 auto;
    margin-bottom: 40px;
    margin-top: 30px;
    border: transparent;
    border-radius: 10px;
}

#convert-btn{
    display: block;
    width: 100px;
    height: 40px;
    background-color: cornflowerblue;
    color: white;
    margin: 0 auto;
    border: transparent;
    border-radius: 10px;
}


#output-text{
    display: block; 
    width: 250px; 
    height: 60px; 
    background-color: lavender; 
    color: white; 
    margin: 0 auto; 
    border: transparent; 
    border-radius: 10px; 
    text-align: center; 
    line-height: 60px;
}

/* file: script.js */
const num = document.getElementById('number');
const convertBtn = document.getElementById('convert-btn');

romanNumerical = [[1000, 'M'], [900, 'CM'], [500, 'D'], [400, 'CD'], [100, 'C'], [90, 'XC'], [50, 'L'], [40, 'XL'], [10, 'X'], [9, 'IX'], [5, 'V'], [4, 'IV'], [3, 'III'], [2, 'II'], [1, 'I']];

const converter = (num) => {
    let remainder = num;
    let result = '';
    for (let i = 0; i < romanNumerical.length; i++) {
      const [dec, rom] = romanNumerical[i];
      const count = Math.floor(remainder / dec);
      result += rom.repeat(count);
      remainder -= dec * count;
    }
    console.log(result);
    return result;
  }

  const displayOutput = (result) => {
    output.innerHTML = `<p id="output">${result}</p>`;
    const output = document.getElementById('output');
    output.style.backgroundColor = 'cornflowerblue';
  }

convertBtn.addEventListener('click', (event) => {
    event.preventDefault();
    if(num.value === ''){
        const result = 'Please enter a valid number';
        displayOutput(result);
    } else if (num.value < 1){
        const result = "Please enter a number greater than or equal to 1";
        displayOutput(result);
    } else if (num.value > 3999){
        const result = "Please enter a number less than or equal to 3999";
        displayOutput(result);
    } else {
        const result = converter(num.value);
        displayOutput(result);
    }
})

Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/123.0.0.0 Safari/537.36

Challenge Information:

Build a Palindrome Checker Project - Build a Palindrome Checker

2

What error messages do the tests give you?

1 Like
3

Hi @rohitcodes03

This variable is not defined, so is throwing an error.

Happy coding

4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.