Binary to Decimal App using Typescript. #beginner2advanced
Tags: beginners, beginner2advanced, typescript, javascript
Published: 2022-06-28 09:49:38

This is the first project in the beginner’s category in the `#beginner2advanced` challenge.

The application requirement can be found [here](https://github.com/florinpop17/app-ideas/blob/master/Projects/1-Beginner/Bin2Dec-App.md).

In this article, we will be creating a web app where users can input numbers up to the length of 8 binary digits (0s and 1s), in any sequence and displays the decimal equivalent of the input number.

**NOTE**: This project is created using HTML, CSS and Typescript.

The end result of the application will look like this:

![binary-to-decimal.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1656380229635/M1D4RKfvd.gif align="left")

## Creating our HTML and CSS file

First, we create an `index.html` and a `style.css` file as below.

```html
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bin Dec</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <div>
      <div id="dec">Example</div>
      <input id="binary-input" type="text" />
      <div id="error"></div>
    </div>
    <script src="main.js"></script>
  </body>
</html>
```

Then we will include this simple stylesheet to style our application.

```css
/* style.css */
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

#binary-input {
  border: 1px solid #000;
  border-radius: 10px;
  height: 35px;
  width: 200px;
  padding: 0 20px;
}

#binary-input:focus {
  outline: 2px solid black;
}

#error {
  text-align: center;
  margin-top: 10px;
  color: red;
}

#dec {
  text-align: center;
  margin-bottom: 10px;
}
```

## The Typescript Code

```tsx
// main.ts
const binInput = <HTMLInputElement>document.getElementById("binary-input");
const errorElem = <HTMLDivElement>document.getElementById("error");
const decElem = <HTMLDivElement>document.getElementById("dec");

// function to convert from binary to decimal
const bin2dec = (number: string) => {
  return parseInt(number, 2);
};

let timeoutMan: NodeJS.Timeout;

// display an error if any and remove the display in 0.5 second
const displayError = (error: string) => {
  errorElem.textContent = error;
  if (timeoutMan) {
    clearTimeout(timeoutMan);
  }
  timeoutMan = setTimeout(() => {
    errorElem.innerText = "";
  }, 1000 * 0.5);
};

const is0or1 = (key: string) => {
  return key === "0" || key === "1";
};

const validateError = (key: string) => {
  if (is0or1(key)) {
    return key;
  } else {
    displayError("input either 0 or 1");
    return "";
  }
};

const displayDecimal = (number: string) => {
  decElem.innerText = `Decimal: ${bin2dec(number)}`;
};

// the state of input coming in our project
let inputText = "";

binInput.addEventListener("keydown", (event) => {
  event.preventDefault();
  if (event.key === "Backspace") {
    inputText = inputText
      .split("")
      .slice(0, inputText.length - 1)
      .join("");

    binInput.value = inputText;
    displayDecimal(inputText);
  } else {
    if (binInput.value.length >= 8) {
      return displayError("cannot be above 8 digits");
    }
    inputText += validateError(event.key);
    binInput.value = inputText;
    displayDecimal(inputText);
  }
});
```

## Conclusion

Thanks for reading.  You can configure your Typescript to compile into any folder structure of your choice and include the generated JavaScript code in your `index.html`.

You can find how I did this in this [repository](https://github.com/zt4ff/app-ideas/blob/main/beginners/binary-to-decimal/tsconfig.json). 

If you enjoy reading this article, you can consider [buying me a coffee](https://www.buymeacoffee.com/kayode).