---
id: 63db7f4677d06d7500a13321
title: Step 1
challengeType: 0
dashedName: step-1
demoType: onLoad
---

# --description--

In this workshop, you'll build a decimal and binary converter and practice both number systems. You'll also use recursion to perform the conversions.

All of the HTML and CSS for this project has been provided for you.

When you're ready to get started, use the `.getElementById()` method to get the `input` element with the id `"number-input"`, and store it in a variable called `numberInput`. Use the same method to get the `button` element with the id `"convert-btn"` and store it in a variable called `convertBtn`, and the `output` element with the id `"result"` and store it in a variable called `result`.


**NOTE**: This project will only convert positive numbers into binary.

# --hints--

You should use the `document.getElementById()` method to get the `#number-input` element.

```js
assert.match(code, /document\.getElementById\(\s*('|"|`)number-input\1\s*\)/);
```

You should use `const` to declare a variable called `numberInput` and assign it the `#number-input` element. 

```js
assert.match(code, /const\s+numberInput\s*=\s*document\.getElementById\(\s*('|"|`)number-input\1\s*\)/);
```

You should use the `document.getElementById()` method to get the `#convert-btn` element.

```js
assert.match(code, /document\.getElementById\(\s*('|"|`)convert-btn\1\s*\)/);
```

You should use `const` to declare a variable called `convertBtn` and assign it the `#convert-btn` element. 

```js
assert.match(code, /const\s+convertBtn\s*=\s*document\.getElementById\(\s*('|"|`)convert-btn\1\s*\)/);
```

You should use the `document.getElementById()` method to get the `#result` element.

```js
assert.match(code, /document\.getElementById\(\s*('|"|`)result\1\s*\)/);
```

You should use `const` to declare a variable called `result` and assign it the `#result` element. 

```js
assert.match(code, /const\s+result\s*=\s*document\.getElementById\(\s*('|"|`)result\1\s*\)/);
```

# --seed--

## --seed-contents--

```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 <br />
      Converter
    </h1>
    <section 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>
    </section>
    <section class="output-container">
      <output id="result" for="number-input"></output>
      <h2>Call stack</h2>
      <div id="animation-container"></div>
    </section>
    <script src="script.js"></script>
  </body>
</html>
```

```css
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --light-grey: #f5f6f7;
  --dark-blue: #1b1b32;
  --orange: #f1be32;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
    monospace;
  font-size: 1.125rem;
  color: var(--light-grey);
  background-color: var(--dark-blue);
  padding: 0 4px;
}

h1 {
  font-size: 2.125rem;
  text-align: center;
  margin: 20px 0;
}

h2 {
  font-size: 1.5rem;
  text-align: center;
  margin: 20px 0;
}

.input-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
  align-items: center;
  width: clamp(320px, 50vw, 460px);
  margin: 10px auto;
}

.input-container label {
  white-space: nowrap;
  word-spacing: -6px;
}

.convert-btn {
  font-size: inherit;
  font-family: inherit;
  background-color: var(--orange);
  width: 100%;
  height: 2rem;
  padding: 0 6px;
  border: none;
  border-radius: 2px;
  cursor: pointer;
}

.number-input {
  font-size: inherit;
  padding: 0.3rem;
  width: 100%;
}

.output-container {
  margin-inline: auto;
  width: clamp(320px, 50vw, 460px);
}

#result {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  text-align: center;
  min-height: 80px;
  margin-block-start: 20px;
  padding: 15px;
  border: 2px solid var(--orange);
  border-radius: 2px;
}

#animation-container {
  display: flex;
  flex-direction: column-reverse;
  justify-content: end;
  gap: 1rem;
  margin-block-end: 1rem;
  min-height: 40vh;
  border: 2px dashed var(--orange);
  padding: 1rem;
}

.animation-frame {
  font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
    helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
    sans-serif;
  padding: 15px 10px;
  border: 5px solid var(--orange);
  font-size: 1.2rem;
  text-align: center;
}

@media screen and (min-width: 36em) {
  body {
    font-size: 1rem;
  }

  .input-container {
    flex-direction: row;
    width: unset;
  }

  .number-input {
    width: unset;
  }
}
```

```js
--fcc-editable-region--

--fcc-editable-region--
```
