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:
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>
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;
}
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);
}
});
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.
Top comments (0)