├── .gitignore
├── .babelrc
├── src
    ├── components
    │   ├── CalculatorDisplay.jsx
    │   └── CalculatorKeys.jsx
    ├── Calculator.jsx
    └── styl
    │   └── style.styl
├── eslintrc.js
├── package.json
├── webpack.config.js
├── README.md
├── LICENSE.md
└── CONTRIBUTING.md


/.gitignore:
--------------------------------------------------------------------------------
1 | npm-debug.log
2 | node_modules
3 | 


--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": [
3 |     "es2015",
4 |     "react"
5 |   ]
6 | }
7 | 


--------------------------------------------------------------------------------
/src/components/CalculatorDisplay.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | class CalculatorDisplay extends React.Component {
 4 | 	render() {
 5 | 		return (
 6 | 			<div className='calculator-display'>
 7 | 				<h1 className='value'>2500</h1>
 8 | 				<div className='expressions'>1000 + 1000 + 500</div>
 9 | 			</div>
10 | 		);
11 | 	}
12 | };
13 | 
14 | export default CalculatorDisplay;


--------------------------------------------------------------------------------
/eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   "rules": {
 3 |     "indent": [
 4 |       2,
 5 |       2
 6 |     ],
 7 |     "quotes": [
 8 |       2,
 9 |       "single"
10 |     ],
11 |     "linebreak-style": [
12 |       2,
13 |       "unix"
14 |     ],
15 |     "semi": [
16 |       2,
17 |       "always"
18 |     ]
19 |   },
20 |   "ecmaFeatures": {
21 |     "modules": true
22 |   },
23 |   "env": {
24 |     "es6": true,
25 |     "browser": true
26 |   },
27 |   "extends": "eslint:recommended"
28 | };
29 | 


--------------------------------------------------------------------------------
/src/Calculator.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import css from './styl/style.styl';
 4 | 
 5 | /* Import Components */
 6 | import CalculatorDisplay from './components/CalculatorDisplay';
 7 | import CalculatorKeys from './components/CalculatorKeys';
 8 | 
 9 | export default class Calculator extends React.Component {
10 | 	render() {
11 | 		return (
12 | 			<div>
13 | 				<CalculatorDisplay/>
14 | 				<CalculatorKeys/>
15 | 			</div>
16 | 		);
17 | 	}
18 | }
19 | 
20 | ReactDOM.render(<Calculator/>, document.querySelector('#calculator'));


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "calculator",
 3 |   "version": "0.0.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "build": "webpack",
 7 |     "start": "webpack-dev-server --content-base build"
 8 |   },
 9 |   "dependencies": {
10 |     "react": "^0.14.6",
11 |     "react-dom": "^0.14.6"
12 |   },
13 |   "devDependencies": {
14 |     "babel-core": "^6.4.5",
15 |     "babel-loader": "^6.2.1",
16 |     "babel-preset-es2015": "^6.3.13",
17 |     "babel-preset-react": "^6.3.13",
18 |     "css-loader": "^0.23.1",
19 |     "eslint-plugin-react": "^3.16.1",
20 |     "http-server": "^0.8.5",
21 |     "jsx-loader": "^0.13.2",
22 |     "style-loader": "^0.13.0",
23 |     "stylus-loader": "^1.5.1",
24 |     "webpack": "^1.12.12",
25 |     "webpack-dev-server": "^1.14.1"
26 |   }
27 | }
28 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | var webpack = require('webpack')
 2 |     , path = require('path');
 3 | 
 4 | module.exports = {
 5 |   context : path.join(__dirname, './'),
 6 |   entry: './src/Calculator.jsx',
 7 |   output: {
 8 |     path: path.join(__dirname, 'public'),
 9 |     filename: 'bundle.min.js'
10 |   },
11 |   plugins: [
12 |     new webpack.optimize.UglifyJsPlugin({minimize: true})
13 |   ],
14 |   resolve: {
15 |     extensions: ['', '.js', '.jsx','.styl']
16 |   },
17 |   module: {
18 |     loaders: [
19 |       {
20 |         test: /\.styl$/,
21 |         loaders: ['style-loader','css-loader','stylus-loader'],
22 |         include: path.join(__dirname, 'src/styl')
23 |       },
24 |       {
25 |         test: /\.jsx?$/,
26 |         loader: 'babel-loader',
27 |         exclude: /node_modules/,
28 |         query: {
29 |           presets: ['es2015', 'react']
30 |         },
31 |         include: path.join(__dirname, 'src')
32 |       }
33 |     ]
34 |   }
35 | };
36 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # React Calculator
 2 | [![Licence MIT](https://img.shields.io/badge/licence-MIT-blue.svg)](https://github.com/guuibayer/react-calculator/blob/develop/LICENSE.md)
 3 | [![DevDependency Status](https://david-dm.org/guuibayer/react-calculator/dev-status.svg)](https://david-dm.org/guuibayer/react-calculator#info=devDependencies)
 4 | 
 5 | > :heavy_plus_sign: Example from a calculator in react
 6 | 
 7 | ## Demo
 8 | In construction!
 9 | 
10 | ## Notes
11 | You want to contribute? open a issue [here](https://github.com/guuibayer/react-calculator/issues/new), this component use [Airbnb style guide](https://github.com/airbnb/javascript/tree/master/react), please follow.
12 | 
13 | ## How use
14 | ```bash
15 | # First, in your terminal, install dependencies from app
16 | $ npm install
17 | 
18 | # Run the command below to build the app,
19 | $ npm run build
20 | 
21 | # To run in the browser and watch changes, run command below and open localhost
22 | $ npm start
23 | ```
24 | 
25 | ## License
26 | [MIT Licence](https://github.com/guuibayer/react-calculator/blob/develop/LICENSE.md)


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
 1 | # License
 2 | ==============
 3 | The MIT License (MIT)
 4 | 
 5 | Copyright (c) 2016 Guilherme Bayer
 6 | 
 7 | Permission is hereby granted, free of charge, to any person obtaining a copy
 8 | of this software and associated documentation files (the "Software"), to deal
 9 | in the Software without restriction, including without limitation the rights
10 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
11 | copies of the Software, and to permit persons to whom the Software is
12 | furnished to do so, subject to the following conditions:<br /><br/>
13 | The above copyright notice and this permission notice shall be included in
14 | all copies or substantial portions of the Software.<br /><br />
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21 | THE SOFTWARE.


--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
 1 | # Contributing to React Calculator
 2 | 
 3 | You want to help? You rock! Now, take a moment to be sure your contributions make sense to everyone else.
 4 | 
 5 | ## Reporting Issues
 6 | 
 7 | Found a problem? Want a new feature?
 8 | 
 9 | - See if your issue or idea has [already been reported].
10 | - Provide a [reduced test case] or a [live example].
11 | 
12 | Remember, a bug is a _demonstrable problem_ caused by _our_ code.
13 | 
14 | ## Submitting Pull Requests
15 | 
16 | Pull requests are the greatest contributions, so be sure they are focused in scope, and do avoid unrelated commits.
17 | 
18 | 1. To begin, [fork this project], clone your fork, and add our upstream.
19 | 	```bash
20 | 	# Clone your fork of the repo into the current directory
21 | 	git clone https://github.com/<your-username>/react-calculator
22 | 
23 | 	# Navigate to the newly cloned directory
24 | 	cd react-calculator
25 | 
26 | 	# Assign the original repo to a remote called "upstream"
27 | 	git remote add upstream https://github.com/guuibayer/react-calculator
28 | 
29 | 	# Install the tools necessary for development
30 | 	npm install
31 | 
32 |     # To development, run the project and go to localhost:8080 in you browser
33 |     npm start
34 | 
35 |     # To build project
36 |     npm run build
37 | 	```
38 | 
39 | 2. Create a branch for your feature or fix:
40 | 	```bash
41 | 	# Move into a new branch for a feature
42 | 	git checkout -b feature/thing
43 | 	```
44 | 	```bash
45 | 	# Move into a new branch for a fix
46 | 	git checkout -b fix/something
47 | 	```
48 | 
49 | 3. Push your branch up to your fork:
50 | 	```bash
51 | 	# Push a feature branch
52 | 	git push origin feature/thing
53 | 	```
54 | 	```bash
55 | 	# Push a fix branch
56 | 	git push origin fix/something
57 | 	```
58 | 
59 | 4. Now [open a pull request] with a clear title and description.
60 | 
61 | [already been reported]: issues
62 | [fork this project]:     fork
63 | [live example]:          http://codepen.io/pen
64 | [open a pull request]:   https://help.github.com/articles/using-pull-requests/
65 | 


--------------------------------------------------------------------------------
/src/components/CalculatorKeys.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | class CalculatorKeys extends React.Component {
 4 | 	render() {
 5 | 		return (
 6 | 			<div className="calculator-keys">
 7 | 				<div className="calculator-row">
 8 | 					<button keyCode="67" className="button-default button-normal">C</button>
 9 | 					<button keyCode="8" className="button-default button-normal">←</button>
10 | 					<button keyCode="" className="button-default button-normal">%</button>
11 | 					<button keyCode="191" className="button-default button-overlay">÷</button>
12 | 				</div>
13 | 
14 | 				<div className="calculator-row">
15 | 					<button keyCode="55" className="button-default button-normal">7</button>
16 | 					<button keyCode="56" className="button-default button-normal">8</button>
17 | 					<button keyCode="57" className="button-default button-normal">9</button>
18 | 					<button keyCode="shift+56" className="button-default button-overlay">X</button>
19 | 				</div>
20 | 
21 | 				<div className="calculator-row">
22 | 					<button keyCode="52" className="button-default button-normal">4</button>
23 | 					<button keyCode="53" className="button-default button-normal">5</button>
24 | 					<button keyCode="54" className="button-default button-normal">6</button>
25 | 					<button keyCode="189" className="button-default button-overlay">-</button>
26 | 				</div>
27 | 
28 | 				<div className="calculator-row">
29 | 					<button keyCode="49" className="button-default button-normal">1</button>
30 | 					<button keyCode="50" className="button-default button-normal">2</button>
31 | 					<button keyCode="51" className="button-default button-normal">3</button>
32 | 					<button keyCode="187" className="button-default button-overlay">+</button>
33 | 				</div>
34 | 
35 | 				<div className="calculator-row">
36 | 					<button keyCode="48" className="button-default button-large">0</button>
37 | 					<button keyCode="190" className="button-default button-normal-two">.</button>
38 | 					<button keyCode="13" className="button-default button-white">=</button>
39 | 				</div>
40 | 			</div>
41 | 		);
42 | 	}
43 | };
44 | 
45 | export default CalculatorKeys;


--------------------------------------------------------------------------------
/src/styl/style.styl:
--------------------------------------------------------------------------------
 1 | $white 	       = #fff
 2 | $white-opacity = rgba(255, 255, 255, 0.3) 
 3 | $roboto        = 'Roboto', sans-serif
 4 | 
 5 | *
 6 | 	padding 0
 7 | 	margin 0
 8 | 	box-sizing border-box
 9 | 
10 | body
11 | 	height 100vh	
12 | 	background #e8eff5
13 | 	background linear-gradient(to bottom,  #e8eff5 0%,#8292b2 31%,#8292b2 31%,#976281 59%,#ab3a50 100%)
14 | 	display flex
15 | 	justify-content center
16 | 	align-items center
17 | 
18 | .calculator-display
19 | 	text-align right
20 | 	padding 0 15px
21 | 	width 240px
22 | 	height 90px
23 | 	border-radius 7px 7px 0 0
24 | 	background rgba(199,42,92,1)
25 | 	background -moz-linear-gradient(-45deg, rgba(199,42,92,1) 0%, rgba(199,42,92,1) 43%, rgba(139,61,120,1) 100%)
26 | 	background -webkit-gradient(left top, right bottom, color-stop(0%, rgba(199,42,92,1)), color-stop(43%, rgba(199,42,92,1)), color-stop(100%, rgba(139,61,120,1)))
27 | 	background -webkit-linear-gradient(-45deg, rgba(199,42,92,1) 0%, rgba(199,42,92,1) 43%, rgba(139,61,120,1) 100%)
28 | 	background -o-linear-gradient(-45deg, rgba(199,42,92,1) 0%, rgba(199,42,92,1) 43%, rgba(139,61,120,1) 100%)
29 | 	background -ms-linear-gradient(-45deg, rgba(199,42,92,1) 0%, rgba(199,42,92,1) 43%, rgba(139,61,120,1) 100%)
30 | 	background linear-gradient(135deg, rgba(199,42,92,1) 0%, rgba(199,42,92,1) 43%, rgba(139,61,120,1) 100%)
31 | 	
32 | 	.value,
33 | 	.expressions
34 | 		font-family $roboto
35 | 		color $white
36 | 		font-weight 100
37 | 		overflow hidden
38 | 
39 | 	.value
40 | 		font-size 34px
41 | 		padding-top 15px
42 | 
43 | 	.expressions
44 | 		font-size 14px			
45 | 		display inline-block
46 | 
47 | .calculator-keys
48 | 	overflow hidden
49 | 	width 240px
50 | 	height 300px
51 | 	border-radius 0 0 7px 7px
52 | 	background rgba(183,69,116,1)
53 | 	background -moz-linear-gradient(-45deg, rgba(183,69,116,1) 0%, rgba(150,80,131,1) 28%, rgba(124,88,145,1) 64%, rgba(71,105,169,1) 100%)
54 | 	background -webkit-gradient(left top, right bottom, color-stop(0%, rgba(183,69,116,1)), color-stop(28%, rgba(150,80,131,1)), color-stop(64%, rgba(124,88,145,1)), color-stop(100%, rgba(71,105,169,1)))
55 | 	background -webkit-linear-gradient(-45deg, rgba(183,69,116,1) 0%, rgba(150,80,131,1) 28%, rgba(124,88,145,1) 64%, rgba(71,105,169,1) 100%)
56 | 	background -o-linear-gradient(-45deg, rgba(183,69,116,1) 0%, rgba(150,80,131,1) 28%, rgba(124,88,145,1) 64%, rgba(71,105,169,1) 100%)
57 | 	background -ms-linear-gradient(-45deg, rgba(183,69,116,1) 0%, rgba(150,80,131,1) 28%, rgba(124,88,145,1) 64%, rgba(71,105,169,1) 100%)
58 | 	background linear-gradient(135deg, rgba(183,69,116,1) 0%, rgba(150,80,131,1) 28%, rgba(124,88,145,1) 64%, rgba(71,105,169,1) 100%)
59 | 
60 | 	.button-default
61 | 		height 60px
62 | 		display inline-block
63 | 		vertical-align middle
64 | 		border none
65 | 		cursor pointer
66 | 		background none
67 | 		color $white
68 | 		font-size 16px
69 | 		font-family $roboto
70 | 		text-align center
71 | 		outline none
72 | 	
73 | 	.button-normal
74 | 		border-right 1px solid $white-opacity
75 | 		border-bottom 1px solid $white-opacity
76 | 		width 60px
77 | 	
78 | 	.button-normal-two
79 | 		width 60px
80 | 		border-right 1px solid $white
81 | 	
82 | 	.button-overlay
83 | 		background rgba(255, 255, 255, 0.2)
84 | 		width 60px
85 | 		border-bottom 1px solid $white-opacity
86 | 	
87 | 	.button-white
88 | 		background $white
89 | 		color #c02c5e
90 | 		width 60px
91 | 	
92 | 	.button-large
93 | 		width 120px
94 | 		border-right 1px solid $white-opacity


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