mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2025-12-23 21:04:36 -05:00
4.2 KiB
4.2 KiB
id, title, challengeType, dashedName
| id | title | challengeType | dashedName |
|---|---|---|---|
| 645cd65c33bdc871bb72def4 | Step 55 | 0 | 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.
assert.notMatch(code, /(var|let|const)\s+callStack\s*=\s*\[\s*\]/);
You should remove the a(), b(), and c() functions from your code.
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.
assert.notMatch(code, /console\.log\([\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;
}
}
--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();
}
});