mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2025-12-22 19:43:28 -05:00
220 lines
4.5 KiB
Markdown
220 lines
4.5 KiB
Markdown
---
|
|
id: 645b9de38df75b9a5cfc2e85
|
|
title: Step 36
|
|
challengeType: 0
|
|
dashedName: 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.
|
|
|
|
```js
|
|
assert.match(code, /let\s+binary\s*/);
|
|
```
|
|
|
|
You should create a variable named `binary` inside your `decimalToBinary` function.
|
|
|
|
```js
|
|
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.
|
|
|
|
```js
|
|
assert.match(code, /let\s+binary\s*=\s*('|"|`)\1\s*;?/);
|
|
```
|
|
|
|
You should remove everything else from the body of your `decimalToBinary` function.
|
|
|
|
```js
|
|
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--
|
|
|
|
```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) => {
|
|
--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();
|
|
}
|
|
});
|
|
```
|