mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2025-12-22 19:43:28 -05:00
229 lines
4.4 KiB
Markdown
229 lines
4.4 KiB
Markdown
---
|
|
id: 6464a057702d04e537d56d49
|
|
title: Step 98
|
|
challengeType: 0
|
|
dashedName: step-98
|
|
---
|
|
|
|
# --description--
|
|
|
|
Now it's time to set up for the next phase of the animation where you'll update and remove the paragraphs you append to the DOM during the animation.
|
|
|
|
Add the property `msg` to the animation object at the top of the stack, and set its value to an empty string.
|
|
|
|
# --hints--
|
|
|
|
You should add the property `msg` to the animation object at the top of the stack.
|
|
|
|
```js
|
|
assert.property(
|
|
animationData[2],
|
|
'msg',
|
|
)
|
|
```
|
|
|
|
You should set the value of the `msg` property to an empty string.
|
|
|
|
```js
|
|
assert.propertyVal(
|
|
animationData[2],
|
|
'msg',
|
|
''
|
|
)
|
|
```
|
|
|
|
# --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 animationContainer = document.getElementById("animation-container");
|
|
const animationData = [
|
|
{
|
|
inputVal: 5,
|
|
marginTop: 300,
|
|
addElDelay: 1000
|
|
},
|
|
{
|
|
inputVal: 2,
|
|
marginTop: -200,
|
|
addElDelay: 1500
|
|
},
|
|
--fcc-editable-region--
|
|
{
|
|
inputVal: 1,
|
|
marginTop: -200,
|
|
addElDelay: 2000
|
|
}
|
|
--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 = () => {
|
|
result.innerText = "Call Stack Animation";
|
|
|
|
animationData.forEach((obj) => {
|
|
setTimeout(() => {
|
|
animationContainer.innerHTML += `
|
|
<p id="${obj.inputVal}" style="margin-top: ${obj.marginTop}px;" class="animation-frame">
|
|
decimalToBinary(${obj.inputVal})
|
|
</p>
|
|
`;
|
|
}, obj.addElDelay);
|
|
});
|
|
};
|
|
|
|
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();
|
|
}
|
|
});
|
|
```
|