# The explanation of this step is so confusing - Step 19

### Tell us what’s happening:

https://www.mathsisfun.com/binary-number-system.html
or this:

or any other articles or even yours if there is any, just for further reference if someone couldn’t understand the explanation of this step, because your explanation in this step is so confusing and doesn’t add up to student’s knowledge at all, specially if that student’s native language is not English, I mean for example, when I first tried to read this step, I was confused what the hell ones and twos and fours are meant here, are they first, second and forth or are they just 1, 2, 4? but after searching and reading more articles about binary, I figured out what are ones, twos, fours, eights …
Those links don’t explain anything new, or don’t use terminologies other than yours, but just explaining it by comparing it with decimal and by pictures step by step. I understand it’s not possible to put all those wall of text in a step, but you could just give some references for further reading if someone couldn’t yet understand.
Thanks, BTW the curriculum is amazing.

<!-- 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 decimalToBinary = (input) => {

// User Editable Region

return "1";

// User Editable Region

};

const checkUserInput = () => {
if (
!numberInput.value ||
isNaN(parseInt(numberInput.value)) ||
parseInt(numberInput.value) < 0
) {
return;
}

decimalToBinary(parseInt(numberInput.value));
numberInput.value = "";
};

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