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)