Build a Roman Numeral Converter

Español JavaScript
1

Hola, estoy estancada con este tema. No pasa las pruebas 7-8-9-10-11 pero la aplicación funciona para esos números. Hay algo que no estoy viendo y hace una semana que estoy con esto.
cuando pruebo los números, veo que el código funciona correctamente devolviendo las respuestas correctas, pero por algún motivo no pasa esos tests.

<!-- 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 rel="stylesheet" href="styles.css">
    <link rel="shortcut icon" href="images/hombre (1).png" type="image/x-icon">
    <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=Bebas+Neue&family=Bitter:ital,wght@0,100..900;1,100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Orbitron:wght@400..900&display=swap"
        rel="stylesheet">
    <title>Build a Roman Numeral Converter</title>
</head>

<body>
    <form class="machine">
        <p class="title">Roman numerals converter</p>
        <input type="number" id="number" class="viewfinder"></input>

        <div class="keyboard">
            <div class="num-buttons num1">1</div>
            <div class="num-buttons num2">2</div>
            <div class="num-buttons num3">3</div>
            <div class="num-buttons num4">4</div>
            <div class="num-buttons num5">5</div>
            <div class="num-buttons num6">6</div>
            <div class="num-buttons num7">7</div>
            <div class="num-buttons num8">8</div>
            <div class="num-buttons num9">9</div>
            <div class="num-buttons num0">0</div>
        </div>

        <div class="result">
            <div class="buttons-result">
                <button type="reset" value="Reset" class="button-result">Reset</button>
                <button type="submit" id="convert-btn" class="button-result c">Convert</button>
            </div>

            <p class="show-result">Show Result</p>
            <div id="output" class="viewfinder"></div>
        </div>

    </form>
    <script src="script.js"></script>
</body>

</html>

/* file: script.js */
const str = document.querySelector("#number");
const resetBTn = document.querySelector(".button-result");
const convertBtn = document.querySelector("#convert-btn");
const output = document.querySelector("#output");
const num1 = document.querySelector(".num1");
const num2 = document.querySelector(".num2");
const num3 = document.querySelector(".num3");
const num4 = document.querySelector(".num4");
const num5 = document.querySelector(".num5");
const num6 = document.querySelector(".num6");
const num7 = document.querySelector(".num7");
const num8 = document.querySelector(".num8");
const num9 = document.querySelector(".num9");
const num0 = document.querySelector(".num0");

num1.addEventListener("click", () => {
  str.value += 1;
});
num2.addEventListener("click", () => {
  str.value += 2;
});
num3.addEventListener("click", () => {
  str.value += 3;
});
num4.addEventListener("click", () => {
  str.value += 4;
});
num5.addEventListener("click", () => {
  str.value += 5;
});
num6.addEventListener("click", () => {
  str.value += 6;
});
num7.addEventListener("click", () => {
  str.value += 7;
});
num8.addEventListener("click", () => {
  str.value += 8;
});
num9.addEventListener("click", () => {
  str.value += 9;
});
num0.addEventListener("click", () => {
  str.value += 0;
});

resetBTn.addEventListener("click", () => {
  output.textContent = "";
  return;
});

const valEntry = (e) => {
  e.preventDefault();
  if (str.value.length == 0) {
    return (output.textContent = "Please enter a valid number");
  } else if (str.value <= 0) {
    return (output.textContent =
      "Please enter a number greater than or equal to 1");
  } else if (str.value >= 4000) {
    return (output.textContent =
      "Please enter a number less than or equal to 3999");
  }
};

const roman = {
  1: "I",
  5: "V",
  10: "X",
  50: "L",
  100: "C",
  500: "D",
  1000: "M",
};

const millar = (num) => {
  num = entrada[3];
  if (entrada[3] >= 0 && entrada[3] <= 3) {
    output.textContent = roman[1000].repeat(entrada[3]);
  } else if (entrada[3] >= 4) {
    output.textContent = "Please enter a number less than or equal to 3999";
  }
  return output.textContent;
};

const centenas = (num) => {
  num = entrada[2];
  if (entrada[2] >= 0 && entrada[2] <= 3) {
    output.textContent = roman[100].repeat(entrada[2]);
  } else if (entrada[2] == 4) {
    output.textContent = roman[100].concat(roman[500]);
  } else if (entrada[2] >= 5 && entrada[2] <= 8) {
    output.textContent = roman[500].concat(roman[100].repeat(entrada[2] - 5));
  } else if (entrada[2] == 9) {
    output.textContent = roman[100].concat(roman[1000]);
  }
  return output.textContent;
};

const decenas = (num) => {
  num = entrada[1];
  if (entrada[1] >= 0 && entrada[1] <= 3) {
    output.textContent = roman[10].repeat(entrada[1]);
  } else if (entrada[1] == 4) {
    output.textContent = roman[10].concat(roman[50]);
  } else if (entrada[1] >= 5 && entrada[1] <= 8) {
    output.textContent = roman[50].concat(roman[10].repeat(entrada[1] - 5));
  } else if (entrada[1] == 9) {
    output.textContent = roman[10].concat(roman[100]);
  }
  return output.textContent;
};
const unidades = (num) => {
  num = entrada[0];
  if (entrada[0] >= 0 && entrada[0] <= 3) {
    output.textContent = roman[1].repeat(entrada[0]);
  } else if (entrada[0] == 4) {
    output.textContent = roman[1].concat(roman[5]);
  } else if (entrada[0] >= 5 && entrada[0] <= 8) {
    output.textContent = roman[5].concat(roman[1].repeat(entrada[0] - 5));
  } else if (entrada[0] == 9) {
    output.textContent = roman[1].concat(roman[10]);
  }
  return output.textContent;
};

let inputInt;
let entrada;

const convert = () => {
  inputInt = Array.from(String(str.value), Number);
  entrada = inputInt.reverse();
  output.textContent =
    `"${millar()}` + `${centenas()}` + `${decenas()}` + `${unidades()}"`;
};

convertBtn.addEventListener("click", convert);
convertBtn.addEventListener("click", valEntry);

/* file: styles.css */
:root {
    --dark-machine: color-mix(in srgb, indigo, black 28%);
    --dark-visor: color-mix(in srgb, rgb(130, 212, 7), black 25%);
    --color-keyboard: color-mix(in srgb, rgb(78, 73, 73), white 8%);
    --color-buttons: color-mix(in srgb, rgb(252, 41, 3), black 40%);
    --color-back: rgb(83, 82, 82);

    --margin: 6px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: "Orbitron", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
}

html {
    /*solo para ver los limites del body*/
    scroll-behavior: smooth;
    background-color: var(--color-back);
}

body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    text-align: center;
    max-width: 600px;
    background-color: var(--color-back);
    margin: auto;
}

.machine {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 350px;
    height: 500px;
    border: 2px solid black;
    border-radius: 15px;
    background-color: var(--dark-machine);
    box-shadow: inset 0 0 3px 3px rgb(0 0 0 /50%);
    border-bottom-width: 15px;
    border-bottom-color: rgb(0 0 0 /65%);
    border-left-width: 18px;
    border-left-color: rgb(0 0 0 /65%);
    border-bottom-left-radius: 5px;

}


.viewfinder {
    width: 200px;
    height: 50px;
    border: 2px solid black;
    border-radius: 10px;
    background-color: var(--dark-visor);
    margin: var(--margin);
    box-shadow: inset 0 0 5px 5px rgb(0 0 0 /60%);
    border-bottom-width: 4px;
    border-bottom-color: rgb(0 0 0 /90%);
    text-align: center;
    outline: none;
}

.keyboard {
    width: 200px;
    height: 150px;
    border: 1px double black;
    border-radius: 10px;
    margin: var(--margin) 0;
    padding: 6px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    background-color: var(--color-keyboard);
    box-shadow: inset 0 0 5px 5px rgb(0 0 0 /60%);

    .num-buttons {
        width: 50px;
        height: 30px;
        border: 1.5px solid black;
        border-radius: 5px;
        margin: 2px;
        padding: 3px;
        border-bottom-width: 5px;
        border-top-color: rgb(0 0 0 /30%);
    }
}

.num-buttons:active {
    border-bottom-width: 2px;
    transform: translateY(3px);
    background-color: rgb(70, 68, 68);
}




.result {
    margin: var(--margin) 0;

    #output {
        font-size: 0.7rem;
        font-weight: 700;
        padding: 4px;
        display: flex;
        justify-content: center;
        align-items: center;

    }
}

.buttons-result {
    margin: 10px 0;

    .button-result {
        background-color: var(--color-buttons);
        width: 70px;
        height: 30px;
        border: 1px solid black;
        border-radius: 5px;
        outline: none;
        padding: 3px;
        border-bottom-width: 3px;
        border-bottom-color: rgb(0 0 0 /90%);
        margin: 0 17px;
        box-shadow: inset 0 0 3px 3px rgb(0 0 0 /60%);

        &:active {
            transform: translateY(4px);
        }
    }

    .c {
        width: 80px;
        background-color: rgb(8, 8, 151);
    }
}
2

Hi there!

Format your each file between the pair of three back ticks correctly. Your code isn’t visible properly.

3

lo siento, no sabia como hacerlo…uff gracias

4

If I press Convert twice I get ""VII""VII""VII"VII" which is not something that should appear

5

ok. muchisimas gracias, lo arreglare.
pero puedes ver que funciona para los numeros 9 - 16 -649 - 1023 ?
arreglare lo del boton convert.

6

You need to fix that issue, because it happens when I test also those in sequence:
image
image

7

arreglado el error.

const convert = () => {
  inputInt = Array.from(String(str.value), Number);
  entrada = inputInt.reverse();
  **output.textContent = null;**
  output.textContent =
    `"${millar()}` + `${centenas()}` + `${decenas()}` + `${unidades()}"`;
  return;
};

pero sigue sin pasar pasar los tests 7-8-9-10-11

8

can you please post all your code again?

also please use proper formatting

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

when asking for help it’s also ideal if you would post the project link. Here it is:

9

ahi va el codigo:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <link rel="shortcut icon" href="images/hombre (1).png" type="image/x-icon">
    <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=Bebas+Neue&family=Bitter:ital,wght@0,100..900;1,100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Orbitron:wght@400..900&display=swap"
        rel="stylesheet">
    <title>Build a Roman Numeral Converter</title>
</head>

<body>
    <form class="machine">
        <p class="title">Roman numerals converter</p>
        <input type="number" id="number" class="viewfinder"></input>

        <div class="keyboard">
            <div class="num-buttons num1">1</div>
            <div class="num-buttons num2">2</div>
            <div class="num-buttons num3">3</div>
            <div class="num-buttons num4">4</div>
            <div class="num-buttons num5">5</div>
            <div class="num-buttons num6">6</div>
            <div class="num-buttons num7">7</div>
            <div class="num-buttons num8">8</div>
            <div class="num-buttons num9">9</div>
            <div class="num-buttons num0">0</div>
        </div>

        <div class="result">
            <div class="buttons-result">
                <button type="reset" value="Reset" class="button-result">Reset</button>
                <button type="submit" id="convert-btn" class="button-result c">Convert</button>
            </div>

            <p class="show-result">Show Result</p>
            <div id="output" class="viewfinder"></div>
        </div>

    </form>
    <script src="script.js"></script>
</body>

</html>

/* file: styles.css */

:root {
    --dark-machine: color-mix(in srgb, indigo, black 28%);
    --dark-visor: color-mix(in srgb, rgb(130, 212, 7), black 25%);
    --color-keyboard: color-mix(in srgb, rgb(78, 73, 73), white 8%);
    --color-buttons: color-mix(in srgb, rgb(252, 41, 3), black 40%);
    --color-back: rgb(83, 82, 82);

    --margin: 6px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: "Orbitron", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
}

html {
    /*solo para ver los limites del body*/
    scroll-behavior: smooth;
    background-color: var(--color-back);
}

body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    text-align: center;
    max-width: 600px;
    background-color: var(--color-back);
    margin: auto;
}

.machine {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 350px;
    height: 500px;
    border: 2px solid black;
    border-radius: 15px;
    background-color: var(--dark-machine);
    box-shadow: inset 0 0 3px 3px rgb(0 0 0 /50%);
    border-bottom-width: 15px;
    border-bottom-color: rgb(0 0 0 /65%);
    border-left-width: 18px;
    border-left-color: rgb(0 0 0 /65%);
    border-bottom-left-radius: 5px;

}


.viewfinder {
    width: 200px;
    height: 50px;
    border: 2px solid black;
    border-radius: 10px;
    background-color: var(--dark-visor);
    margin: var(--margin);
    box-shadow: inset 0 0 5px 5px rgb(0 0 0 /60%);
    border-bottom-width: 4px;
    border-bottom-color: rgb(0 0 0 /90%);
    text-align: center;
    outline: none;
}

.keyboard {
    width: 200px;
    height: 150px;
    border: 1px double black;
    border-radius: 10px;
    margin: var(--margin) 0;
    padding: 6px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    background-color: var(--color-keyboard);
    box-shadow: inset 0 0 5px 5px rgb(0 0 0 /60%);

    .num-buttons {
        width: 50px;
        height: 30px;
        border: 1.5px solid black;
        border-radius: 5px;
        margin: 2px;
        padding: 3px;
        border-bottom-width: 5px;
        border-top-color: rgb(0 0 0 /30%);
    }
}

.num-buttons:active {
    border-bottom-width: 2px;
    transform: translateY(3px);
    background-color: rgb(70, 68, 68);
}




.result {
    margin: var(--margin) 0;

    #output {
        font-size: 0.7rem;
        font-weight: 700;
        padding: 4px;
        display: flex;
        justify-content: center;
        align-items: center;

    }
}

.buttons-result {
    margin: 10px 0;

    .button-result {
        background-color: var(--color-buttons);
        width: 70px;
        height: 30px;
        border: 1px solid black;
        border-radius: 5px;
        outline: none;
        padding: 3px;
        border-bottom-width: 3px;
        border-bottom-color: rgb(0 0 0 /90%);
        margin: 0 17px;
        box-shadow: inset 0 0 3px 3px rgb(0 0 0 /60%);

        &:active {
            transform: translateY(4px);
        }
    }

    .c {
        width: 80px;
        background-color: rgb(8, 8, 151);
    }
}

/* file: script.js */

const str = document.querySelector("#number");
const resetBTn = document.querySelector(".button-result");
const convertBtn = document.querySelector("#convert-btn");
const output = document.querySelector("#output");
const num1 = document.querySelector(".num1");
const num2 = document.querySelector(".num2");
const num3 = document.querySelector(".num3");
const num4 = document.querySelector(".num4");
const num5 = document.querySelector(".num5");
const num6 = document.querySelector(".num6");
const num7 = document.querySelector(".num7");
const num8 = document.querySelector(".num8");
const num9 = document.querySelector(".num9");
const num0 = document.querySelector(".num0");

num1.addEventListener("click", () => {
  str.value += 1;
});
num2.addEventListener("click", () => {
  str.value += 2;
});
num3.addEventListener("click", () => {
  str.value += 3;
});
num4.addEventListener("click", () => {
  str.value += 4;
});
num5.addEventListener("click", () => {
  str.value += 5;
});
num6.addEventListener("click", () => {
  str.value += 6;
});
num7.addEventListener("click", () => {
  str.value += 7;
});
num8.addEventListener("click", () => {
  str.value += 8;
});
num9.addEventListener("click", () => {
  str.value += 9;
});
num0.addEventListener("click", () => {
  str.value += 0;
});

resetBTn.addEventListener("click", () => {
  output.textContent = "";
  return;
});

const valEntry = (e) => {
  e.preventDefault();
  if (str.value.length == 0) {
    return (output.textContent = "Please enter a valid number");
  } else if (str.value <= 0) {
    return (output.textContent =
      "Please enter a number greater than or equal to 1");
  } else if (str.value >= 4000) {
    return (output.textContent =
      "Please enter a number less than or equal to 3999");
  }
};

const roman = {
  1: "I",
  5: "V",
  10: "X",
  50: "L",
  100: "C",
  500: "D",
  1000: "M",
};

const millar = (num) => {
  num = entrada[3];
  if (entrada[3] >= 0 && entrada[3] <= 3) {
    output.textContent = roman[1000].repeat(entrada[3]);
  } else if (entrada[3] >= 4) {
    output.textContent = "Please enter a number less than or equal to 3999";
  }
  return output.textContent;
};

const centenas = (num) => {
  num = entrada[2];
  if (entrada[2] >= 0 && entrada[2] <= 3) {
    output.textContent = roman[100].repeat(entrada[2]);
  } else if (entrada[2] == 4) {
    output.textContent = roman[100].concat(roman[500]);
  } else if (entrada[2] >= 5 && entrada[2] <= 8) {
    output.textContent = roman[500].concat(roman[100].repeat(entrada[2] - 5));
  } else if (entrada[2] == 9) {
    output.textContent = roman[100].concat(roman[1000]);
  }
  return output.textContent;
};

const decenas = (num) => {
  num = entrada[1];
  if (entrada[1] >= 0 && entrada[1] <= 3) {
    output.textContent = roman[10].repeat(entrada[1]);
  } else if (entrada[1] == 4) {
    output.textContent = roman[10].concat(roman[50]);
  } else if (entrada[1] >= 5 && entrada[1] <= 8) {
    output.textContent = roman[50].concat(roman[10].repeat(entrada[1] - 5));
  } else if (entrada[1] == 9) {
    output.textContent = roman[10].concat(roman[100]);
  }
  return output.textContent;
};
const unidades = (num) => {
  num = entrada[0];
  if (entrada[0] >= 0 && entrada[0] <= 3) {
    output.textContent = roman[1].repeat(entrada[0]);
  } else if (entrada[0] == 4) {
    output.textContent = roman[1].concat(roman[5]);
  } else if (entrada[0] >= 5 && entrada[0] <= 8) {
    output.textContent = roman[5].concat(roman[1].repeat(entrada[0] - 5));
  } else if (entrada[0] == 9) {
    output.textContent = roman[1].concat(roman[10]);
  }
  return output.textContent;
};

let inputInt;
let entrada;

const convert = () => {
  inputInt = Array.from(String(str.value), Number);
  entrada = inputInt.reverse();
  output.textContent = null;
  output.textContent =
    `"${millar()}` + `${centenas()}` + `${decenas()}` + `${unidades()}"`;
  return;
};

convertBtn.addEventListener("click", convert);
convertBtn.addEventListener("click", valEntry);
10

Remove the quotes from your output

1 Like
11

No me lo puedo creer! funciona!
como en el enunciado se mostraba el resultado entre comillas, pensé que eso era lo que me faltaba y las había puesto como una posible solución.
Muchísimas gracias ILM, llevaba bastante tiempo con esto, borrando código, escribiendo código nuevo y nada.
Muchas gracias por la paciencia. (y por enseñarme como escribir en el foro).

1 Like