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 |
|---|---|---|---|
| 645cbb5ab1296e49946adb6e | Step 47 | 0 | step-47 |
--description--
In computer science, a stack is a data structure where items are stored in a LIFO (last-in-first-out) manner. If you imagine a stack of books, the last book you add to the stack is the first book you can take off the stack. Or an array where you can only .push() and .pop() elements.
The call stack is a collection of function calls stored in a stack structure. When you call a function, it is added to the top of the stack, and when it returns, it is removed from the top / end of the stack.
You'll see this in action by creating mock call stack.
Initialize a variable named callStack and assign it an empty array.
--hints--
You should create a variable named callStack.
assert.exists(callStack);
You should assign callStack an empty array.
assert.isArray(callStack);
assert.isEmpty(callStack);
--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--
--fcc-editable-region--
const a = () => {
return "freeCodeCamp " + b();
};
const b = () => {
return "is " + c();
};
const c = () => {
return "awesome!";
};
console.log(a());
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();
}
});