Learn Recursion by Building a Decimal to Binary Converter - Step 69

Tell us what’s happening:

Describe your issue in detail here.

``````<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<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>
<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>
``````
``````/* file: styles.css */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 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);
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;
}

.number-input {
height: 25px;
}

#result {
margin: 10px 0;
min-width: 200px;
width: fit-content;
min-height: 80px;
word-break: break-word;
border: 5px solid var(--orange);
font-size: 2rem;
text-align: center;
}

#animation-container {
margin: auto;
max-width: 300px;
}

.animation-frame {
margin: 250px auto 0;
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;
}
}
``````
``````/* file: script.js */
const numberInput = document.getElementById("number-input");
const convertBtn = document.getElementById("convert-btn");
const result = document.getElementById("result");

const decimalToBinary = (input) => {
if (input === 0) {
return "";
} else {

// User Editable Region

return (decimalToBinary(Math.floor(input / 2)) + input % 2);

// User Editable Region

}
};

const checkUserInput = () => {
if (!numberInput.value || isNaN(parseInt(numberInput.value))) {
return;
}

decimalToBinary(parseInt(numberInput.value));
numberInput.value = "";
};

if (e.key === "Enter") {
checkUserInput();
}
});
``````

User Agent is: `Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 YaBrowser/24.1.0.0 Safari/537.36`

Challenge Information:

Learn Recursion by Building a Decimal to Binary Converter - Step 69

``````return (decimalToBinary(Math.floor(input / 2)) + input % 2);
``````

Of course, I don’t understand what is needed here, but the code doesn’t work as always

You appear to have created this post without editing the template. Please edit your post to Tell us what’s happening in your own words.

Please talk to us about how the instructions or error message is confusing. Thanks

After calling decimalToBinary() use the addition operator (+), should this be written on another line? Or after the function to the end of the line - it’s also unclear which line? not everything is clear here

You have to read the whole sentence together

After your call to `decimalToBinary()`, use the addition operator (`+`) to concatenate the remainder of `input` divided by `2` to the end of the string your recursive function returns.

You are modifying what is returned from the function, so the concatenation has to be part of the return statement.

Also, wrap the operation in parentheses.

Then don’t forget this part.

I also can’t calculate in the same way as in this example, if you take 8 / 2 = 4, you get 4 that must be divided by with a remainder of 2, then you get 0.042, but in program 1000, who knows how it all works?