--- id: 645c8fe0c9505407650c4ac6 title: Step 58 challengeType: 0 dashedName: step-58 --- # --description-- A recursive function is a function that calls itself over and over. But you have to be careful because you can easily create an infinite loop. That's where the base case comes in. The base case is when the function stops calling itself, and it is a good idea to write it first. Since your `countdown()` function will count down from a given number to zero, the base case is when the `number` parameter is equal to `0`. Then it should `return` to break out of its recursive loop. Use an `if` statement to check if `number` is equal to `0`. If it is, use the `return` keyword to break out of the function. # --hints-- Your `countdown` function should have an `if` statement that checks if `number` is equal to `0`. ```js assert.match(String(countdown), /if\s*\(\s*number\s*===?\s*0\s*\)\s*\{?/); ``` Your `countdown` function should `return` when `number` is equal to `0`. ```js assert.match(String(countdown), /if\s*\(\s*number\s*===?\s*0\s*\)\s*\{?\s*return\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 const numberInput = document.getElementById("number-input"); const convertBtn = document.getElementById("convert-btn"); const result = document.getElementById("result"); const countdown = (number) => { console.log(number); --fcc-editable-region-- --fcc-editable-region-- }; 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(); } }); ```