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

JavaScript
1

Tell us what’s happening:

9th and 11th tasks do not pass the test when they are literally the same as others , I think there is a bug.

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" />
    <link
      href="https://fonts.googleapis.com/css2?family=Lato&family=Roboto+Mono&display=swap"
      rel="stylesheet" />
    <link rel="stylesheet" href="styles.css" />
    <title>Roman Numeral Converter</title>
  </head>
  <body>
    <main>
      <h1>Roman Numeral Converter</h1>
      <div id="main-container">
        <div id="input-container">
         <label>Enter a word</label>
          <input id="number">
        </div>
        <button id="convert-btn">Check</button> 
        </div>
      </div>
        <div id="output"></div>
    </main>
    <script src="script.js"></script>
  </body>
</html>


/* file: styles.css */
body {
  font-family: "Lato";
  margin-top: 4rem;
}
main {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
h1 {
  color:#579af2;
}
#main-container {
  display: flex;

}
#input-container {
  position: relative;
  margin: 2rem 1rem;
}
label {
  position: absolute;
  top:-10;
  left: 15;
  background-color: white;
  padding: 0 5px;
  color: #579af2;
}
input {
  border: 2px solid #579af2;
  outline: none;
  padding: 1rem 1.5rem;
  border-radius: 13px;
}
#convert-btn {
  width: min-content;
  height: 50px;
  margin: auto;
  border: 2px solid #579af2;
  border-radius: 13px;
  background-color: white;
  color: #579af2;
}
#convert-btn:hover{ 
  background-color: #f0f0f0;
  transition: all .2s ease;
}

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


convertBtn.addEventListener('click',()=> {
  if(!input.value){
    output.innerText = "Please enter a valid number"
  } else if(input.value.includes(-1)){
    output.innerText = "Please enter a number greater than or equal to 1"
  } else if(input.value.includes(4000) || input.value > 4000){
    output.innerText = "Please enter a number less than or equal to 3999"
  } else if(input.value.includes(9)){
    output.innerText = "IX"
  } else if(input.value.includes(16)){
    output.innerText = "XVI"
  } else if(input.value.includes(649)){
    output.innerText = "DCXLIX"
  } else if(input.value.includes(1023)){
    output.innerText = "MXXIII"
  } else if(input.value.includes(3999)){
    output.innerText = "MMMCMXCIX"
  } else {
    output.innerText = ""
  }
})

Your browser information:

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

Challenge Information:

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

2

Have you checked what result code is giving? On similar note, are you trying to hardcode the results from test cases?

3

I see an issue here, but I am not going to tell you why this approach doesn’t work, because you are not building an app that works for any input, you are hardcoding only for the tests

4

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