Learn Recursion by Building a Decimal to Binary Converter - Step 106

JavaScript
1

Tell us what’s happening:

I am not sure what i am doing wrong here it says to add three set timeouts but it keeps saying it is incorrect

Your code so far

<!-- file: index.html -->


/* file: styles.css */


/* file: script.js */
// User Editable Region

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,
    marginTop: 300,
    addElDelay: 1000,
    msg: 'decimalToBinary(5) returns "10" + 1 (5 % 2). Then it pops off the stack.',
    showMsgDelay: 15000,
    removeElDelay: 20000,
  },
  {
    inputVal: 2,
    marginTop: -200,
    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,
    marginTop: -200,
    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) => {
    // Add the paragraph element with a delay
    setTimeout(() => {
      animationContainer.innerHTML += `
        <p id="${obj.inputVal}" style="margin-top: ${obj.marginTop}px;" class="animation-frame">
          decimalToBinary(${obj.inputVal})
        </p>
      `;
    }, obj.addElDelay);

    // Update the paragraph's text with the message after showMsgDelay
    setTimeout(() => {
      document.getElementById(obj.inputVal).textContent = obj.msg;
    }, obj.addElDelay + obj.showMsgDelay);

    // Remove the paragraph element after removeElDelay
    setTimeout(() => {
      const element = document.getElementById(obj.inputVal);
      if (element) {
        element.remove();
      }
    }, obj.addElDelay + obj.showMsgDelay + obj.removeElDelay);
  });
};

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();
  }
});

// User Editable Region

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.0.0 Safari/537.36

Challenge Information:

Learn Recursion by Building a Decimal to Binary Converter - Step 106

2

Hey @mbas,

The step 106 says:
"
Add a setTimeout() function to your .forEach() loop. Pass in an empty callback function as the first argument, and pass in the removeElDelay property of the current object as the second argument.
"
Check your third setTimeout() i your .forEach() loop.

Hope it helps!

3

so i need to remove

setTimeout(() => {
      animationContainer.innerHTML += `
        <p id="${obj.inputVal}" style="margin-top: ${obj.marginTop}px;" class="animation-frame">
          decimalToBinary(${obj.inputVal})
        </p>
      `;
}, obj.addElDelay);
4

You don’t need to remove this code.
You need to create a function to remove the paragraph elements from the #show-animation element.
You need to edit this function:
´´´
// Remove the paragraph element after removeElDelay
setTimeout(() => {
const element = document.getElementById(obj.inputVal);
if (element) {
element.remove();
}
}, obj.addElDelay + obj.showMsgDelay + obj.removeElDelay);
});
´´´

5

hi there!
the instruction is asking you: Add a setTimeout() function to your .forEach() loop. Pass in an empty callback function as the first argument, and pass in the removeElDelay property of the current object as the second argument.
you added more than the istructions wants. only add setTimeout function with an emty callback function as a first argument and add removeElDelay property of current obj as the second argument.

1 Like
6

i am confused how do i edit this bit?

7

just reset your challenge step and try to code again according to the instructions