mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2025-12-22 11:36:11 -05:00
4.5 KiB
4.5 KiB
id, title, challengeType, dashedName
| id | title | challengeType | dashedName |
|---|---|---|---|
| 645b9de38df75b9a5cfc2e85 | Step 36 | 0 | step-36 |
--description--
Now your decimalToBinary function is complete. Feel free to play around with it.
But there are some ways to improve it. For example, it's not necessary to keep track of the inputs and quotients. We can clean things up so the function is more efficient.
First, remove everything in the body of the decimalToBinary function. Then, use let to create a variable named binary and assign it an empty string.
--hints--
You should use let to create the binary variable.
assert.match(code, /let\s+binary\s*/);
You should create a variable named binary inside your decimalToBinary function.
assert.match(code, /const\s+decimalToBinary\s*=\s*(\(\s*input\s*\)|input)\s*=>\s*\{\s*let\s+binary\s*/);
You should assign binary an empty string.
assert.match(code, /let\s+binary\s*=\s*('|"|`)\1\s*;?/);
You should remove everything else from the body of your decimalToBinary function.
assert.match(code, /const\s+decimalToBinary\s*=\s*(?:\(\s*input\s*\)|input)\s*=>\s*\{\s*let\s+binary\s*=\s*('|"|`)\1\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;
}
}
const numberInput = document.getElementById("number-input");
const convertBtn = document.getElementById("convert-btn");
const result = document.getElementById("result");
const decimalToBinary = (input) => {
--fcc-editable-region--
const inputs = [];
const quotients = [];
const remainders = [];
if (input === 0) {
result.innerText = "0";
return;
}
while (input > 0) {
const quotient = Math.floor(input / 2);
const remainder = input % 2;
inputs.push(input);
quotients.push(quotient);
remainders.push(remainder);
input = quotient;
}
console.log("Inputs: ", inputs);
console.log("Quotients: ", quotients);
console.log("Remainders: ", remainders);
result.innerText = remainders.reverse().join("");
--fcc-editable-region--
};
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();
}
});