https://github.com/epranka/bin2dec
Simple Bin2Dec converter created in CRA which helps to convert the number from binary to decimal
https://github.com/epranka/bin2dec
bin2dec binary binary-to-decimal converter cra create-react-app css decimal javascript react tool tutorial webdesign website
Last synced: 11 months ago
JSON representation
Simple Bin2Dec converter created in CRA which helps to convert the number from binary to decimal
- Host: GitHub
- URL: https://github.com/epranka/bin2dec
- Owner: epranka
- Created: 2020-02-22T18:44:57.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-05T08:01:25.000Z (about 3 years ago)
- Last Synced: 2025-01-25T06:11:31.141Z (about 1 year ago)
- Topics: bin2dec, binary, binary-to-decimal, converter, cra, create-react-app, css, decimal, javascript, react, tool, tutorial, webdesign, website
- Language: JavaScript
- Homepage: https://bin2dec.now.sh
- Size: 4.41 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 23
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Bin2Dec
Binary to decimal converter
The live converter you can find by pressing the following link [bin2dec.now.sh](https://bin2dec.now.sh).
It's created using the React Create App (CRA) boilerplate.
The idea to make bin2dec converter came from the Florin Pop app ideas [repository](https://github.com/florinpop17/app-ideas).
The inverted version of the converter **(dec2bin)** you can find there [dec2bin.now.sh](https://dec2bin.now.sh).
### The main _App_ component
```jsx
import React, { useEffect, useState } from "react";
import "./App.css";
function App() {
const [binaryIsValid, setBinaryIsValid] = useState(true);
const [binaryValue, setBinaryValue] = useState("");
const [decimalValue, setDecimalValue] = useState("");
const formatValue = value => {
return value
.replace(/(\d{4})/g, "$1 ")
.replace(/\s+/g, " ")
.replace(/^\s+|\s+$/g, "");
};
const handleBinaryValueChange = e => {
let value = String(e.target.value);
if (!value) {
setBinaryValue("");
setBinaryIsValid(true);
} else {
setBinaryIsValid(/^([01\s]+)$/.test(value));
setBinaryValue(formatValue(value));
}
};
const calculateDecimal = binaryString => {
let decimalResult = 0;
for (
let i = 0, j = binaryString.length - 1;
i < binaryString.length;
i++, j--
) {
const digit = parseInt(binaryString[i]);
decimalResult += digit * Math.pow(2, j);
}
return decimalResult;
};
useEffect(() => {
if (binaryIsValid && binaryValue) {
const decimalValue = calculateDecimal(binaryValue.replace(/\s+/g, ""));
setDecimalValue(decimalValue);
} else {
setDecimalValue("");
}
}, [binaryValue, binaryIsValid]);
return (
Bin2Dec
{decimalValue}
);
}
export default App;
```
### The main _App_ styles
```css
#bin2dec {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#header {
font-size: 42px;
}
#binary {
width: 100%;
display: block;
max-width: 350px;
margin: 0 20px;
font-size: 42px;
text-align: center;
background: transparent;
color: white;
border: 0;
outline: 0;
border-bottom: 1px solid white;
margin-bottom: 30px;
}
#binary.invalid {
color: #943838;
}
#decimal {
font-size: 64px;
height: 100px;
}
```
### The global styles
```css
body {
margin: 0;
font-family: "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
"Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
monospace;
}
body,
html {
margin: 0;
padding: 0;
background: #222222;
color: white;
}
```