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

### Tell us what’s happening:

I have passed the test but am confused as to how the code works cause when I console log the code I become confused as to how it works

``````<!-- 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)) ||
parseInt(numberInput.value) < 0
) {
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/125.0.0.0 Safari/537.36`

### Challenge Information:

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

Good question, At the end of an exercise it tells you test completed and move on. `Code, Read and Document.` Using console.log is a good way to get a readout of what the code is doing, most of the time with a function or a variable but there are many,many uses for it. Remember console.log helps progrmmers to debug, but I used it to solve problems as well.

return decimalToBinary(Math.floor(input / 2)) + (input % 2);
why are we adding the function to the remainder, I still get confused when I console.log to get a breakdown of the result

This is how decimal-binary conversion works:

divide the number by 2 recursively and note down the remainder until you get the quotient as 0

5 in binary is : `101`

let’s see how it works:

``````console.log(decimalToBinary(5));
``````

→ decimalToBinary(5)

→ decimalToBinary(2) + 1

and `decimalToBinary(2)` part will return → decimalToBinary(1) + 0

→ decimalToBinary(1) + 0 + 1

→ decimalToBinary(0) + 1 + 0 + 1

→ “” + 1 + 0 + 1

and because you start with an empty string `""`, JavaScript treats all subsequent additions as string concatenations instead of numerical additions.

So the result is : `101`

There is a website where you can paste your JavaScript code and it will visualize its execution for you called Python Tutor but it has JavaScript also: PythonTutor - JavaScript

Convert Decimal to Binary with Step-by-Step Guide

Can you please post the code that you are using to console.log the function. Are you simply putting in the function name to get feedback because thats basically all you are going to get. You’re returning a function also with an argument also `Math.floor(another argument)` and so on. My point is the console.log is not going solve and/or explain anything.

Thank you. i appreciate the explanation

1 Like

That is basically concatenation of string not addition

Can you please tell us more about how jaavscript treats all concatenation into string this part is consfusing
“” + 1 + 0 + 1

and because you start with an empty string `""`, JavaScript treats all subsequent additions as string concatenations instead of numerical additions.
[/quote]

the plus sign `+` can be used for both mathematical addition and string concatenation.

if there is a string in this operation, JavaScript will treat all subsequent `+` operations as string concatenation. Otherwise, it will perform normal addition.

``````console.log(1 + 2 + 3 + " Hello " + "World " + 4 + 5 + 6) // 6 Hello World 456

console.log("Hello " + 1 + 2 + 3) // Hello 123

console.log("" + 1 + 0 + 1) // 101
``````
1 Like

Got it , is this phenomenon limited to javascript only …???

Different languages handle concatenation and addition differently.
Some languages will throw an error if you try to add a string and a number without explicit conversion like in Python.

You can search about it for the language you want.