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

Tell us what’s happening:

Describe your issue in detail here.
Why is your auto coder saying this is wrong?
return decimalToBinary(Math.floor(input / 2) + (Math.floor(input / 2) % 2));

Your code so far

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 {
// the recursive case
return decimalToBinary(Math.floor(input / 2) + (Math.floor(input / 2) % 2));
}

};

const checkUserInput = () => {
// checking for empty string which is faulsy, or not an integer with parseInt wrapped in isNaN
if (!numberInput.value || isNaN(parseInt(numberInput.value))) {
alert(“Please provide a decimal number”);
return;
}
decimalToBinary(parseInt(numberInput.value));
numberInput.value = “”;
};

convertBtn.addEventListener(“click”, checkUserInput);
numberInput.addEventListener(“keydown”, (e) => {
if (e.key === “Enter”) {
checkUserInput();
}
});

<!-- 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) + (Math.floor(input / 2) % 2));

// User Editable Region

  }
};

const checkUserInput = () => {
  if (!numberInput.value || isNaN(parseInt(numberInput.value))) {
    alert("Please provide a decimal number");
    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/122.0.0.0 Safari/537.36

Challenge Information:

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

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.

This concatenated value isn’t quite what the instructions are asking for:

concatenate the remainder of input divided by 2

You don’t need to use a / operator as the modulo (%) operator does that for you. You don’t need Math.floor() here either.

Hi - thanks for your reply on which I based changing the code to this which also is not working… :
const decimalToBinary = (input) => {
if (input === 0) {
return “”;
} else {
return decimalToBinary(Math.floor(input / 2) + (input % 2));
}
};

You’re close but you just need to move the concatenated bit outside of the decimalToBinary parentheses as you don’t want the function to act on that bit of the code.

1 Like