4.9 KiB
id, title, challengeType, dashedName
| id | title | challengeType | dashedName |
|---|---|---|---|
| 64646db2c684b7a3a174a1d0 | Step 81 | 0 | step-81 |
--description--
If you test your code, you'll notice that your console logs are not in the expected order. Instead of logging free, pausing for a second before logging Code, and finally logging Camp, you'll see this:
free
Camp
Code
This is because the setTimeout() function is asynchronous, meaning that it doesn't stop the execution of the rest of your code. All the code in the showAnimation() function runs line by line, but because setTimeout() is asynchronous, free and Camp are logged to the console immediately, and then Code is logged to the console after a one second delay.
One way to fix this is to use multiple setTimeout() functions. Use setTimeout() to log free to the console after half a second, or 500 milliseconds.
--hints--
You should add a second setTimeout() function to your showAnimation() function.
assert.lengthOf(
code.match(/setTimeout\(/g),
2
);
You should pass a callback function as the first argument to the new setTimeout() function.
assert.lengthOf(
code.match(/setTimeout\(\s*\(\s*\)\s*=>\s*\{?|setTimeout\(\s*function\s*\(\s*\)\s*\{/g),
2
);
Within the new setTimeout() function's callback, you should log the text free to the console.
assert.match(code, /setTimeout\(\s*\(\s*\)\s*=>\s*\{?\s*console\.log\(\s*('|"|`)\s*free\s*\1\s*\)|setTimeout\(\s*function\s*\(\s*\)\s*\{\s*console\.log\(\s*('|"|`)\s*free\s*\2\s*\)/i);
You should pass 500 as the second argument to the new setTimeout() function.
assert.match(code, /console\.log\(\s*('|"|`)\s*free\s*\1\s*\)\s*;?\s*\}?\s*,\s*500\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 decimalToBinary = (input) => {
if (input === 0 || input === 1) {
return String(input);
} else {
return decimalToBinary(Math.floor(input / 2)) + (input % 2);
}
};
const showAnimation = () => {
--fcc-editable-region--
console.log("free");
--fcc-editable-region--
setTimeout(() => {
console.log("Code");
}, 1000);
console.log("Camp");
};
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();
}
});