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

JavaScript
1

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

Your code so far

<!-- file: index.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>

/* file: styles.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;
  }
}

/* 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
  ) {
    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();
  }
});

Your browser information:

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

2

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.

Search: “console.log uses” (mozilla.org)
console: log() static method - Web APIs | MDN (mozilla.org)

3

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

4

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

Read more about decimal-binary conversion:
Convert Decimal to Binary with Step-by-Step Guide

5

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.

6

Thank you. i appreciate the explanation

1 Like
7

That is basically concatenation of string not addition

8

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]

9

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

MDN: Addition (+) - JavaScript

1 Like
10

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

11

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.