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

JavaScript
1

Tell us what’s happening:

Describe your issue in detail here.

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) => {

// User Editable Region

  return "1";

// 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/120.0.0.0 YaBrowser/24.1.0.0 Safari/537.36

Challenge Information:

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

there’s no clear explanation here, just like it’s not clear what to do, it’s even difficult to ask what exactly is not clear, I personally don’t understand everything, how can you make specifics out of this?

2

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.

3 
if (input === 0) {
    return "0";
  }
  
  let binary = "";
  
  while (input > 0) {
    binary = (input % 2) + binary;
    input = Math.floor(input / 2);
  }
  
  return binary;

I decided to download solutions from the Internet, but it also doesn’t work, these steps have become very complicated, is there any point in going further? Or is it better to move on to the next tasks, otherwise nothing has been thought out here

4

Hi Masha, you are overthinking the requirement for this step. The instruction says:

In your decimalToBinary function, convert the number 10 into binary and return it as a string.

I agree the instructions could be more specific. Let me rephrase them:
In your decimalToBinary function, change the return statement below to return the base-10 number 10 as binary as a string.

It is up to you to determine what binary for 10 is.

To the course developers, please change the request to something like 12 so it is not confused with the binary for base-10 2.

1 Like
5

It’s difficult for me to decide anything here, since the instructions are not clear at all.

1 Like
6

If you are copying answers, no there isn’t really a point to doing this project.

It seems like you aren’t particularly good with the English language content. I’d try to find a course in your native language (Russian?)

1 Like
7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.