mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2025-12-23 03:53:24 -05:00
245 lines
5.1 KiB
Markdown
245 lines
5.1 KiB
Markdown
---
|
|
id: 646486adf52652c0ee103aab
|
|
title: Step 85
|
|
challengeType: 0
|
|
dashedName: step-85
|
|
---
|
|
|
|
# --description--
|
|
|
|
Recall that the call stack is a LIFO (last in, first out) data structure. This means that, as functions are called, they are added to the top or end of the stack, and as functions return, they are removed from the top of the stack.
|
|
|
|
Treat your `animationData` array as a stack and add a new object to it. Your new object should have the properties `inputVal`, `marginTop`, and `addElDelay` set to `2`, `-200`, and `1500`, respectively. Remember to add this object to the top of the stack, or in other words, to the end of the `animationData` array.
|
|
|
|
# --hints--
|
|
|
|
The `animationData` array should have a length of `2`.
|
|
|
|
```js
|
|
assert.lengthOf(animationData, 2);
|
|
```
|
|
|
|
Each element in the `animationData` array should be an object.
|
|
|
|
```js
|
|
assert.isTrue(animationData.every((el) => typeof el === 'object'));
|
|
```
|
|
|
|
You should add an `inputVal` property to the object at the top of the stack.
|
|
|
|
```js
|
|
assert.property(animationData[1], 'inputVal');
|
|
```
|
|
|
|
You should set the value of the `inputVal` property to the number `2`.
|
|
|
|
```js
|
|
assert.propertyVal(animationData[1], 'inputVal', 2);
|
|
```
|
|
|
|
You should add a `marginTop` property to the object at the top of the stack.
|
|
|
|
```js
|
|
assert.property(animationData[1], 'marginTop');
|
|
```
|
|
|
|
You should set the value of the `marginTop` property to the number `-200`.
|
|
|
|
```js
|
|
assert.propertyVal(animationData[1], 'marginTop', -200);
|
|
```
|
|
|
|
You should add an `addElDelay` property to the object at the top of the stack.
|
|
|
|
```js
|
|
assert.property(animationData[1], 'addElDelay');
|
|
```
|
|
|
|
You should set the value of the `addElDelay` property to the number `1500`.
|
|
|
|
```js
|
|
assert.propertyVal(animationData[1], 'addElDelay', 1500);
|
|
```
|
|
|
|
# --seed--
|
|
|
|
## --seed-contents--
|
|
|
|
```html
|
|
<!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>
|
|
```
|
|
|
|
```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 animationData = [
|
|
--fcc-editable-region--
|
|
{
|
|
inputVal: 5,
|
|
marginTop: 300,
|
|
addElDelay: 1000
|
|
}
|
|
--fcc-editable-region--
|
|
];
|
|
|
|
const decimalToBinary = (input) => {
|
|
if (input === 0 || input === 1) {
|
|
return String(input);
|
|
} else {
|
|
return decimalToBinary(Math.floor(input / 2)) + (input % 2);
|
|
}
|
|
};
|
|
|
|
const showAnimation = () => {
|
|
setTimeout(() => {
|
|
console.log("free");
|
|
}, 500);
|
|
setTimeout(() => {
|
|
console.log("Code");
|
|
}, 1000);
|
|
setTimeout(() => {
|
|
console.log("Camp");
|
|
}, 1500);
|
|
};
|
|
|
|
const checkUserInput = () => {
|
|
const inputInt = parseInt(numberInput.value);
|
|
|
|
if (!numberInput.value || isNaN(inputInt) || inputInt < 0) {
|
|
alert("Please provide a decimal number greater than or equal to 0");
|
|
return;
|
|
}
|
|
|
|
if (inputInt === 5) {
|
|
showAnimation();
|
|
return;
|
|
}
|
|
|
|
result.textContent = decimalToBinary(inputInt);
|
|
numberInput.value = "";
|
|
};
|
|
|
|
convertBtn.addEventListener("click", checkUserInput);
|
|
|
|
numberInput.addEventListener("keydown", (e) => {
|
|
if (e.key === "Enter") {
|
|
checkUserInput();
|
|
}
|
|
});
|
|
```
|