12 |
13 |
18 |
19 |
20 | max
21 |
22 |
23 | 0
24 |
25 |
26 |
27 | 0
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | /* background: lightblue; */
3 | background: #fff !important;
4 | font-family: Arial, sans-serif;
5 | transition: background .1s;
6 | }
7 |
8 | .calc {
9 | font-family: Arial, sans-serif;
10 | text-rendering: geometricPrecision;
11 | width: 260px;
12 | background: grey;
13 | margin: 100px auto 0 auto;
14 | border-radius: 5px;
15 | box-shadow: 0 4px 40px rgba(0,0,0,0.2),
16 | inset 0 3px 0 rgba(255,255,255,0.2);
17 | padding: 20px
18 | }
19 |
20 | .display {
21 | font-family: 'Roboto Condensed', sans-serif;
22 | color: rgba(255,255,255,0.8);
23 | background: rgba(0,0,0,.6);
24 | font-size: 35px;
25 | padding: 10px;
26 | text-align: right;
27 | border-radius: 2px;
28 | box-shadow: inset 0 5px 8px rgba(0,0,0,0.3), 0 1px 0 rgba(255,255,255,0.3);
29 | }
30 |
31 | .header .titles {
32 | text-transform: uppercase;
33 | letter-spacing: 2px;
34 | color: rgba(0,0,0,0.45);
35 | font-size: 10px;
36 | font-weight: bold;
37 | margin-top: -8px;
38 | padding-bottom: 8px;
39 | text-align: right;
40 | text-shadow: 0 1px 1px rgba(255,255,255,0.15);
41 | user-select: none;
42 | }
43 |
44 | .display-main {
45 | height: 38px;
46 | }
47 |
48 | .display-indicate {
49 | font-size: 10px;
50 | color: rgba(255,255,255,0.05);
51 | text-align: left;
52 | margin: -5px 0 -2px -5px;
53 | text-transform: uppercase;
54 | user-select: none;
55 | transition: color .1s ease-in;
56 | }
57 | .max{
58 | color: rgba(255,150,150,0.8);
59 | }
60 |
61 | .display-operations {
62 | font-size: 15px;
63 | color: rgba(255,255,255,0.5);
64 | border-top: 1px solid rgba(255,255,255,0.1);
65 | padding-top: 3px;
66 | margin-top: 4px;
67 | }
68 |
69 | .row {
70 | margin-left: -12px;
71 | margin-top: 10px;
72 | }
73 |
74 | .row:after, .bottom-row:after {
75 | content: "";
76 | display: block;
77 | clear: both;
78 | }
79 |
80 | .left, .right {
81 | float: left;
82 | }
83 |
84 | .button {
85 | position: relative;
86 | top:0;
87 | height: 41px;
88 | color: rgba(0,0,0,0.6);
89 | font-size: 16px;
90 | font-family:"Arial Bold", Gadget, Arial, sans-serif;
91 | font-weight: 700;
92 | text-align: center;
93 | padding: 9px 0 11px 0;
94 | border-radius: 2px;
95 | float: left;
96 | width: 56px;
97 | background: rgba(255,255,255,0.8);
98 | margin-left: 12px;
99 | text-transform: uppercase;
100 | border: 0;
101 | box-shadow: 0 1px 1px rgba(0,0,0,0.2),
102 | inset 0 1px 0 rgba(255,255,255,0.6);
103 | transition: all .1s;
104 | cursor:pointer;
105 | user-select: none;
106 | }
107 |
108 | .button:hover {
109 | box-shadow: 0 2px 6px rgba(0,0,0,0.15),inset 0 1px 0 rgba(255,255,255,0.6);
110 | background: rgba(255,255,255,0.95);
111 | color: rgba(0,0,0,0.8);
112 | }
113 | .button:active {
114 | top:1px;
115 | box-shadow: 0 0 2px rgba(0,0,0,0.15),inset 0 1px 0 rgba(255,255,255,0.3);
116 | }
117 | .button:focus {
118 | outline:0;
119 | }
120 |
121 | .ac, .ce {
122 | background: rgba(255,255,255,0.95);
123 | }
124 |
125 | .ac:hover, .ce:hover {
126 | background: rgb(8, 207, 207)
127 | }
128 |
129 | .minus {
130 | padding-top: 11px;
131 | padding-bottom: 9px;
132 | }
133 |
134 | .zero {
135 | width: 124px;
136 | }
137 |
138 | .eq{
139 | margin-top: 10px;
140 | padding: 35px 0 15px 0;
141 | }
142 |
143 | .mult {
144 | text-transform: none;
145 | padding-top: 9px;
146 | padding-bottom: 11px;
147 | }
148 |
149 |
--------------------------------------------------------------------------------
/app.js:
--------------------------------------------------------------------------------
1 | var vars = {
2 | display: document.getElementsByClassName("display-main")[0],
3 | displayInfo: document.getElementsByClassName("display-operations")[0],
4 | displayInd: document.getElementsByClassName("display-indicate")[0],
5 | ac: document.getElementsByClassName("ac")[0],
6 | ce: document.getElementsByClassName("ce")[0],
7 | div: document.getElementsByClassName("div")[0],
8 | mult: document.getElementsByClassName("mult")[0],
9 | minus: document.getElementsByClassName("minus")[0],
10 | plus: document.getElementsByClassName("plus")[0],
11 | eq: document.getElementsByClassName("eq")[0],
12 | dot: document.getElementsByClassName("dot")[0],
13 | zero: document.getElementsByClassName("zero")[0],
14 | one: document.getElementsByClassName("one")[0],
15 | two: document.getElementsByClassName("two")[0],
16 | three: document.getElementsByClassName("three")[0],
17 | four: document.getElementsByClassName("four")[0],
18 | five: document.getElementsByClassName("five")[0],
19 | six: document.getElementsByClassName("six")[0],
20 | seven: document.getElementsByClassName("seven")[0],
21 | eight: document.getElementsByClassName("eight")[0],
22 | nine: document.getElementsByClassName("nine")[0]
23 | }
24 | //hundlers
25 |
26 | for (var btn in vars) {
27 | if (btn === "display" || btn === "displayInfo" || btn === "displayInd") continue;
28 | (function(button) {
29 | vars[button].addEventListener("click", function() {
30 | calculate(button);
31 | });
32 |
33 | if (button === "ac" || button === "ce" || button === "eq") {
34 | document.addEventListener("keyup", function(event) {
35 | if(button === getChar(event, true)){
36 | calculate(getChar(event,true))
37 | }
38 | });
39 | } else {
40 | document.addEventListener("keypress", function(event) {
41 | if (toStr(button) === getChar(event)) {
42 | calculate(getChar(event), true);
43 | }
44 | });
45 | }
46 | })(btn);
47 | }
48 |
49 | function getChar(event, add) {
50 | var keyMap = {
51 | 13 : "eq",
52 | 35 : "ce",
53 | 46 : "ac"
54 | };
55 |
56 | if (add) {
57 | return keyMap[event.which];
58 | } else {
59 | if (event.which == null) {
60 | if (event.keyCode < 32) return "eq"
61 | return String.fromCharCode(event.keyCode)
62 | }
63 |
64 | if (event.which != 0 && event.charCode != 0) {
65 | if (event.which < 32) return "eq"
66 | return String.fromCharCode(event.which);
67 | }
68 | }
69 |
70 | return ""
71 | }
72 |
73 | function toStr(btn) {
74 | var btns = {
75 | one: "1",
76 | two: "2",
77 | three: "3",
78 | four: "4",
79 | five: "5",
80 | six: "6",
81 | seven: "7",
82 | eight: "8",
83 | nine: "9",
84 | zero: "0",
85 | div: "/",
86 | mult: "*",
87 | plus: "+",
88 | minus: "-",
89 | dot: "."
90 | }
91 | if (btn === "ce") return ""
92 | return btns[btn];
93 | }
94 |
95 | function removeZero(str) {
96 | var result = str;
97 |
98 | var senseOperators = ["+", "-"]
99 |
100 | var dotCond, firstZero, operZero;
101 |
102 | for (var i = 0; i < result.length - 1; i++) {
103 |
104 | dotCond = (result[i + 1] !== ".");
105 | firstZero = (i === 0) && (result[i] === "0") && dotCond;
106 | operZero = (senseOperators.indexOf(result[i - 1]) !== -1) && (result[i] === "0") && dotCond;
107 |
108 | if (firstZero || operZero) {
109 | result = result.slice(0, i) + result.slice(i + 1);
110 | ++i;
111 | }
112 | }
113 |
114 | return result
115 |
116 | }
117 |
118 | function fixOper(str) {
119 | var result = str;
120 | var operators1 = ["*", "/"];
121 | var operators2 = ["+", "-"];
122 | var cond, optCond;
123 |
124 | for (var i = 0; i < result.length - 1; i++) {
125 | cond = operators1.indexOf(result[i]) !== -1 && operators1.indexOf(result[i + 1]) !== -1;
126 |
127 | if (cond) {
128 | result = result.slice(0, i) + result.slice(i + 1);
129 | }
130 | }
131 |
132 | for (i = 0; i < result.length - 1; i++) {
133 | cond = operators2.indexOf(result[i]) !== -1 && (result[i] === result[i + 1]);
134 | optCond = (result[i] === "-") && (result[i + 1] === "+");
135 |
136 | if (cond) {
137 | result = result.slice(0, i) + result.slice(i + 1);
138 | } else if (optCond) {
139 | result = result.slice(0, i + 1) + result.slice(i + 2)
140 | }
141 | }
142 |
143 | for (i = 0; i < result.length - 2; i++) {
144 | if (operators1.indexOf(result[i]) !== -1 && operators2.indexOf(result[i + 1]) !== -1 && operators1.indexOf(result[i + 2]) !== -1) {
145 | result = result.slice(0, i + 2) + result.slice(i + 3);
146 | }
147 | }
148 |
149 | for (i = 0; i < result.length - 1; i++) {
150 | if (operators2.indexOf(result[i]) !== -1 && operators1.indexOf(result[i + 1]) !== -1) {
151 | result = result.slice(0, i + 1) + result.slice(i + 2)
152 | }
153 | }
154 |
155 | if (operators1.indexOf(result[0]) !== -1) {
156 | result = "0";
157 | }
158 |
159 | return result;
160 | }
161 |
162 | function removeLast(str) {
163 | var operators = ["+", "-", "*", "/"],
164 | cond, result = str;
165 | if (str.length === 1) {
166 | return "0";
167 | } else {
168 | for (var i = result.length - 1; i > 0; i--) {
169 | if (operators.indexOf(result[i]) !== -1) {
170 | return result.slice(0, i);
171 | } else if (operators.indexOf(result[i - 1]) !== -1) {
172 | return result.slice(0, i);
173 | } else continue;
174 | }
175 | }
176 | }
177 |
178 | var max = {
179 | add: function() {
180 | if (!vars.displayInd.classList.toggle("max")) {
181 | vars.displayInd.classList.toggle("max");
182 | }
183 | },
184 | remove: function() {
185 | if (vars.displayInd.classList.toggle("max")) {
186 | vars.displayInd.classList.toggle("max");
187 | }
188 | }
189 | }
190 |
191 | function calculate(btn, isFromKey) {
192 | var operators = ["minus", "plus", "div", "mult"];
193 |
194 | if (btn === "ac") {
195 | vars.display.innerText = "0";
196 | vars.displayInfo.innerText = "0";
197 | max.remove();
198 | return;
199 | }
200 |
201 | if (btn === "ce") {
202 | var result = removeLast(vars.displayInfo.innerText);
203 | if (!result) {
204 | vars.displayInfo.innerText = "0";
205 | } else {
206 | vars.displayInfo.innerText = result;
207 | }
208 | max.remove();
209 | }
210 |
211 | if (btn === "eq") {
212 | vars.displayInfo.innerText = vars.display.innerText;
213 | max.remove();
214 | return;
215 | }
216 |
217 | var operations = vars.displayInfo.innerText;
218 |
219 | if (operations.length < 32) {
220 | if (isFromKey) {
221 | operations += btn;
222 | } else {
223 | operations += toStr(btn);
224 | }
225 | } else {
226 | max.add();
227 | }
228 |
229 | operations = removeZero(operations);
230 | operations = fixOper(operations);
231 | vars.displayInfo.innerText = operations;
232 |
233 | var calc = "" + eval(vars.display.innerText);
234 | if (operators.indexOf(btn) === -1) {
235 | calc = "" + eval(operations);
236 | }
237 |
238 | if (calc.length < 14) {
239 | if (!calc) {
240 | vars.display.innerText = "0";
241 | } else {
242 | vars.display.innerText = calc;
243 | }
244 |
245 | } else if (calc < 1) {
246 | vars.display.innerText = (+calc).toPrecision(7);
247 | } else {
248 | vars.display.innerText = (+calc).toPrecision(9);
249 | }
250 |
251 | }
252 |
253 | var colors = ["pink", "lightblue"];
254 | function getBinaryRnd (){
255 | var rnd = Math.random();
256 | if (rnd > 0.5) return 1;
257 | else return 0;
258 | }
259 | document.body.style.background = colors[getBinaryRnd()];
--------------------------------------------------------------------------------