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

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

// User Editable Region

  if (!numberInput.value || parseInt(numberInput.value)) {
if(isNaN(parseInt(numberInput.value))){

}
  }

// User Editable Region


  console.log(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 12

if (!numberInput.value || parseInt(numberInput.value)) {
if(isNaN(parseInt(numberInput.value))){

}
  }

this doesn’t work, there’s nothing clear here either, if parseInt() returns only a number, then why check it with isNaN()

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

Now from the very beginning it is not clear how to write down what to check and why it is not clear, but if there was a rating to see the understanding of this task, everything would be easier, rather than sitting for hours and waiting for someone to do it. answer the student’s question

4

I’m using several solutions, but none of them work. Why are there no examples on such complex topics?

5

Update the second condition in your if statement to use the isNaN() function to check if the value returned by parseInt() is NaN.

You did not update the second condition in this if statement. You added a brand new if statement, but that’s not what the instructions asked for.

I’m still not sure what this ‘rating’ you are talking about is?

It helps if you show and talk about what you tried

6

for example, there is a rating of any thing from 1 to 10, that is, each problem showed how well the student understood it.

7

How would such a rating be assigned? If the student is picking the number, that’s not really easy to use that number on improving the curriculum. It’s just a different way to complain with less context?

8

This should look like the level of understanding of the instructions and then the student’s performance of this task, where the student gives an assessment of understanding, if the assessment is bad, then you need to talk to this student and explain, for example, A student cannot immediately give a bad assessment without creating and asking a question, What exactly does he not understand?

9

This sounds like what we currently use the forum for by asking people to talk to us about how they are stuck.

We look at which Steps generate a lot of questions and what specifically people talk about being confusing on those Steps.

10

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