https://github.com/epranka/dec2bin
Simple Dec2Bin converter created in CRA which helps to convert the number from decimal to binary
https://github.com/epranka/dec2bin
binary converter cra create-react-app css dec2bin decimal decimal-to-binary javascript react tool tutorial webdesign website
Last synced: 3 months ago
JSON representation
Simple Dec2Bin converter created in CRA which helps to convert the number from decimal to binary
- Host: GitHub
- URL: https://github.com/epranka/dec2bin
- Owner: epranka
- Created: 2020-02-23T12:02:30.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-05T08:04:38.000Z (over 3 years ago)
- Last Synced: 2025-01-25T06:11:31.263Z (about 1 year ago)
- Topics: binary, converter, cra, create-react-app, css, dec2bin, decimal, decimal-to-binary, javascript, react, tool, tutorial, webdesign, website
- Language: JavaScript
- Homepage: https://dec2bin.now.sh
- Size: 4.37 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 23
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Dec2Bin
Decimal to binary converter
The live converter you can find by pressing the following link [dec2bin.now.sh](https://dec2bin.now.sh).
It's created using the React Create App (CRA) boilerplate.
The inverted version of the converter **(bin2dec)** you can find there [bin2dec.now.sh](https://bin2dec.now.sh).
### The main _App_ component
```jsx
import React, { useEffect, useState } from "react";
import "./App.css";
function App() {
const [decimalIsValid, setDecimalIsValid] = useState(true);
const [binaryValue, setBinaryValue] = useState("");
const [decimalValue, setDecimalValue] = useState("");
const formatValue = value => {
return value.replace(/\s+/g, "");
};
const handleDecimalValueChange = e => {
let value = String(e.target.value);
if (!value) {
setDecimalValue("");
setDecimalIsValid(true);
} else {
setDecimalIsValid(/^([0-9]+)$/.test(value));
setDecimalValue(formatValue(value));
}
};
const calculateBinary = decimalNumber => {
return decimalNumber
.toString(2)
.replace(/(\d{4})/g, "$1 ")
.trim();
};
useEffect(() => {
if (decimalIsValid && decimalValue) {
const decimalNumber = parseInt(decimalValue.replace(/[^0-9]/g, ""));
const binaryValue = calculateBinary(decimalNumber);
setBinaryValue(binaryValue);
} else {
setBinaryValue("");
}
}, [decimalValue, decimalIsValid]);
return (
Dec2Bin
{binaryValue}
);
}
export default App;
```
### The main _App_ styles
```css
#dec2bin {
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;
}
#decimal {
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;
}
#decimal.invalid {
color: #943838;
}
#binary {
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;
}
```