--- id: 6464ab8c06ea92f30bc548d5 title: Step 102 challengeType: 0 dashedName: step-102 --- # --description-- For the last animation object, add the property `msg` set to the following string: ```md decimalToBinary(5) returns "10" + 1 (5 % 2). Then it pops off the stack. ``` Also, add the property `showMsgDelay` set to `15000` and the property `removeElDelay` set to `20000`. # --hints-- You should add the property `msg` to the animation object at the bottom of the stack. ```js assert.property( animationData[0], 'msg', ) ``` You should set the value of the `msg` property to `decimalToBinary(5) returns "10" + 1 (5 % 2). Then it pops off the stack.` ```js assert.match( animationData[0].msg, /decimalToBinary\s*\(\s*5\s*\)\s*returns\s*('|"|`)10\s*\1\s*\+\s*1\s*\(\s*5\s*%\s*2\s*\)\s*\.\s*Then\s+it\s+pops\s+off\s+the\s+stack\.?/i ); ``` You should add the property `showMsgDelay` to the animation object at the bottom of the stack. ```js assert.property( animationData[0], 'showMsgDelay', ) ``` You should set the value of the `showMsgDelay` property to `15000`. ```js assert.propertyVal( animationData[0], 'showMsgDelay', 15000 ) ``` You should add the property `removeElDelay` to the animation object at the bottom of the stack. ```js assert.property( animationData[0], 'removeElDelay', ) ``` You should set the value of the `removeElDelay` property to `20000`. ```js assert.propertyVal( animationData[0], 'removeElDelay', 20000 ) ``` # --seed-- ## --seed-contents-- ```html Decimal to Binary Converter

Decimal to Binary Converter

``` ```css *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --light-grey: #f5f6f7; --dark-blue: #1b1b32; --orange: #f1be32; } body { background-color: var(--dark-blue); font-family: "Times New Roman", Times, serif; font-size: 18px; color: var(--light-grey); padding: 0 15px; display: flex; flex-direction: column; align-items: center; } h1 { text-align: center; font-size: 2.3rem; margin: 20px 0; } .input-container { margin: 10px 0; display: flex; flex-direction: column; gap: 10px; justify-content: center; align-items: center; } .convert-btn { background-color: var(--orange); cursor: pointer; border: none; padding: 4px; } .number-input { height: 25px; } #result { margin: 10px 0; min-width: 200px; width: fit-content; min-height: 80px; word-break: break-word; padding: 15px; border: 5px solid var(--orange); font-size: 2rem; text-align: center; } #animation-container { margin: auto; max-width: 300px; } .animation-frame { margin: 250px auto 0; padding: 15px 10px; border: 5px solid var(--orange); font-size: 1.2rem; text-align: center; } @media screen and (min-width: 500px) { .input-container { flex-direction: row; } #result { max-width: 460px; } } ``` ```js 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 = [ --fcc-editable-region-- { inputVal: 5, marginTop: 300, addElDelay: 1000 }, --fcc-editable-region-- { 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) => { setTimeout(() => { animationContainer.innerHTML += `

decimalToBinary(${obj.inputVal})

`; }, obj.addElDelay); }); }; 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(); } }); ```