lucasvbr/bin2dec
1
0
Fork 0
mirror of https://github.com/LucasVbr/bin2dec.git synced 2026-05-13 17:12:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #4 from LucasVbr/dev

Browse Source 
Dev
This commit is contained in:
Lucàs
2022-08-29 20:38:25 +02:00
committed by GitHub
parent 3f8da8b493 205611c2dc
commit afb0c7ee1e
18 changed files with 79 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.idea/inspectionProfiles/Project_Default.xml
Generated
-6
View File
@@ -1,6 +0,0 @@
<component name="InspectionProjectProfileManager">
<profile version="1.0">
<option name="myName" value="Project Default" />
<inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
</profile>
</component>
.idea/jsLinters/eslint.xml
Generated
-6
View File
@@ -1,6 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="EslintConfiguration">
<option name="fix-on-save" value="true" />
</component>
</project>
README.md
+43 -1
View File
@@ -6,7 +6,45 @@
</a> </a>
</p> </p>
> Web App that convert binary values into decimal. > A React Web App that convert binary values into decimal.
### 🏠 [Homepage](https://bin2dec-lucasvbr.vercel.app/)
<kbd>
<img src="preview.png" alt="preview picture"/>
</kbd>
## Description
Binary is the number system all digital computers are based on.
Therefore, it's important for developers to understand binary, or base 2,
mathematics. The purpose of Bin2Dec is to provide practice and
understanding of how binary calculations.
Bin2Dec allows the user to enter strings of up to 8 binary digits, 0's
and 1's, in any sequence and then displays its decimal equivalent.
This challenge requires that the developer implementing it follow these
constraints:
- Arrays may not be used to contain the binary digits entered by the user
- Determining the decimal equivalent of a particular binary digit in the
sequence must be calculated using a single mathematical function, for
example the natural logarithm. It's up to you to figure out which function
to use.
#### User Stories
- [X] User can enter up to 8 binary digits in one input field
- [ ] User must be notified if anything other than a 0 or 1 was entered
- [X] User views the results in a single output field containing the decimal (
base 10) equivalent of the binary number that was entered
#### Bonus features
- [X] User can enter a variable number of binary digits
<div align="right">From <a href="https://github.com/florinpop17/app-ideas">app-ideas</a>/<a href="https://github.com/florinpop17/app-ideas/blob/master/Projects/1-Beginner/Bin2Dec-App.md">Bin2Dec-App</a> </div>
## Author ## Author
@@ -19,6 +57,10 @@
Give a ⭐️ if this project helped you! Give a ⭐️ if this project helped you!
## 📊 Project Stats
![Alt](https://repobeats.axiom.co/api/embed/4ab92d78f05d08af5b5995b886eb2ca7803cbc7f.svg "Repobeats analytics image")
## 📝 License ## 📝 License
Copyright © 2022 [LucasVbr](https://github.com/LucasVbr).<br /> Copyright © 2022 [LucasVbr](https://github.com/LucasVbr).<br />
bin2dec
Submodule
+1
Submodule bin2dec added at 3fdebb67cf
preview.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 889 KiB

public/android-chrome-192x192.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.4 KiB

public/android-chrome-512x512.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

public/apple-touch-icon.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.7 KiB

public/favicon-16x16.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 602 B

public/favicon-32x32.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

public/favicon.ico
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.8 KiB

After

Width:  |  Height:  |  Size: 15 KiB

public/index.html
+2 -2
View File
@@ -9,7 +9,7 @@
name="description" name="description"
content="Web site created using create-react-app" content="Web site created using create-react-app"
/> />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> <link rel="apple-touch-icon" href="%PUBLIC_URL%/apple-touch-icon.png" />
<!-- <!--
manifest.json provides metadata used when your web app is installed on a manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/ user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
@@ -24,7 +24,7 @@
work correctly both with client-side routing and a non-root public URL. work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`. Learn how to configure a non-root public URL by running `npm run build`.
--> -->
<title>React App</title> <title>Bin 2 Dec</title>
</head> </head>
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>
public/logo192.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 5.2 KiB

public/logo512.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 9.4 KiB

public/manifest.json
+12 -18
View File
@@ -1,25 +1,19 @@
{ {
"short_name": "React App", "name": "Binary to Decimal",
"name": "Create React App Sample", "short_name": "Bin2Dec",
"icons": [ "icons": [
{ {
"src": "favicon.ico", "src": "/android-chrome-192x192.png",
"sizes": "64x64 32x32 24x24 16x16", "sizes": "192x192",
"type": "image/x-icon" "type": "image/png"
}, },
{ {
"src": "logo192.png", "src": "/android-chrome-512x512.png",
"type": "image/png", "sizes": "512x512",
"sizes": "192x192" "type": "image/png"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
} }
], ],
"start_url": ".", "theme_color": "#ffffff",
"display": "standalone", "background_color": "#ffffff",
"theme_color": "#000000", "display": "standalone"
"background_color": "#ffffff" }
}
src/assets/logo.svg
-1
View File
@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 2.6 KiB

src/components/Content.tsx
+20 -6
View File
@@ -1,6 +1,6 @@
import React, {useState} from 'react'; import React, {useState} from 'react';
import {Flex, Input, Text} from '@chakra-ui/react'; import {Flex, Input} from '@chakra-ui/react';
import {ArrowDownIcon} from '@chakra-ui/icons'; import {ArrowDownIcon, ArrowForwardIcon} from '@chakra-ui/icons';
export default function Content() { export default function Content() {
// States // States
@@ -33,10 +33,24 @@ export default function Content() {
// Render // Render
return ( return (
<Flex align={'center'} flexDirection={'column'} marginX={10}> <Flex align={'center'} flexDirection={{
<Input variant="filled" placeholder={"Binary"} value={input} onChange={handleInput}/> base: 'column',
<ArrowDownIcon marginY={5} boxSize={8} rounded={'rounded'}/> md: 'row',
<Text fontSize={'2xl'} align={'center'}>{output}</Text> }} marginX={{
base: 10,
md: 'auto',
}}>
<Input type={'number'} width={'8em'} variant="filled"
placeholder={'Binary'} value={input} onChange={handleInput}/>
<ArrowDownIcon marginY={5} boxSize={8} display={{md: 'none'}}/>
<ArrowForwardIcon marginX={5} boxSize={8} display={{
base: 'none',
md: 'block'
}}/>
<Input type={'number'} width={'8em'} variant={'filled'} value={output}
placeholder={"Decimal"}/>
</Flex> </Flex>
); );
} }
src/components/Footer.tsx
+1 -1
View File
@@ -5,7 +5,7 @@ export default function Footer() {
<Box m={4}> <Box m={4}>
<Divider/> <Divider/>
<Text align={'center'} marginTop={4}> <Text align={'center'} marginTop={4}>
<Link>See code on GitHub</Link> <Link href={"https://github.com/LucasVbr/bin2dec"} target={'_blank'}>See code on GitHub</Link>
</Text> </Text>
</Box> </Box>
); );