Mr.Calculator

├── brain ├── img │ └── fav.png ├── css │ └── style.css └── js │ └── script.js ├── README.md └── index.html /brain/img/fav.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ovi/js-calculator/HEAD/brain/img/fav.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Javascript Calculator 2 | 3 | Simple Calculator Using Javascript 4 | 5 | - You can also type using your keyboard :) 6 | 7 | Made as an assignment while learning Javascript 8 | 9 | Domo: https://ovi.github.io/js-calculator 10 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Mr.Calculator 8 | 12 | 16 | 17 | 18 | 19 | 20 |

21 |

22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 |

40 |

41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /brain/css/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | font-family: 'Open Sans', sans-serif; 6 | } 7 | 8 | body { 9 | background: #ccc; 10 | -moz-user-select: none; 11 | -khtml-user-select: none; 12 | -webkit-user-select: none; 13 | -ms-user-select: none; 14 | user-select: none; 15 | } 16 | 17 | #calculator { 18 | position: relative; 19 | border-radius: 7px; 20 | margin: auto; 21 | margin-top: 20px; 22 | display: block; 23 | height: auto; 24 | width: 278px; 25 | background-color: rgb(255, 255, 255); 26 | font-size: 0.8em; 27 | padding: 5px; 28 | max-width: 320px; 29 | } 30 | #calculator:before, 31 | #calculator:after { 32 | content: ''; 33 | position: absolute; 34 | z-index: -1; 35 | -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8); 36 | -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8); 37 | box-shadow: 0 0 20px rgba(0, 0, 0, 0.8); 38 | top: 10px; 39 | bottom: 10px; 40 | left: 0; 41 | right: 0; 42 | -moz-border-radius: 100px / 10px; 43 | border-radius: 100px / 10px; 44 | } 45 | #calculator:after { 46 | right: 10px; 47 | left: auto; 48 | -webkit-transform: skew(8deg) rotate(3deg); 49 | -moz-transform: skew(8deg) rotate(3deg); 50 | -ms-transform: skew(8deg) rotate(3deg); 51 | -o-transform: skew(8deg) rotate(3deg); 52 | transform: skew(8deg) rotate(3deg); 53 | } 54 | 55 | #smallResult { 56 | position: absolute; 57 | top: 3px; 58 | right: 10px; 59 | } 60 | 61 | #result { 62 | width: 100%; 63 | padding: 15px 0px; 64 | text-align: right; 65 | font-size: 2.5em; 66 | font-family: 'Oxygen Mono', monospace; 67 | background: inherit; 68 | color: black; 69 | } 70 | 71 | button { 72 | width: 60px; 73 | height: 60px; 74 | margin: 4px 2px; 75 | outline: none; 76 | border: none; 77 | background: rgb(223, 223, 223); 78 | color: black; 79 | border-radius: 5px; 80 | font-size: 1.4em; 81 | } 82 | 83 | button:active { 84 | background: #bfbfbf; 85 | } 86 | 87 | button:nth-child(2) { 88 | margin-left: 205px; 89 | display: block; 90 | background: #ef4a49; 91 | color: white; 92 | } 93 | 94 | button:nth-child(2):active { 95 | background: #b14e4d; 96 | } 97 | 98 | button:nth-child(6), 99 | button:nth-child(10), 100 | button:nth-child(14), 101 | button:nth-child(17), 102 | button:nth-child(18) { 103 | background: #00b49a; 104 | color: white; 105 | } 106 | 107 | button:nth-child(6):active, 108 | button:nth-child(10):active, 109 | button:nth-child(14):active, 110 | button:nth-child(17):active, 111 | button:nth-child(18):active { 112 | background: #218d7e; 113 | } 114 | 115 | footer { 116 | position: absolute; 117 | bottom: 0; 118 | padding: 20px; 119 | width: 100%; 120 | text-align: center; 121 | } 122 | 123 | a { 124 | text-decoration: none; 125 | color: inherit; 126 | } 127 | 128 | h1 { 129 | display: inline; 130 | font-size: 50px; 131 | color: #131313; 132 | letter-spacing: 0.05em; 133 | transition: all 0.3s; 134 | text-shadow: 1px -1px 0 #767676, -1px 2px 1px #737272, -2px 4px 1px #767474, 135 | -3px 6px 1px #787777, -4px 8px 1px #7b7a7a, -5px 10px 1px #7f7d7d, 136 | -6px 12px 1px #828181, -7px 14px 1px #868585, -8px 16px 1px #8b8a89, 137 | -9px 18px 1px #8f8e8d, -10px 20px 1px #949392, -11px 22px 1px #999897, 138 | -12px 24px 1px #9e9c9c, -13px 26px 1px #a3a1a1, -14px 28px 1px #a8a6a6, 139 | -15px 30px 1px #adabab, -16px 32px 1px #b2b1b0, -17px 34px 1px #b7b6b5, 140 | -18px 36px 1px #bcbbba, -19px 38px 1px #c1bfbf, -20px 40px 1px #c6c4c4, 141 | -21px 42px 1px #cbc9c8, -22px 44px 1px #cfcdcd, -23px 46px 1px #d4d2d1, 142 | -24px 48px 1px #d8d6d5, -25px 50px 1px #dbdad9, -26px 52px 1px #dfdddc, 143 | -27px 54px 1px #e2e0df, -28px 56px 1px #e4e3e2; 144 | } 145 | 146 | h1:hover { 147 | text-shadow: 1px -1px 0 #767676, 1px 2px 1px #737272, 2px 4px 1px #767474, 148 | 3px 6px 1px #787777, 4px 8px 1px #7b7a7a, 5px 10px 1px #7f7d7d, 149 | 6px 12px 1px #828181, 7px 14px 1px #868585, 8px 16px 1px #8b8a89, 150 | 9px 18px 1px #8f8e8d, 10px 20px 1px #949392, 11px 22px 1px #999897, 151 | 12px 24px 1px #9e9c9c, 13px 26px 1px #a3a1a1, 14px 28px 1px #a8a6a6, 152 | 15px 30px 1px #adabab, 16px 32px 1px #b2b1b0, 17px 34px 1px #b7b6b5, 153 | 18px 36px 1px #bcbbba, 19px 38px 1px #c1bfbf, 20px 40px 1px #c6c4c4, 154 | 21px 42px 1px #cbc9c8, 22px 44px 1px #cfcdcd, 23px 46px 1px #d4d2d1, 155 | 24px 48px 1px #d8d6d5, 25px 50px 1px #dbdad9, 26px 52px 1px #dfdddc, 156 | 27px 54px 1px #e2e0df, 28px 56px 1px #e4e3e2; 157 | } 158 | -------------------------------------------------------------------------------- /brain/js/script.js: -------------------------------------------------------------------------------- 1 | /* ------------------------- 2 | Calculator ... 3 | ---------------------------*/ 4 | var result = document.getElementById('result'); 5 | var smallResult = document.getElementById('smallResult'); 6 | var cal = false; 7 | var val_1 = false; 8 | var val_2 = false; 9 | var oper = '+'; 10 | var operPressed = false; 11 | var tot = 0; 12 | var cal_done = false; 13 | var currentStatus = 0; 14 | var o; 15 | 16 | function num(val) { 17 | val = val.toString(); // converting to string so it won't be added together in display (2 + '2' should not do '22') 18 | 19 | if (cal_done) 20 | // if calculation is done 21 | cls(); // clear everything 22 | 23 | if (!operPressed) { 24 | // if no operator is pressed (means it's first value) 25 | if (!val_1) val_1 = 0; 26 | 27 | val_1 = val_1 + val; 28 | 29 | val_1 = lengthFix(val_1); // limiting to 12 30 | 31 | result.innerHTML = val_1; 32 | smallResult.innerHTML = val_1; 33 | // console.log('num to be calc: ' + val_1); 34 | } 35 | if (operPressed) { 36 | // if operator is pressed (means it's 2nd value) 37 | if (!val_2) val_2 = 0; 38 | 39 | val_2 = val_2 + val; 40 | 41 | val_2 = lengthFix(val_2); // limiting to 12 42 | 43 | result.innerHTML = val_2; 44 | smallResult.innerHTML = val_1 + oper + val_2; 45 | // console.log('2nd num to be calc: ' + val_2); 46 | } 47 | } 48 | 49 | // when /,*,+,- is clicked 50 | function calc(val) { 51 | if (val_1 && val_2) { 52 | operPressed = true; 53 | total(); 54 | oper = val; 55 | } 56 | 57 | if (cal_done) { 58 | var x = (val_1 = tot); 59 | cls(); 60 | val_1 = x; 61 | val_1 = lengthFix(val_1); // limiting to 12 62 | result.innerHTML = val; // display which operator is selected 63 | // var a = smallResult.innerHTML.toString(); 64 | smallResult.innerHTML = +x + val; 65 | oper = val; 66 | operPressed = true; 67 | } 68 | 69 | if (!val_1 || operPressed) { 70 | return false; 71 | } 72 | 73 | if (val_1 && !val_2) { 74 | result.innerHTML = val; // display which operator is selected 75 | var a = smallResult.innerHTML.toString(); 76 | smallResult.innerHTML = a + val; 77 | oper = val; 78 | operPressed = true; 79 | } 80 | } 81 | 82 | function total() { 83 | if (!val_1) return false; 84 | 85 | if (!val_2 && operPressed) { 86 | tot = magic(val_1, val_1, oper); 87 | tot = lengthFix(tot); 88 | } 89 | 90 | if (val_1 && val_2) { 91 | tot = magic(val_1, val_2, oper); 92 | tot = lengthFix(tot); 93 | } 94 | 95 | tot = tot.toString(); 96 | var noDec = tot.indexOf('.') == -1; 97 | if (!noDec) tot = parseFloat(tot).toFixed(3); 98 | 99 | result.innerHTML = tot; 100 | // smallResult.innerHTML = tot; 101 | // console.log('total: ' + tot); 102 | } 103 | 104 | function magic(a, b, oper) { 105 | switch (oper) { 106 | case '+': 107 | tot = +a + +b; 108 | cal_done = true; 109 | break; 110 | case '-': 111 | tot = +a - +b; 112 | cal_done = true; 113 | break; 114 | case '/': 115 | tot = +a / +b; 116 | cal_done = true; 117 | break; 118 | case '*': 119 | tot = +a * +b; 120 | cal_done = true; 121 | break; 122 | default: 123 | return false; 124 | } 125 | return tot; 126 | } 127 | 128 | // clearing everything... 129 | function cls() { 130 | smallResult.innerHTML = ''; 131 | result.innerHTML = 0; 132 | val_1 = false; 133 | val_2 = false; 134 | oper = '+'; 135 | tot = 0; 136 | cal_done = false; 137 | operPressed = false; 138 | } 139 | 140 | function lengthFix(o) { 141 | o = o.toString(); 142 | 143 | if (o != 0 || o != '0') { 144 | if (o.charAt(0) == 0) o = o.slice(1); 145 | } 146 | 147 | if (o.toString().length > 12) o = o.substring(0, 12); 148 | 149 | return o; 150 | } 151 | 152 | document.onkeyup = function(e) { 153 | if (e.which == 110 || e.which == 190) num('.'); 154 | if (e.which == 96 || e.which == 48) num('0'); 155 | if (e.which == 97 || e.which == 49) num('1'); 156 | if (e.which == 98 || e.which == 50) num('2'); 157 | if (e.which == 99 || e.which == 51) num('3'); 158 | if (e.which == 100 || e.which == 52) num('4'); 159 | if (e.which == 101 || e.which == 53) num('5'); 160 | if (e.which == 102 || e.which == 54) num('6'); 161 | if (e.which == 103 || e.which == 55) num('7'); 162 | if (e.which == 104 || e.which == 56) num('8'); 163 | if (e.which == 105 || e.which == 57) num('9'); 164 | 165 | if (e.which == 111) calc('/'); 166 | if (e.which == 106) calc('*'); 167 | if (e.which == 107) calc('+'); 168 | if (e.which == 109) calc('-'); 169 | 170 | if (e.which == 13) total(); 171 | 172 | if (e.which == 8 || e.which == 46) cls(); 173 | 174 | if (e.which == 27) cls(); 175 | }; 176 | --------------------------------------------------------------------------------