--- id: 645cd65c33bdc871bb72def4 title: Step 55 challengeType: 0 dashedName: step-55 --- # --description-- While that's a simple example, it demonstrates how the call stack steps through your code and calls multiple functions. Now it's time to jump into recursion, and see how the call stack fits into the picture. Remove your `callStack` array, the `a()`, `b()`, and `c()` functions, and the `console.log()` statement. # --hints-- You should remove the `callStack` array from your code. ```js assert.notMatch(code, /(var|let|const)\s+callStack\s*=\s*\[\s*\]/); ``` You should remove the `a()`, `b()`, and `c()` functions from your code. ```js assert.notMatch(code, /(var|let|const)\s+a\s*=\s*\(\s*\)\s*=>\s*\{[\s\S]+\}/); assert.notMatch(code, /(var|let|const)\s+b\s*=\s*\(\s*\)\s*=>\s*\{[\s\S]+\}/); assert.notMatch(code, /(var|let|const)\s+c\s*=\s*\(\s*\)\s*=>\s*\{[\s\S]+\}/); ``` Your code should not have a `console.log()` statement. ```js assert.notMatch(code, /console\.log\([\s\S]+\)/); ``` # --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 --fcc-editable-region-- const callStack = []; const a = () => { return "freeCodeCamp " + b(); }; const b = () => { return "is " + c(); }; const c = () => { return "awesome!"; }; console.log(a()); --fcc-editable-region-- const numberInput = document.getElementById("number-input"); const convertBtn = document.getElementById("convert-btn"); const result = document.getElementById("result"); const decimalToBinary = (input) => { let binary = ""; if (input === 0) { binary = "0"; } while (input > 0) { binary = (input % 2) + binary; input = Math.floor(input / 2); } result.innerText = binary; }; const checkUserInput = () => { if ( !numberInput.value || isNaN(parseInt(numberInput.value)) || parseInt(numberInput.value) < 0 ) { alert("Please provide a decimal number greater than or equal to 0"); return; } decimalToBinary(parseInt(numberInput.value)); numberInput.value = ""; }; convertBtn.addEventListener("click", checkUserInput); numberInput.addEventListener("keydown", (e) => { if (e.key === "Enter") { checkUserInput(); } }); ```