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

JavaScript
1

Tell us what’s happening:

I need some input on this step. I cannot seem to figure out what the solution is after trying many solutions to my understanding and thought process.

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 || isNaN(parseInt(numberInput.value)) || numberInput.value < 0) {
                                                                // ^ not sure if I should add the parseInt here of just the value since that is what is being asked to check and if I am using the correct Logical operator for the third condition. I have tried the methods. I believe I am on the right track I think I am just misplacing the order.//
  }

// 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/125.0.0.0 Safari/537.36 Edg/125.0.0.0

Challenge Information:

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

2

what datatype is numberInput.value? remember you need to compare numbers

3

That is something I am confused on, Idk what numbers to compare other than 0. There is no other value other than what a person would input. Unless the example proved with the numbers is what I am supposed to use.

4

You need to compare numbers, is numberInput.value of type number?

5

I get that now, but I do not know what numbers to use other than the ones provided in the example box. Is that what I am supposed to use?

6

The only number you need to compare is 0.

@ILM is trying to hint at the answer to your own question that you wrote in your comment in the code:

// ^ not sure if I should add the parseInt here

if numberInput.value isn’t of type Number, then you probably want to apply the parseInt function, since you’re trying to compare numbers.

7

Okay, this is what I have tried.

if (!numberInput.value || isNaN(parseInt(numberInput.value)) || parseInt(-1 < 0)) {

}

if (!numberInput.value || isNaN(parseInt(numberInput.value)) || parseInt("0 "< 0)) {

}

if (!numberInput.value || isNaN(parseInt(numberInput.value)) || parseInt(“numberInput.value” < 0)) {

}

I feel like I am getting closer but I’m just not getting it for some reason. I have a feeling its the third condition. I am placing it incorrectly. I know it will not work outside the parenthesis or inside the last closing parenthesis. I’m still trying to figure it out myself but man this is pretty complicated lol.

8

Let me try to break it down. The first two conditions look good, so let’s focus on the third. Remember what you’re trying to do with that third condition: you want to check if the number that the user has entered into the input is less than 0.

numberInput is the input element the user will interact with.
numberInput.value is the actual number the user entered into that element. It will be a string data type. You want a number.
parseInt() is a function that converts a string representation of a number into an actual number data type. You need to pass that string in as the argument, like so parseInt(string).
Once you have done that, you can compare that expression to 0 with the > or < operator.

This is close, but there are two main problems:

  • You’re using the string “number input.value” when you want to access the property itself. The problem is your use of quotation marks.
  • You’re passing the comparison < in as a part of the argument to parseInt. You want to do the comparison after you have gotten the returned value back from parseInt.
4 Likes
9

Okay good I am on the right track. I appreciate the breakdown sometimes that is what I need from someone who is more experienced than me in something to help me understand it better. I believe I know what to do now thank you.

10

Thank you for breaking this down so well.

1 Like
11

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