DEV Community

Cover image for Binary to Decimal App using Typescript. #beginner2advanced
Kayode
Kayode

Posted on • Originally published at blog.zt4ff.dev

Binary to Decimal App using Typescript. #beginner2advanced

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

The application requirement can be found here.

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

Creating our HTML and CSS file

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

<!-- 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>
Enter fullscreen mode Exit fullscreen mode

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

/* 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;
}
Enter fullscreen mode Exit fullscreen mode

The Typescript Code

// 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);
  }
});
Enter fullscreen mode Exit fullscreen mode

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.

If you enjoy reading this article, you can consider buying me a coffee.

Discussion (0)