An Interest In:
Web News this Week
- April 2, 2024
- April 1, 2024
- March 31, 2024
- March 30, 2024
- March 29, 2024
- March 28, 2024
- March 27, 2024
Some of Our Sources
- BoingBoing
- Simplebits
- Pearsonified
- Spoon Graphics
- Abduzeedo
- Vandelay Design
- Naldz Graphics
- Specky Boy
- Daily Now
- Dev To
Help Webnuz
Referal links:
Binary to Decimal App using Typescript. beginner2advanced
This is the first project in the beginners 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.tsconst binInput = <HTMLInputElement>document.getElementById("binary-input");const errorElem = <HTMLDivElement>document.getElementById("error");const decElem = <HTMLDivElement>document.getElementById("dec");// function to convert from binary to decimalconst bin2dec = (number: string) => { return parseInt(number, 2);};let timeoutMan: NodeJS.Timeout;// display an error if any and remove the display in 0.5 secondconst 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 projectlet 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.
Original Link: https://dev.to/zt4ff_1/binary-to-decimal-app-using-typescript-beginner2advanced-1nd5
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To