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

### Tell us what’s happening:

I’m not sure how to write this out. I’ve tried putting an object before:
I’ve tried doing:
inputVal = 5,
marginTop = 300,
animationData.length = 1

``````<!-- 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 animationData = [

// User Editable Region

inputVal: 5,
marginTop: 300,
animationData.length: 1

// User Editable Region

];

const decimalToBinary = (input) => {
if (input === 0 || input === 1) {
return String(input);
} else {
return decimalToBinary(Math.floor(input / 2)) + (input % 2);
}
};

const showAnimation = () => {
setTimeout(() => {
console.log("free");
}, 500);
setTimeout(() => {
console.log("Code");
}, 1000);
setTimeout(() => {
console.log("Camp");
}, 1500);
};

const checkUserInput = () => {
const inputInt = parseInt(numberInput.value);

if (!numberInput.value || isNaN(inputInt) || inputInt < 0) {
return;
}

if (inputInt === 5) {
showAnimation();
return;
}

result.textContent = decimalToBinary(inputInt);
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/128.0.0.0 Safari/537.36`

### Challenge Information:

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

Hey you need to wrap the code in curly braces and remove the chaining.

Much improved from your previous post, congratulations.

Are you certain you’re placing an object inside the array correctly?
How are objects typically initialized and represented?

Secondly, where did the animationData.length come from?

excuse-me, what chaining?

I removed .length form the code, I guess this could be . notation

Hi there!

Why you added the above line

I added the “animationData.length = 1” because when i click the submit button it says… “The `animationData` array should have a length of `1` .”

I also added curly brackets and changed it to:
{inputVal = 5
marginTop = 300
you changed too much, remember that objects have `key: value` pairs, you can’t use assignment inside an object
It’s because you didn’t have an object `{}` . You need to add your data within an object.
Edit: also add the data with correct `key: value` pairs and after each pair you need to add a comma