Skip to content

Commit 226e9d7

Browse files
mrscobblermrscobbler
committed
React Daily Ui - 04 Calculator
1 parent fe38150 commit 226e9d7

17 files changed

+6698
-1
lines changed

‎004-calculator/.gitignore

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
# See http://help.github.com/ignore-files/ for more about ignoring files.
2+
3+
# dependencies
4+
node_modules
5+
6+
# testing
7+
coverage
8+
9+
# production
10+
build
11+
12+
# misc
13+
.DS_Store
14+
.env
15+
npm-debug.log

‎004-calculator/README.md

Whitespace-only changes.

‎004-calculator/daily-ui-calculator.md

Lines changed: 264 additions & 0 deletions
Large diffs are not rendered by default.

‎004-calculator/package.json

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
{
2+
"name": "004-calculator",
3+
"version": "0.0.1",
4+
"private": true,
5+
"devDependencies": {
6+
"react-scripts": "0.6.1"
7+
},
8+
"dependencies": {
9+
"concurrently": "^3.1.0",
10+
"mathjs": "^3.5.3",
11+
"node-sass": "^3.10.1",
12+
"nodemon": "^1.11.0",
13+
"react": "^15.3.2",
14+
"react-addons-update": "^15.3.2",
15+
"react-dom": "^15.3.2"
16+
},
17+
"scripts": {
18+
"start": "react-scripts start",
19+
"build": "react-scripts build",
20+
"test": "react-scripts test --env=jsdom",
21+
"eject": "react-scripts eject",
22+
"build-css": "node-sass --include-path scss src/App.scss src/App.css",
23+
"watch-css": "nodemon -e scss -x \"npm run build-css\"",
24+
"start-with-sass": "concurrently --kill-others \"npm run watch-css\" \"npm start\""
25+
}
26+
}

‎004-calculator/public/favicon.ico

24.3 KB
Binary file not shown.

‎004-calculator/public/index.html

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
7+
<!--
8+
Notice the use of %PUBLIC_URL% in the tag above.
9+
It will be replaced with the URL of the `public` folder during the build.
10+
Only files inside the `public` folder can be referenced from the HTML.
11+
12+
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
13+
work correctly both with client-side routing and a non-root public URL.
14+
Learn how to configure a non-root public URL by running `npm run build`.
15+
-->
16+
<title>React App</title>
17+
</head>
18+
<body>
19+
<div id="root"></div>
20+
<!--
21+
This HTML file is a template.
22+
If you open it directly in the browser, you will see an empty page.
23+
24+
You can add webfonts, meta tags, or analytics to this file.
25+
The build step will place the bundled scripts into the <body> tag.
26+
27+
To begin the development, run `npm start`.
28+
To create a production bundle, use `npm run build`.
29+
-->
30+
</body>
31+
</html>

‎004-calculator/react-daily-ui-004-calculator.jpg

741 KB
Loading

‎004-calculator/src/App.css

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
@import 'https://fonts.googleapis.com/css?family=Share+Tech+Mono';
2+
body {
3+
background: #EBEBEB;
4+
display: flex;
5+
align-items: center;
6+
justify-content: center;
7+
width: 100vw;
8+
height: 100vh;
9+
overflow: hidden;
10+
font-family: 'Share Tech Mono'; }
11+
12+
.App {
13+
height: 400px;
14+
width: 300px;
15+
perspective: 0 200px;
16+
background: #EBEBEB;
17+
transform: scale(0.8) rotateX(45deg) rotateZ(45deg);
18+
transition: transform .5s ease .5s;
19+
position: relative; }
20+
.App:hover {
21+
transform: scale(1.5) rotateX(0) rotateZ(0); }
22+
.App:hover::before {
23+
opacity: 0;
24+
height: 0; }
25+
.App:hover::after {
26+
opacity: 0;
27+
width: 0; }
28+
.App::before {
29+
position: absolute;
30+
content: '';
31+
background: #bdc7b7;
32+
width: 100%;
33+
height: 10px;
34+
top: 100%;
35+
left: 10px;
36+
transform: skewX(45deg);
37+
opacity: 1;
38+
transform-origin: 0 100%;
39+
perspective: 0 200px;
40+
transition: transform .5s ease .5s, height .5s ease .5s, opacity .5s ease .5s;
41+
border-bottom-left-radius: 5px;
42+
border-bottom-right-radius: 1px; }
43+
.App::after {
44+
position: absolute;
45+
content: '';
46+
background: #d7ddd3;
47+
width: 10px;
48+
height: 100%;
49+
bottom: 0;
50+
left: 100%;
51+
transform: skewY(45deg);
52+
transform-origin: 0 100%;
53+
perspective: 0 200px;
54+
opacity: 1;
55+
transition: transform .5s ease .5s, width .5s ease .5s, opacity .5s ease .5s;
56+
border-top-right-radius: 5px;
57+
border-bottom-right-radius: 1px; }
58+
59+
.Display {
60+
background: #2B293D;
61+
color: #59C3C3;
62+
text-shadow: 0 0 5px rgba(89, 195, 195, 0.5);
63+
display: flex;
64+
justify-content: flex-end;
65+
align-items: center;
66+
padding: 0 29px;
67+
box-sizing: border-box;
68+
height: 20%;
69+
overflow: hidden;
70+
font-size: 24px;
71+
position: relative; }
72+
.Display::after {
73+
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,f1f1f1+50,e1e1e1+51,f6f6f6+100;White+Gloss+%231 */
74+
background: white;
75+
/* Old browsers */
76+
background: -moz-linear-gradient(top, white 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%);
77+
/* FF3.6-15 */
78+
background: -webkit-linear-gradient(top, white 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%);
79+
/* Chrome10-25,Safari5.1-6 */
80+
background: linear-gradient(to bottom, white 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%);
81+
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
82+
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0 );
83+
/* IE6-9 */
84+
content: '';
85+
position: absolute;
86+
top: 0;
87+
left: 0;
88+
width: 100%;
89+
pointer-events: none;
90+
height: 100%;
91+
mix-blend-mode: overlay;
92+
display: block;
93+
z-index: 2; }
94+
95+
.Buttons {
96+
display: flex;
97+
flex-wrap: wrap;
98+
flex-direction: column;
99+
height: 80%; }
100+
101+
.Button {
102+
background: #cad2c5;
103+
/* Old browsers */
104+
background: -moz-linear-gradient(45deg, #cad2c5 0%, #abb5aa 100%);
105+
/* FF3.6-15 */
106+
background: -webkit-linear-gradient(45deg, #cad2c5 0%, #abb5aa 100%);
107+
/* Chrome10-25,Safari5.1-6 */
108+
background: linear-gradient(45deg, #cad2c5 0%, #abb5aa 100%);
109+
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
110+
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cad2c5', endColorstr='#abb5aa',GradientType=1 );
111+
/* IE6-9 fallback on horizontal gradient */
112+
display: flex;
113+
box-sizing: border-box;
114+
border: 1px solid rgba(0, 0, 0, 0.05);
115+
align-items: center;
116+
justify-content: center;
117+
width: 25%;
118+
font-size: 24px;
119+
color: rgba(0, 0, 0, 0.5);
120+
height: 20%;
121+
min-width: 25%; }
122+
.Button[data-size="2"] {
123+
height: 40%; }
124+
.Button[data-value="null"] {
125+
pointer-events: none; }
126+
.Button:hover {
127+
background: #d7ddd3;
128+
cursor: pointer; }
129+
.Button:active {
130+
background: #bdc7b7; }

‎004-calculator/src/App.css.map

Lines changed: 7 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎004-calculator/src/App.js

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
import React from 'react'
2+
import update from 'react-addons-update'
3+
import math from 'mathjs'
4+
import './App.css';
5+
6+
var App = React.createClass({
7+
getInitialState: function() {
8+
return ({
9+
operations: []
10+
});
11+
},
12+
calculateOperations: function() {
13+
var result = this.state.operations.join('');
14+
if(result){
15+
result = String(math.eval(result));
16+
this.setState({ operations : [result] });
17+
}
18+
19+
},
20+
handleClick: function(e) {
21+
var value = e.target.getAttribute('data-value');
22+
switch (value) {
23+
case 'clear':
24+
this.setState({ operations: []});
25+
break;
26+
case 'equal':
27+
this.calculateOperations();
28+
break;
29+
default:
30+
var newOperations = update(this.state.operations, {$push: [value]});
31+
this.setState({operations: newOperations});
32+
break;
33+
}
34+
},
35+
render: function() {
36+
return (
37+
<div className="App">
38+
<Display data={this.state.operations} />
39+
<Buttons>
40+
<Button onClick={this.handleClick} label="C" value="clear" />
41+
<Button onClick={this.handleClick} label="7" value="7" />
42+
<Button onClick={this.handleClick} label="4" value="4" />
43+
<Button onClick={this.handleClick} label="1" value="1" />
44+
<Button onClick={this.handleClick} label="0" value="0" />
45+
46+
<Button onClick={this.handleClick} label="/" value="/" />
47+
<Button onClick={this.handleClick} label="8" value="8" />
48+
<Button onClick={this.handleClick} label="5" value="5" />
49+
<Button onClick={this.handleClick} label="2" value="2" />
50+
<Button onClick={this.handleClick} label="." value="." />
51+
52+
<Button onClick={this.handleClick} label="x" value="*" />
53+
<Button onClick={this.handleClick} label="9" value="9" />
54+
<Button onClick={this.handleClick} label="6" value="6" />
55+
<Button onClick={this.handleClick} label="3" value="3" />
56+
<Button label="" value="null" />
57+
58+
<Button onClick={this.handleClick} label="-" value="-" />
59+
<Button onClick={this.handleClick} label="+" size="2" value="+" />
60+
<Button onClick={this.handleClick} label="=" size="2" value="equal" />
61+
</Buttons>
62+
</div>
63+
);
64+
}
65+
});
66+
67+
var Display = React.createClass({
68+
render: function() {
69+
var string = this.props.data.join('');
70+
return (
71+
<div className="Display">
72+
{string}
73+
</div>
74+
);
75+
}
76+
});
77+
78+
var Buttons = React.createClass({
79+
render: function() {
80+
return (
81+
<div className="Buttons">
82+
{this.props.children}
83+
</div>
84+
)
85+
}
86+
});
87+
88+
var Button = React.createClass({
89+
render: function() {
90+
return (
91+
<div onClick={this.props.onClick} className="Button" data-size={this.props.size} data-value={this.props.value}>
92+
{this.props.label}
93+
</div>
94+
)
95+
}
96+
});
97+
98+
export default App;

0 commit comments

Comments
 (0)