├── src
    ├── img
    │   └── bg.jpg
    ├── index.js
    ├── index.css
    ├── components
    │   ├── Display.js
    │   └── Input.js
    ├── App.css
    └── App.js
├── public
    ├── favicon.ico
    ├── robots.txt
    ├── manifest.json
    └── index.html
├── .gitignore
├── package.json
└── README.md


/src/img/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/geoffctn/Bin2Dec/HEAD/src/img/bg.jpg


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/geoffctn/Bin2Dec/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 |   "short_name": "Bin2Dec",
3 |   "name": "Bin2Dec",
4 |   "start_url": ".",
5 |   "display": "standalone",
6 |   "theme_color": "#000000",
7 |   "background_color": "#ffffff"
8 | }


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import ReactDOM from 'react-dom'
 3 | import './index.css'
 4 | import App from './App'
 5 | 
 6 | ReactDOM.render(
 7 |   <React.StrictMode>
 8 |     <App />
 9 |   </React.StrictMode>,
10 |   document.getElementById('root')
11 | )
12 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |   box-sizing: border-box;
 3 | }
 4 | 
 5 | body {
 6 |   margin: 0;
 7 |   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
 8 |     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
 9 |     sans-serif;
10 |   -webkit-font-smoothing: antialiased;
11 |   -moz-osx-font-smoothing: grayscale;
12 | }
13 | 
14 | code {
15 |   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
16 |     monospace;
17 | }


--------------------------------------------------------------------------------
/src/components/Display.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | const Display = ({ inputBin, decNum }) => {
 4 |   return (
 5 |     <div className="display">
 6 |       {!inputBin.binary ? (
 7 |         <p className="info">
 8 |           <span role="img" aria-label="Shrug">
 9 |             🤷
10 |           </span>
11 |           Waiting for a valid binary number...
12 |         </p>
13 |       ) : (
14 |         <p>{decNum}</p>
15 |       )}
16 |     </div>
17 |   )
18 | }
19 | 
20 | export default Display
21 | 


--------------------------------------------------------------------------------
/src/components/Input.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import PropTypes from 'prop-types'
 3 | 
 4 | const Input = ({ inputBin, handleBinaryInput }) => {
 5 |   return (
 6 |     <div className="input">
 7 |       <input
 8 |         name="binarynum"
 9 |         type="text"
10 |         minLength="1"
11 |         maxLength="20"
12 |         value={inputBin.value}
13 |         onChange={(e) => handleBinaryInput(e)}
14 |         autoFocus
15 |       />
16 |     </div>
17 |   )
18 | }
19 | 
20 | Input.propTypes = {
21 |   value: PropTypes.number,
22 | }
23 | 
24 | export default Input
25 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="utf-8" />
 6 |   <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 7 |   <meta name="viewport" content="width=device-width, initial-scale=1" />
 8 |   <meta name="theme-color" content="#000000" />
 9 |   <meta name="description" content="A simple React Binary to Decimal converter." />
10 |   <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
11 |   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap" rel="stylesheet">
12 |   <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@700&display=swap" rel="stylesheet">
13 |   <title>Bin2Dec</title>
14 | </head>
15 | 
16 | <body>
17 |   <noscript>You need to enable JavaScript to run this app.</noscript>
18 |   <div id="root"></div>
19 | </body>
20 | 
21 | </html>


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "bin2dec",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@testing-library/jest-dom": "^4.2.4",
 7 |     "@testing-library/react": "^9.3.2",
 8 |     "@testing-library/user-event": "^7.1.2",
 9 |     "react": "^16.13.1",
10 |     "react-dom": "^16.13.1",
11 |     "react-scripts": "3.4.1"
12 |   },
13 |   "scripts": {
14 |     "start": "react-scripts start",
15 |     "build": "react-scripts build",
16 |     "test": "react-scripts test",
17 |     "eject": "react-scripts eject"
18 |   },
19 |   "eslintConfig": {
20 |     "extends": "react-app"
21 |   },
22 |   "browserslist": {
23 |     "production": [
24 |       ">0.2%",
25 |       "not dead",
26 |       "not op_mini all"
27 |     ],
28 |     "development": [
29 |       "last 1 chrome version",
30 |       "last 1 firefox version",
31 |       "last 1 safari version"
32 |     ]
33 |   }
34 | }
35 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Bin2Dec
 2 | 
 3 | Check the [demo here](https://bin2dec-geoffctn.netlify.com/)
 4 | 
 5 | App made for the challenge [App Ideas](https://github.com/florinpop17/app-ideas)
 6 | 
 7 | **Tier:** 1-Beginner
 8 | 
 9 | Binary is the number system all digital computers are based on.
10 | Therefore it's important for developers to understand binary, or base 2,
11 | mathematics. The purpose of Bin2Dec is to provide practice and
12 | understanding of how binary calculations.
13 | 
14 | Bin2Dec allows the user to enter strings of up to 8 binary digits, 0's
15 | and 1's, in any sequence and then displays its decimal equivalent.
16 | 
17 | This challenge requires that the developer implementing it follow these
18 | constraints:
19 | 
20 | - Arrays may not be used to contain the binary digits entered by the user
21 | - Determining the decimal equivalent of a particular binary digit in the
22 |   sequence must be calculated using a single mathematical function, for
23 |   example the natural logarithm. It's up to you to figure out which function
24 |   to use.
25 | 
26 | ## User Stories
27 | 
28 | - [x] User can enter up to 8 binary digits in one input field
29 | - [x] User must be notified if anything other than a 0 or 1 was entered
30 | - [x] User views the results in a single output field containing the decimal (base 10) equivalent of the binary number that was entered
31 | 
32 | ## Bonus features
33 | 
34 | - [x] User can enter a variable number of binary digits
35 | 


--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
 1 | .App {
 2 |   display: flex;
 3 |   flex-direction: column;
 4 |   flex-wrap: wrap;
 5 |   justify-content: center;
 6 |   align-items: center;
 7 |   height: 100vh;
 8 |   text-align: center;
 9 |   font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
10 |   font-size: 1rem;
11 |   line-height: 1.5rem;
12 |   background: linear-gradient(45deg, rgba(0, 0, 0, 0.98), rgba(0, 0, 0, 0.96)),
13 |     url(./img/bg.jpg) no-repeat center fixed;
14 |   color: #fff;
15 | }
16 | 
17 | .App p {
18 |   margin: 1.5rem 0;
19 | }
20 | 
21 | .App p a {
22 |   text-decoration: none;
23 |   background-color: rgba(39, 174, 96, 0.2);
24 |   transition: 200ms;
25 | }
26 | 
27 | .App p a:hover,
28 | .App p a:active,
29 | .App p a:focus {
30 |   background-color: rgba(39, 174, 96, 0.5);
31 |   transition: 200ms;
32 | }
33 | 
34 | .App .attenuated {
35 |   display: inline-block;
36 |   font-family: 'Roboto Mono', 'Consolas', monospace;
37 |   font-size: 3rem;
38 |   opacity: 0.05;
39 | }
40 | 
41 | h1 {
42 |   display: inline-block;
43 |   margin: 0;
44 |   padding: 0;
45 |   font-family: 'Roboto Mono', 'Consolas', monospace;
46 |   font-size: 3rem;
47 | }
48 | 
49 | a {
50 |   color: #fff;
51 | }
52 | 
53 | .input {
54 |   width: 100%;
55 | }
56 | 
57 | .input input {
58 |   max-width: 80%;
59 |   padding: 0.75rem 1rem;
60 |   font-family: 'Roboto Mono', 'Consolas', monospace;
61 |   font-size: 2rem;
62 |   color: #fff;
63 |   background: none;
64 |   border: 1px solid #fff;
65 |   outline: 0;
66 | }
67 | 
68 | .display p {
69 |   margin: 2rem 0;
70 |   font-size: 2.5rem;
71 |   font-weight: bold;
72 | }
73 | 
74 | .display p.info {
75 |   font-size: 0.85rem;
76 |   color: #999999;
77 | }
78 | 
79 | footer {
80 |   position: absolute;
81 |   bottom: 1rem;
82 |   font-size: .85rem;
83 |   color: #333;
84 | }
85 | 
86 | /* MEDIA QUERIES */
87 | @media only screen and (max-width: 620px) {
88 |   .App .attenuated {
89 |     font-size: 1.75rem;
90 |   }
91 | 
92 |   h1 {
93 |     font-size: 1.75rem;
94 |   }
95 | }


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
  1 | import React, { useState, useEffect } from 'react'
  2 | import Display from './components/Display'
  3 | import Input from './components/Input'
  4 | 
  5 | import './App.css'
  6 | 
  7 | function App() {
  8 |   const [inputBin, setInputBin] = useState({
  9 |     value: '',
 10 |     binary: false,
 11 |   })
 12 |   const [decNum, setDecNum] = useState()
 13 | 
 14 |   useEffect(() => {
 15 |     if (inputBin.value.length > 0 && inputBin.binary) {
 16 |       setDecNum(convertToDec(inputBin.value))
 17 |     } else if (inputBin.value.length === 0) {
 18 |       setDecNum('')
 19 |     }
 20 |   }, [inputBin])
 21 | 
 22 |   const regExpNotBin = /[^01]/
 23 | 
 24 |   const handleBinaryInput = (e) => {
 25 |     const { value } = e.target
 26 |     setInputBin({ value, binary: !regExpNotBin.test(value) })
 27 |   }
 28 | 
 29 |   const convertToDec = (num) => {
 30 |     let convertedNum = 0
 31 |     num
 32 |       .split('')
 33 |       .reverse()
 34 |       .map((item, index) => {
 35 |         return item === '1' && (convertedNum += Math.pow(2, index))
 36 |       })
 37 |     return convertedNum
 38 |   }
 39 | 
 40 |   const Alert = () => {
 41 |     if (inputBin.value.length > 0) {
 42 |       if (!inputBin.binary) {
 43 |         return (
 44 |           <span style={{ color: '#e74c3c', fontWeight: 'bold' }}>
 45 |             You entered a non-binary digit (please enter only 0 or 1).
 46 |           </span>
 47 |         )
 48 |       } else if (inputBin.binary) {
 49 |         return (
 50 |           <span style={{ color: '#27ae60', fontWeight: 'bold' }}>
 51 |             Here is your decimal!
 52 |           </span>
 53 |         )
 54 |       } else {
 55 |         return ' '
 56 |       }
 57 |     }
 58 |     return null
 59 |   }
 60 | 
 61 |   return (
 62 |     <div className="App">
 63 |       <div>
 64 |         <span className="attenuated">000</span>
 65 |         <h1>Bin2Dec</h1>
 66 |         <span className="attenuated">000</span>
 67 |       </div>
 68 |       <p>
 69 |         Enter a{' '}
 70 |         <a
 71 |           href="https://en.wikipedia.org/wiki/Binary_number"
 72 |           target="_blank"
 73 |           rel="noopener noreferrer"
 74 |         >
 75 |           binary number
 76 |         </a>
 77 |         , get a{' '}
 78 |         <a
 79 |           href="https://en.wikipedia.org/wiki/Decimal"
 80 |           target="_blank"
 81 |           rel="noopener noreferrer"
 82 |         >
 83 |           decimal
 84 |         </a>{' '}
 85 |         conversion.
 86 |         <br />
 87 |         <Alert />
 88 |       </p>
 89 |       <Input inputBin={inputBin} handleBinaryInput={handleBinaryInput} />
 90 |       <Display inputBin={inputBin} decNum={decNum} />
 91 |       <footer>
 92 |         Made by{' '}
 93 |         <a
 94 |           href="https://www.geoffreycouten.fr/"
 95 |           target="_blank"
 96 |           rel="noopener noreferrer"
 97 |         >
 98 |           Geoffrey Couten
 99 |         </a>
100 |         <br />
101 |         Background Photo by Alexander Sinn
102 |       </footer>
103 |     </div>
104 |   )
105 | }
106 | 
107 | export default App
108 | 


--------------------------------------------------------------------------------