--- id: 646486adf52652c0ee103aab title: Step 85 challengeType: 0 dashedName: step-85 --- # --description-- Recall that the call stack is a LIFO (last in, first out) data structure. This means that, as functions are called, they are added to the top or end of the stack, and as functions return, they are removed from the top of the stack. Treat your `animationData` array as a stack and add a new object to it. Your new object should have the properties `inputVal`, `marginTop`, and `addElDelay` set to `2`, `-200`, and `1500`, respectively. Remember to add this object to the top of the stack, or in other words, to the end of the `animationData` array. # --hints-- The `animationData` array should have a length of `2`. ```js assert.lengthOf(animationData, 2); ``` Each element in the `animationData` array should be an object. ```js assert.isTrue(animationData.every((el) => typeof el === 'object')); ``` You should add an `inputVal` property to the object at the top of the stack. ```js assert.property(animationData[1], 'inputVal'); ``` You should set the value of the `inputVal` property to the number `2`. ```js assert.propertyVal(animationData[1], 'inputVal', 2); ``` You should add a `marginTop` property to the object at the top of the stack. ```js assert.property(animationData[1], 'marginTop'); ``` You should set the value of the `marginTop` property to the number `-200`. ```js assert.propertyVal(animationData[1], 'marginTop', -200); ``` You should add an `addElDelay` property to the object at the top of the stack. ```js assert.property(animationData[1], 'addElDelay'); ``` You should set the value of the `addElDelay` property to the number `1500`. ```js assert.propertyVal(animationData[1], 'addElDelay', 1500); ``` # --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 animationData = [ --fcc-editable-region-- { inputVal: 5, marginTop: 300, addElDelay: 1000 } --fcc-editable-region-- ]; const decimalToBinary = (input) => { if (input === 0 || input === 1) { return String(input); } else { return decimalToBinary(Math.floor(input / 2)) + (input % 2); } }; const showAnimation = () => { setTimeout(() => { console.log("free"); }, 500); setTimeout(() => { console.log("Code"); }, 1000); setTimeout(() => { console.log("Camp"); }, 1500); }; 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(); } }); ```