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

JavaScript
1

Tell us what’s happening:

My code works and ticks every box they want, but yet it fails on over half… what the fudge?

Your code so far

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap" rel="stylesheet">
    <link rel=”stylesheet” href=”https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css” />
    <!-- FONT AWESOME -->


    <title>Roman Numberals</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <div class="container">
      <div class="center">
        <h1>Roman Numberal Converter</h1>
      </div>
      <div class="center">
        <p>Please enter a number</p>
        <form class="my-form">
          <input id="number" type="text">
          <button id="convert-btn">Convert</button>
        </form>
      </div>
      <div class="center">
        <h4><span id="output"></span></h4>
      </div>
    </div>
    <script src="script.js" type="text/javascript"></script>
  </body>
</html>




const numbers = document.getElementById('number');
const btn = document.getElementById('convert-btn');
const output = document.getElementById('output');


function converter() {
  let number = parseInt(numbers.value);
  if (number <= 0) {
        output.textContent = 'Please enter a number greater than or equal to 1';
        numbers.value = "";
        return;
    } else if (number >= 4000){
      output.textContent = "Please enter a number less than or equal to 3999"
      numbers.value = "";
      return;
    } else if (isNaN(number)){
      output.textContent = "Please enter a valid number";
      numbers.value = "";
      return;
    }

    const romanNumerals = {
        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
    };

     let romanNumeral = '';
    Object.entries(romanNumerals).forEach(([key, value]) => {
      while (number >= value) {
        romanNumeral += key;
        number -= value;
      }
    });

    output.textContent = romanNumeral;
    numbers.value = "";
}

btn.addEventListener("click", converter());
numbers.addEventListener("keypress", (e) =>{
  if (e.key === "Enter") {
    converter();
  }
})


*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  
}
* {
   text-shadow: 0 0 2px #000;
   font-size: 20px;
}
html,body {
  width: 100vw;
  height: 100vh;
  overflow-x: hidden;
  
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

.container { 
  display: grid;
  grid-template-columns: auto;
  background-color: pink;
  height: 100vh;
  width: 100vw;
  align-items: start;
  align-content: flex-start;
  color: white;
  background: rgb(14,0,255);
  background: radial-gradient(circle, rgba(14,0,255,1) 0%, rgba(9,15,125,1) 49%, rgba(2,12,38,1) 100%, rgba(9,9,121,1) 100%);
}
.container > div {
  text-align: center;
  
}
.center { 
  height: auto;
  display: flex;
  flex-flow: column wrap;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 50px;
 
}
p,h4,h1 {
  font-size: 1.2rem;
  padding-bottom: 50px;
}
input {
  padding: 10px 0 10px 0;
  border-radius: 4px 0 0 4px;
  border: none;
  transition: width 0.4s ease-in-out;
  text-align: center;
  box-shadow: 0 0 10px #000;
}

input:focus {
  box-shadow: 0 0 10px rgba(100,100,100, 0.9);
  outline: 1px solid blue;
}
button {
  color: blue;
  background-color: lightblue;
  padding: 10px 20px 10px 20px;
  border: none;
  box-shadow: 0 0 10px #000;
  border-radius: 0 4px 4px 0;
}
button:hover {
  color: lightblue;
  background-color: blue;
  cursor: pointer;
}

.my-form {
  margin-bottom: 10px;
  position: relative;
}
@media screen and (max-width: 600px){
input,button{
  font-size: 0.8rem;
}
}
.my-form > button {
  position: relative;
  margin-left: -5px;
}

Your browser information:

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

Challenge Information:

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

2

are you sure this is what you wanted to write?

1 Like
3

When I click btn, I want it to do converter, along with keypress. Am I missing something obvious?

4

the event listener will call what you pass as second argument, and I don’t think the output of converter is a function, so you get an error

1 Like
5

I see, my apologies, I added the () by accident haha, still fails on 90% of what they’re asking, even though it works :X

6

oh… scrap that… 90% was the () doh! thanks haha

7

I wonder how you were testing that your app works, because it couldn’t work in that state

8

It was giving me what I needed, but I never used click, only enter, hence why I assumed it worked
#SillyMe