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

### Tell us what’s happening:

I have tried for hours to get the correct syntax. I’ve looked on MDN and W3 and I still don’t see what my error is. Help appreciated.

``````<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<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>
<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;
}

: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);
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;
}

.number-input {
height: 25px;
}

#result {
margin: 10px 0;
min-width: 200px;
width: fit-content;
min-height: 80px;
word-break: break-word;
border: 5px solid var(--orange);
font-size: 2rem;
text-align: center;
}

#animation-container {
margin: auto;
max-width: 300px;
}

.animation-frame {
margin: 250px auto 0;
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)) || (parseInt(numberInput.value < 0) {

// User Editable Region

console.log(numberInput.value);
};

if (e.key === "Enter") {
checkUserInput();
}
});
``````

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`

### Challenge Information:

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

Edited: It looks like you’ve actually placed the 3rd conditional outside of the closing `)` of the `if` statement. You might just reset the lesson first and try again, playing close attention to where you place the third condition.

You should be passing only `numberInput.value` to parseInt - this function takes a string and returns a number. You also have an extra `(` before parseInt and are missing the closing `}` of the body.

1 Like

### Tell us what’s happening:

I’m still not getting this step right. I am going in circles trying every possible syntax I can think of. I need a hint or something please.

``````<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<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>
<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;
}

: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);
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;
}

.number-input {
height: 25px;
}

#result {
margin: 10px 0;
min-width: 200px;
width: fit-content;
min-height: 80px;
word-break: break-word;
border: 5px solid var(--orange);
font-size: 2rem;
text-align: center;
}

#animation-container {
margin: auto;
max-width: 300px;
}

.animation-frame {
margin: 250px auto 0;
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)) || parseInt(numberInput.value) < 0);

// User Editable Region

console.log(numberInput.value);
};

if (e.key === "Enter") {
checkUserInput();
}
});
``````

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`

### Challenge Information:

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

Please talk to us about how the instructions or error message is confusing.

You should wrap the value returned by `parseInt()` in the `isNaN()` function. And add a third condition which checks the value returned by `parseInt()` to be less than 0.
The line I’m using seems to be doing exactly what the error response is telling me to do. Is there something I’m not seeing?

Where is the third condition?

I didn’t see that I had changed it. Sorry. I’ve made so many changes and reset this exercise so many times, it’s making me crazy. I put the condition back in the line, but I’m still getting the same error message.

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

}
``````

What does this literally say is being converted to an integer?

" And add a third condition which checks the value returned by `parseInt()` to be less than 0."

Ok, don’t copy-paste the instructions at me. Please answer my question. What does your code literally say is being converted to an integer? What is being converted is in between the ( and the )

The results of parseInt( )

No. The result of `parseInt` is what comes out. What are you putting into `parseInt`?

I’m trying to put in the value returned from parseInt(numberInput.value)

Ok, but is that what’s actually inside of the call to `parseInt` here?

No. It actually looks like I’m calling parseInt again.

Why would `parseInt` (parse INTEGER) return a string?