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

I created this paragraph element and I’m asked to assign a style attribute to it using string interpolation. the style attribute value should be

margin-top: \${obj.marginTop}px;

I don’t know what else to do!!

``````<!-- 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 animationContainer = document.getElementById("animation-container");
const animationData = [
{
inputVal: 5,
marginTop: 300,
},
{
inputVal: 2,
marginTop: -200,
},
{
inputVal: 1,
marginTop: -200,
}
];

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

const showAnimation = () => {
result.innerText = "Call Stack Animation";

animationData.forEach((obj) => {
setTimeout(() => {
animationContainer.innerHTML += `

// User Editable Region

<p id="\${obj.inputVal}" style="\${margin-top: \${obj.marginTop}px;}"></p>

// User Editable Region

`;
});
};

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

if (!numberInput.value || isNaN(inputInt)) {
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/121.0.0.0 Safari/537.36`

### Challenge Information:

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

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.

Hi!
You do not need the first \${

1 Like

Hi Daniel,
Thank you so much for your help! But after I take out the first \${}, the code still doesn’t pass.
Here’s what I have now:

``````<p id="\${obj.inputVal}" style="margin-top: \${obj.marginTop}px;}"></p>
``````

And the system says:
Sorry, your code does not pass. Hang in there.

You should use string interpolation to set the value of the `style` attribute to `margin-top: \${obj.marginTop}px;`.

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (`</>`) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

1 Like

It looks like you have an extra curly brace here

remove that and it will pass

1 Like

Thank you so much. It passed!

Well noted. Thanks a lot! I appreciate your assistance

You’re actually very correct. I’ve got it now. Thanks a lot. I appreciate your assistance.

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