curriculum/challenges/english/blocks/workshop-decimal-to-binary-converter/640067f276acd525509646cc.md
Because the input type="number" element allows special characters like ., +, and e, users can input floats like 2.2, equations like 2e+3, or even just e, which you don't want to allow.
A good way to check and normalize numbers in JavaScript is to use the built-in parseInt() function, which converts a string into an integer or whole number. parseInt() takes at least one argument, a string to be converted into an integer, and returns either an integer or NaN which stands for Not a Number. For example:
parseInt(2.2); // 2
parseInt("2e+3"); // 2
parseInt("e") // NaN
Add a logical OR operator (||) after the first condition in your if statement. Then, pass the value of numberInput into the parseInt() function as the second condition of your if statement.
You should add the logical OR operator (||) after the first condition in your if statement, then pass the value of numberInput into the parseInt() function as the second condition of your if statement.
assert.match(String(checkUserInput), /if\s*\(\s*!\s*numberInput\s*\.\s*value\s*\|\|\s*parseInt\(\s*numberInput\s*\.\s*value\s*\)\s*\)\s*\{|if\s*\(\s*!\s*numberInput\s*\.\s*value\s*\|\|\s*parseInt\(\s*numberInput\s*\[\s*('|"|`)value\1\s*\]\s*\)\s*\)\s*\{/);
The body of your if statement within checkUserInput should be empty.
assert.match(String(checkUserInput), /if\s*\(\s*.+\s*\)\s*\{\s*\}/);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Decimal to Binary Converter</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>
Decimal to Binary
Converter
</h1>
<section class="input-container">
<label for="number-input">Enter a decimal number:</label>
<input
value=""
type="number"
name="decimal number input"
id="number-input"
class="number-input"
/>
<button class="convert-btn" id="convert-btn">Convert</button>
</section>
<section class="output-container">
<output id="result" for="number-input"></output>
<h2>Call stack</h2>
<div id="animation-container"></div>
</section>
<script src="script.js"></script>
</body>
</html>
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
--light-grey: #f5f6f7;
--dark-blue: #1b1b32;
--orange: #f1be32;
}
body {
display: flex;
flex-direction: column;
align-items: center;
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
monospace;
font-size: 1.125rem;
color: var(--light-grey);
background-color: var(--dark-blue);
padding: 0 4px;
}
h1 {
font-size: 2.125rem;
text-align: center;
margin: 20px 0;
}
h2 {
font-size: 1.5rem;
text-align: center;
margin: 20px 0;
}
.input-container {
display: flex;
flex-direction: column;
gap: 10px;
justify-content: center;
align-items: center;
width: clamp(320px, 50vw, 460px);
margin: 10px auto;
}
.input-container label {
white-space: nowrap;
word-spacing: -6px;
}
.convert-btn {
font-size: inherit;
font-family: inherit;
background-color: var(--orange);
width: 100%;
height: 2rem;
padding: 0 6px;
border: none;
border-radius: 2px;
cursor: pointer;
}
.number-input {
font-size: inherit;
padding: 0.3rem;
width: 100%;
}
.output-container {
margin-inline: auto;
width: clamp(320px, 50vw, 460px);
}
#result {
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
text-align: center;
min-height: 80px;
margin-block-start: 20px;
padding: 15px;
border: 2px solid var(--orange);
border-radius: 2px;
}
#animation-container {
display: flex;
flex-direction: column-reverse;
justify-content: end;
gap: 1rem;
margin-block-end: 1rem;
min-height: 40vh;
border: 2px dashed var(--orange);
padding: 1rem;
}
.animation-frame {
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
sans-serif;
padding: 15px 10px;
border: 5px solid var(--orange);
font-size: 1.2rem;
text-align: center;
}
@media screen and (min-width: 36em) {
body {
font-size: 1rem;
}
.input-container {
flex-direction: row;
width: unset;
}
.number-input {
width: unset;
}
}
const numberInput = document.getElementById("number-input");
const convertBtn = document.getElementById("convert-btn");
const result = document.getElementById("result");
const checkUserInput = () => {
--fcc-editable-region--
if (!numberInput.value) {
}
--fcc-editable-region--
console.log(numberInput.value);
};
convertBtn.addEventListener("click", checkUserInput);
numberInput.addEventListener("keydown", (e) => {
if (e.key === "Enter") {
checkUserInput();
}
});