mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2025-12-23 12:03:28 -05:00
4.3 KiB
4.3 KiB
id, title, challengeType, dashedName
| id | title | challengeType | dashedName |
|---|---|---|---|
| 645b7f6a575ffc807877a8c6 | Step 34 | 0 | step-34 |
--description--
Your decimalToBinary function works well, but there is an issue – because of the condition in your while loop, it only works for numbers greater than 0. If you try to convert 0 to binary, nothing will get added to the page.
To fix this, add an if statement to check if input is equal to 0. Leave the body of the if statement empty for now.
--hints--
You should add an if statement that checks if input is equal to 0.
assert.match(String(decimalToBinary), /if\s*\(\s*input\s*===?\s*0\s*\)\s*\{/);
The body of your if statement should be empty.
assert.match(String(decimalToBinary), /if\s*\(\s*input\s*===?\s*0\s*\)\s*\{\s*\}/);
Your if statement should be written before your while loop.
assert.match(String(decimalToBinary), /if\s*\(\s*input\s*===?\s*0\s*\)\s*\{\s*\}[\s\S]*while\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) => {
const inputs = [];
const quotients = [];
const remainders = [];
--fcc-editable-region--
--fcc-editable-region--
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("");
};
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();
}
});