Hello! I am doing the Roman Numeral Converter project, and is currently stuck with two responsiveness issues.
-
After inputting and pressing “Enter” on the keyboard, it is not responsive. Only clicking the convert button works at the moment.
-
I cannot get the result to show up in the #output div. Only the white borders show up.
Here is my code for your reference:
HTML:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=content-width, initial-scale=1.0">
<title>Roman Numeral Converter</title>
<link href="styles.css" rel="stylesheet">
</head>
<body>
<h1>Roman Numeral Converter</h1>
<div class="container">
<label for="number">Type your number:</label>
<input type="number" id="number">
<button id="convert-btn">Convert!</button>
</div>
<div id="output"></div>
<script src="script.js"></script>
</body>
</html>
CSS:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--purple: #4d114d;
--white: #ffffff;
--green: #148f45;
}
body {
background-color: var(--purple);
color: var(--white);
font-family: calibri, sans-serif;
display: flex;
flex-direction: column;
}
h1 {
text-align: center;
font-size: 2.5rem;
margin: 20px 0;
padding: 0 10px;
}
.container {
margin: 20px auto;
padding: 0 10px;
border: 2px solid var(--white);
display: flex;
flex-direction: column;
word-break: break-word;
}
label {
font-size: 1.2rem;
padding: 5px 0;
text-align: center;
font-style: italic;
}
#number {
height: 30px;
font-size: 1.2rem;
text-indent: 2%;
margin: 10px 0;
}
#convert-btn {
background-color: var(--green);
border-radius: 10px;
cursor: pointer;
max-width: 150px;
padding: 5px;
margin: 5px auto 15px auto;
}
.output-box {
margin: 20px auto;
padding: 0 10px;
border: 2px solid var(--white);
}
JavaScript:
const userInput = document.getElementById("number");
const convertBtn = document.getElementById("convert-btn");
const showResult = document.getElementById("output");
const dictionary = {
1: "I",
4: "IV",
5: "V",
9: "IX",
10: "X",
40: "XL",
50: "L",
90: "XC",
100: "C",
400: "CD",
500: "D",
900: "CM",
1000: "M"
};
const theBox = [1000, 900, 500, 400, 100, 90, 50, 40, 10, 9, 5, 4, 1];
const revisedInput = Number(userInput);
const magicConverter = (revisedInput) => {
let outcome = "";
let i = 0;
while(revisedInput > 0) {
const reduction = theBox[i];
if(reduction > revisedInput) {
i++;
} else {
revisedInput -= reduction;
outcome += dictionary[reduction];
}
}
return showResult.innerHTML = `
<div class="output-box">
${outcome}
</div>
`
}
convertBtn.addEventListener("click", magicConverter);
convertBtn.addEventListener("keydown", (e) => {
if(e.key === "Enter") {
magicConverter();
}
});
Thanks in advance for your expert advice!