Build a Decimal to Binary Converter - Step 31

JavaScript
1

Tell us what’s happening:

console.log("Inputs: ", inputs.join(", "));
console.log(`Inputs: ,${inputs}`);
console.log(`Inputs: ${inputs.join(", ") } `);
console.log("Inputs: " + "," + Inputs);
console.log("Inputs: " + inputs.join(", ")});
v

Hi! I’ve tried these and other methods. I tried solving the problem literally, by writing "Entries: ", then a comma, “,”, and then the array of entries. I tried printing each element of the array separated by a comma. I tried leaving a space after the comma and then no space at all. I’m not sure what to try. Thanks!

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 <br />
      Converter
    </h1>
    <section 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>
    </section>
    <section class="output-container">
      <output id="result" for="number-input"></output>
      <h2>Call stack</h2>
      <div id="animation-container"></div>
    </section>
    <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 {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
    monospace;
  font-size: 1.125rem;
  color: var(--light-grey);
  background-color: var(--dark-blue);
  padding: 0 4px;
}

h1 {
  font-size: 2.125rem;
  text-align: center;
  margin: 20px 0;
}

h2 {
  font-size: 1.5rem;
  text-align: center;
  margin: 20px 0;
}

.input-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
  align-items: center;
  width: clamp(320px, 50vw, 460px);
  margin: 10px auto;
}

.input-container label {
  white-space: nowrap;
  word-spacing: -6px;
}

.convert-btn {
  font-size: inherit;
  font-family: inherit;
  background-color: var(--orange);
  width: 100%;
  height: 2rem;
  padding: 0 6px;
  border: none;
  border-radius: 2px;
  cursor: pointer;
}

.number-input {
  font-size: inherit;
  padding: 0.3rem;
  width: 100%;
}

.output-container {
  margin-inline: auto;
  width: clamp(320px, 50vw, 460px);
}

#result {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  text-align: center;
  min-height: 80px;
  margin-block-start: 20px;
  padding: 15px;
  border: 2px solid var(--orange);
  border-radius: 2px;
}

#animation-container {
  display: flex;
  flex-direction: column-reverse;
  justify-content: end;
  gap: 1rem;
  margin-block-end: 1rem;
  min-height: 40vh;
  border: 2px dashed var(--orange);
  padding: 1rem;
}

.animation-frame {
  font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
    helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
    sans-serif;
  padding: 15px 10px;
  border: 5px solid var(--orange);
  font-size: 1.2rem;
  text-align: center;
}

@media screen and (min-width: 36em) {
  body {
    font-size: 1rem;
  }

  .input-container {
    flex-direction: row;
    width: unset;
  }

  .number-input {
    width: unset;
  }
}

/* file: script.js */
const numberInput = document.getElementById("number-input");
const convertBtn = document.getElementById("convert-btn");
const result = document.getElementById("result");

const decimalToBinary = (input) => {
  const inputs = [];
  const quotients = [];
  const remainders = [];

  while (input > 0) {
    const quotient = Math.floor(input / 2);
    const remainder = input % 2;

    inputs.push(input);
    quotients.push(quotient);
    remainders.push(remainder);
    input = quotient;
  }


// User Editable Region

console.log("Inputs: ", inputs.join(", "));

// 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/137.0.0.0 Safari/537.36

Challenge Information:

Build a Decimal to Binary Converter - Step 31

2

Instructions don’t ask for join. Did you try just putting the inputs array variable and nothing extra?

That should do it, can you show that code? Except the instructions ask for “Inputs” not entries:

Log the text "Inputs: ", followed by a comma, followed by the inputs array to the console.

1 Like
3

Hello! Thanks for your reply.
I try this:

console.log(`Inputs: ,${inputs}`);
console.log(`Inputs: , ${inputs}`);
console.log(`Inputs:,${inputs}`);
console.log(`Inputs:, ${inputs}`);
console.log("Inputs: " + "," + inputs);
console.log("Inputs: " + ", " + inputs);
console.log("Inputs:" + "," + inputs);
console.log("Inputs:" + ", " + inputs);

Considering the resolution is literal. But none of that passes the test.
The rest of the code remains the same as I posted above and there shouldn’t be any errors, as it has passed all tests so far. Thanks :slight_smile:

4

You’re wildly overthinking this.

You don’t want to log a comma, maybe the instructions are mis-leading. Just use a comma to separate the arguments.

You only want to log "Inputs: " and inputs to the console.

You can log text:
console.log("This is some text")

You can log a variable:
console.log(somevar)

You can log 2 or more arguments separated with a comma:
console.log(somevar, 3, "some text")

That’s all you need to do this:

Log the text "Inputs: ", followed by a comma, followed by the inputs array to the console.

1 Like
5

Okay. Now I understand. Thank you so much!!! You helped me a lot :smiley:

1 Like