curriculum/challenges/english/blocks/workshop-decimal-to-binary-converter/6464abfb6cf778f3cb33d379.md
For the next phase of the animation you'll update the paragraphs with the msg text. Since you have the delays for each step of the animation already, you can add your code to the same .forEach() loop.
Add another setTimeout() function. Pass in an empty callback function as the first argument, and pass in the showMsgDelay property of the current object as the second argument.
Your showAnimation() function should have two setTimeout() functions.
assert.lengthOf(
String(showAnimation).match(/setTimeout/g),
2
);
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 the showMsgDelay property of the current object as the second argument.
assert.match(
String(showAnimation),
/setTimeout\s*\(\s*function\s*\(\s*\)\s*{\s*}\s*,\s*obj\.showMsgDelay\s*\)|setTimeout\s*\(\s*function\s*\(\s*\)\s*{\s*}\s*,\s*obj\s*\[\s*('|"|`)showMsgDelay\1\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 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);
--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();
}
});