curriculum/challenges/english/blocks/learn-recursion-by-building-a-decimal-to-binary-converter/6464b8ccb1a5d612c2f857d1.md
Now your animation is complete. When you enter 5 in the number input and click the Convert button, the animation will add paragraphs to the DOM, update the text of each paragraph, and then remove the paragraphs from the DOM.
The last thing you need to do is add the result of converting the number 5 into binary to the page once the animation is complete.
After the .forEach() method, add another setTimeout() function. Pass in an empty callback function as the first argument, and a delay of 20000 milliseconds as the second argument.
Your showAnimation() function should have four setTimeout() functions.
assert.lengthOf(
String(showAnimation).match(/setTimeout/g),
4
);
The new setTimeout() function should have an empty callback function as the first argument.
assert.match(
String(showAnimation),
/setTimeout\s*\(\s*function\s*\(\s*\)\s*{\s*}/
);
The new setTimeout() function should have a delay of 20000 milliseconds as the second argument.
assert.match(
String(showAnimation),
/setTimeout\s*\(\s*function\s*\(\s*\)\s*{\s*}\s*,\s*20000\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 animationContainer = document.getElementById("animation-container");
const animationData = [
{
inputVal: 5,
addElDelay: 1000,
msg: 'decimalToBinary(5) returns "10" + 1 (5 % 2). Then it pops off the stack.',
showMsgDelay: 15000,
removeElDelay: 20000,
},
{
inputVal: 2,
addElDelay: 1500,
msg: 'decimalToBinary(2) returns "1" + 0 (2 % 2) and gives that value to the stack below. Then it pops off the stack.',
showMsgDelay: 10000,
removeElDelay: 15000,
},
{
inputVal: 1,
addElDelay: 2000,
msg: "decimalToBinary(1) returns '1' (base case) and gives that value to the stack below. Then it pops off the stack.",
showMsgDelay: 5000,
removeElDelay: 10000,
}
];
const decimalToBinary = (input) => {
if (input === 0 || input === 1) {
return String(input);
} else {
return decimalToBinary(Math.floor(input / 2)) + (input % 2);
}
};
const showAnimation = () => {
result.innerText = "Call Stack Animation";
animationData.forEach((obj) => {
setTimeout(() => {
animationContainer.innerHTML += `
<p id="${obj.inputVal}" class="animation-frame">
decimalToBinary(${obj.inputVal})
</p>
`;
}, obj.addElDelay);
setTimeout(() => {
document.getElementById(obj.inputVal).textContent = obj.msg;
}, obj.showMsgDelay);
setTimeout(() => {
document.getElementById(obj.inputVal).remove();
}, obj.removeElDelay);
});
--fcc-editable-region--
--fcc-editable-region--
};
const checkUserInput = () => {
const inputInt = parseInt(numberInput.value);
if (!numberInput.value || isNaN(inputInt) || inputInt < 0) {
alert("Please provide a decimal number greater than or equal to 0");
return;
}
if (inputInt === 5) {
showAnimation();
return;
}
result.textContent = decimalToBinary(inputInt);
numberInput.value = "";
};
convertBtn.addEventListener("click", checkUserInput);
numberInput.addEventListener("keydown", (e) => {
if (e.key === "Enter") {
checkUserInput();
}
});