mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2025-12-22 03:26:02 -05:00
192 lines
3.9 KiB
Markdown
192 lines
3.9 KiB
Markdown
---
|
|
id: 645c81683d816b7b3a044143
|
|
title: Step 40
|
|
challengeType: 0
|
|
dashedName: step-40
|
|
---
|
|
|
|
# --description--
|
|
|
|
In the previous version of this function, you pushed the remainder of `input` divided by `2` to `binaryArray`. Then later you reversed and joined the entries into a binary number string.
|
|
|
|
But it would be easier to use string concatenation within the loop to build the binary string from right to left, so you won't need to reverse it later.
|
|
|
|
First, use the `remainder` operator (`%`) to set `binary` equal to the remainder of `input` divided by `2`.
|
|
|
|
# --hints--
|
|
|
|
You should set the value of `binary` within your `while` loop.
|
|
|
|
```js
|
|
assert.match(code, /while\s*\(\s*input\s*>\s*0\s*\)\s*\{[\s\S]+binary\s*=/);
|
|
```
|
|
|
|
You should set `binary` equal to the remainder of `input` divided by `2`.
|
|
|
|
```js
|
|
assert.match(code, /while\s*\(\s*input\s*>\s*0\s*\)\s*\{[\s\S]+binary\s*=\s*input\s*%\s*2\s*;?/);
|
|
```
|
|
|
|
# --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 decimalToBinary = (input) => {
|
|
let binary = "";
|
|
|
|
while (input > 0) {
|
|
--fcc-editable-region--
|
|
|
|
--fcc-editable-region--
|
|
input = Math.floor(input / 2);
|
|
}
|
|
|
|
result.innerText = binary;
|
|
};
|
|
|
|
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();
|
|
}
|
|
});
|
|
```
|