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

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

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)

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

Read more about decimal-binary conversion:
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