# Learn Recursion by Building a Decimal to Binary Converter - Step 41

### Tell us what’s happening:

What i am doing wrong here please can someone tell me?

``````<!-- 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: script.js */
const numberInput = document.getElementById("number-input");
const convertBtn = document.getElementById("convert-btn");
const result = document.getElementById("result");

const decimalToBinary = (input) => {
let binary = "";

// User Editable Region

while (input > 0) {

binary = (input % 2) + binary;

// User Editable Region

input = Math.floor(input / 2);
}

result.innerText = binary;
};

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

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

if (e.key === "Enter") {
checkUserInput();
}
});
``````
``````/* 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;
}
}
``````

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

### Challenge Information:

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

Your code looks fine. What error do you see?

Try to click reset and add the binary again in case it helps.

Sorry, your code does not pass. Keep trying.

You should use the addition operator (`+`) to add `binary` to the end of the equation `input % 2`.
i see this

When you click reset, did you just add the plus sign and the word binary?
Or did you add anything else like parenthesis?

i just added + sign when i reset it

Can you post the code again because the first time your code had extra parentheses

mod edit: code removed

Did you pass the step? (You marked the post solved?)

yes it worked thanks for your help

okay, I was confused because you posted the code again (usually we only post code when we need help in the forum).
I’ve removed the code posted in your previous response so as not to spoil the solution.

I had the same problem ( now solved ) but that raised a question, why is using parenthesis wrong here?

binary = (input % 2) + binary; // this is wrong, why ?

because the step has code that checks the answer and the check is being too strict.
you can open a github issue if you like so the devs can fix it.