mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2025-12-22 03:26:02 -05:00
4.2 KiB
4.2 KiB
id, title, challengeType, dashedName
| id | title | challengeType | dashedName |
|---|---|---|---|
| 645c8fe0c9505407650c4ac6 | Step 58 | 0 | 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.
assert.match(String(countdown), /if\s*\(\s*number\s*===?\s*0\s*\)\s*\{?/);
Your countdown function should return when number is equal to 0.
assert.match(String(countdown), /if\s*\(\s*number\s*===?\s*0\s*\)\s*\{?\s*return\s*;?\s*\}?/);
--seed--
--seed-contents--
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Decimal to Binary Converter</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>Decimal to Binary Converter</h1>
<div class="input-container">
<label for="number-input">Enter a decimal number:</label>
<input
value=""
type="number"
name="decimal number input"
id="number-input"
class="number-input"
/>
<button class="convert-btn" id="convert-btn">Convert</button>
</div>
<output id="result" for="number-input"></output>
<div id="animation-container"></div>
<script src="script.js"></script>
</body>
</html>
*,
*::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;
}
}
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();
}
});