├── Calc ├── calc.css ├── calc.html └── calc.js ├── README.md ├── dark-light-theme-toggle.js ├── index.html ├── new_cal ├── README.md ├── dark-light-theme-toggle.js ├── index.html ├── script.js ├── style.css ├── style.css.map └── style.scss ├── pixel ├── index.html └── pixel.css ├── script.js ├── style.css ├── style.css.map └── style.scss /Calc/calc.css: -------------------------------------------------------------------------------- 1 | purple: #5C258D; 2 | blue: #4389A2; 3 | 4 | * { 5 | box-sizing:border-box; 6 | font-family:'Open Sans',Helvetica,Arial,sans-serif; 7 | font-size: 24px; 8 | font-size:4vw; 9 | font-weight: 300; 10 | margin:0; 11 | padding:0; 12 | } 13 | 14 | html { 15 | height:100%; 16 | background: radial-gradient(circle,#fff,#ddd); 17 | background-size:cover; 18 | } 19 | 20 | #calculator { 21 | width: 12em; 22 | height:auto; 23 | background:linear-gradient(#4389A2,#5C258D); 24 | margin: 1em auto; 25 | } 26 | 27 | .top span.clear { 28 | float:left; 29 | box-shadow:0 4px #ff7c87; 30 | color:#FFF; 31 | } 32 | 33 | .top .input { 34 | height:3em; 35 | width:9em; 36 | padding-right: 1em; 37 | float:right; 38 | color:#FFF; 39 | line-height: 3em; 40 | text-align:right; 41 | letter-spacing:1px; 42 | border-bottom: 1px solid rgba(255,255,255,0.3); 43 | } 44 | 45 | .keys,.top { 46 | overflow:hidden; 47 | } 48 | 49 | .keys span,.top span.clear { 50 | float:left; 51 | cursor:pointer; 52 | width:3em; 53 | height:3em; 54 | line-height: 3em; 55 | color:#fff; 56 | text-align:center; 57 | user-select:none; 58 | transition: background-color .2s ease; 59 | border-right: 1px solid rgba(255,255,255,0.3); 60 | border-bottom: 1px solid rgba(255,255,255,0.3); 61 | } 62 | 63 | .keys span.operator { 64 | background:rgba(255,255,255,0.2); 65 | border-right: 0; 66 | color: rgba(0,0,0,0.5); 67 | } 68 | 69 | .keys span.equals { 70 | color:#888e5f; 71 | } 72 | 73 | .keys span:hover { 74 | background:rgba(255,255,255,0.3); 75 | color:#FFF; 76 | } 77 | 78 | .keys span.equals:hover { 79 | background:rgba(255,255,255,0.2); 80 | color:#fff; 81 | } 82 | 83 | .top span.clear:hover { 84 | background:rgba(255,255,255,0.2); 85 | color:#FFF; 86 | } 87 | 88 | .keys span:active { 89 | } 90 | 91 | .keys span.equals:active { 92 | } 93 | 94 | .top span.clear:active { 95 | } -------------------------------------------------------------------------------- /Calc/calc.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
5 | 6 |
7 | C 8 |
9 |
10 |
11 | 12 |
13 | 14 | 7 15 | 8 16 | 9 17 | / 18 | 4 19 | 5 20 | 6 21 | x 22 | 1 23 | 2 24 | 3 25 | - 26 | 0 27 | . 28 | = 29 | + 30 |
31 |
32 | 33 | 34 | -------------------------------------------------------------------------------- /Calc/calc.js: -------------------------------------------------------------------------------- 1 | var keys = document.querySelectorAll('#calculator span'); 2 | var operators = ['+', '-', 'x', '÷']; 3 | var decimalAdded = false; 4 | 5 | for(var i = 0; i < keys.length; i++) { 6 | keys[i].onclick = function(e) { 7 | var input = document.querySelector('.input'); 8 | var inputVal = input.innerHTML; 9 | var btnVal = this.getAttribute("data-value"); 10 | 11 | if(btnVal == 'C') { 12 | input.innerHTML = ''; 13 | decimalAdded = false; 14 | } 15 | 16 | else if(btnVal == '=') { 17 | var equation = inputVal; 18 | var lastChar = equation[equation.length - 1]; 19 | 20 | equation = equation.replace(/x/g, '*').replace(/÷/g, '/'); 21 | 22 | if(operators.indexOf(lastChar) > -1 || lastChar == '.') 23 | equation = equation.replace(/.$/, ''); 24 | 25 | if(equation) 26 | input.innerHTML = eval(equation); 27 | 28 | decimalAdded = false; 29 | } 30 | 31 | 32 | else if(operators.indexOf(btnVal) > -1) { 33 | var lastChar = inputVal[inputVal.length - 1]; 34 | 35 | if(inputVal != '' && operators.indexOf(lastChar) == -1) 36 | input.innerHTML += btnVal; 37 | 38 | else if(inputVal == '' && btnVal == '-') 39 | input.innerHTML += btnVal; 40 | 41 | if(operators.indexOf(lastChar) > -1 && inputVal.length > 1) { 42 | input.innerHTML = inputVal.replace(/.$/, btnVal); 43 | } 44 | 45 | decimalAdded =false; 46 | } 47 | 48 | else if(btnVal == '.') { 49 | if(!decimalAdded) { 50 | input.innerHTML += btnVal; 51 | decimalAdded = true; 52 | } 53 | } 54 | 55 | else { 56 | input.innerHTML += btnVal; 57 | } 58 | 59 | e.preventDefault(); 60 | } 61 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | # Calculator 3 | 4 | ## About Project 5 | 6 | ### We are creating this Calculator so that, other developers can get the benefits of it. 7 | 8 | 9 | ## How to contribute : 10 | 1. Make a Fork. 11 | 2. Clone the repository to your local desktop. 12 | 3. Select the folder(what you are creating) 13 | 4. Create new folder inside the selected folder and give it a name (It's necessary). 14 | 5. Make changes and Add to Staging here. 15 | 6. Commit changes [always write the message short and easy to understand (ideally 3 to 5 words).] 16 | 7. Push the changes so that Pull request will be generated. 17 | 8. Make PR. 18 | 9. Commits should be descriptive. 19 | 20 | -------------------------------------------------------------------------------- /dark-light-theme-toggle.js: -------------------------------------------------------------------------------- 1 | let themeToggle = document.getElementById('themeToggle'); 2 | 3 | themeToggle.addEventListener('change', () => { 4 | let lightThemeEnabled = document.body.classList.toggle('light-theme'); 5 | localStorage.setItem('light-theme-enadled', lightThemeEnabled); 6 | }); 7 | 8 | if (JSON.parse(localStorage.getItem('light-theme-enadled'))) { 9 | document.body.classList.add('light-theme'); 10 | themeToggle.setAttribute('checked', 'checked'); 11 | } 12 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Calculator 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 |
18 | 19 |

JavaScript Calculator

20 |

Don't divide by Zero.

21 |
22 |
You broke it!
23 | 24 | 25 | 26 | 27 | 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 | 67 | 68 | -------------------------------------------------------------------------------- /new_cal/README.md: -------------------------------------------------------------------------------- 1 | 2 | # Calculator! 3 | 4 | ## About Project 5 | 6 | We are creating this Calculator so that, other developers can get the benefits of it. 7 | 8 | Open index.html of new_cal folder. 9 | NAME - SWASTIKA SARANGI 10 | EMAIL - sarangi.swastika5@gmail.com 11 | -------------------------------------------------------------------------------- /new_cal/dark-light-theme-toggle.js: -------------------------------------------------------------------------------- 1 | let themeToggle = document.getElementById('themeToggle'); 2 | 3 | themeToggle.addEventListener('change', () => { 4 | let lightThemeEnabled = document.body.classList.toggle('light-theme'); 5 | localStorage.setItem('light-theme-enadled', lightThemeEnabled); 6 | }); 7 | 8 | if (JSON.parse(localStorage.getItem('light-theme-enadled'))) { 9 | document.body.classList.add('light-theme'); 10 | themeToggle.setAttribute('checked', 'checked'); 11 | } 12 | -------------------------------------------------------------------------------- /new_cal/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Calculator 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 |
18 | 19 |

JavaScript Calculator

20 |

Don't divide by Zero.

21 |
22 |
You broke it!
23 | 24 | 25 | 26 | 27 | 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 | 67 | 68 | -------------------------------------------------------------------------------- /new_cal/script.js: -------------------------------------------------------------------------------- 1 | /* 2 | TODO: 3 | Limit number input 4 | Clean up structure 5 | */ 6 | 7 | (function() { 8 | "use strict"; 9 | 10 | // Shortcut to get elements 11 | var el = function(element) { 12 | if (element.charAt(0) === "#") { // If passed an ID... 13 | return document.querySelector(element); // ... returns single element 14 | } 15 | 16 | return document.querySelectorAll(element); // Otherwise, returns a nodelist 17 | }; 18 | // Variables 19 | var viewer = el("#viewer"), // Calculator screen where result is displayed 20 | equals = el("#equals"), // Equal button 21 | nums = el(".num"), // List of numbers 22 | ops = el(".ops"), // List of operators 23 | theNum = "", // Current number 24 | oldNum = "", // First number 25 | resultNum, // Result 26 | operator; // Batman 27 | 28 | // When: Number is clicked. Get the current number selected 29 | var setNum = function() { 30 | //if . was pressed, then only do this if theNum doesn't already include a . 31 | if ((this.getAttribute("data-num")==="." && theNum.indexOf(".") === -1) || this.getAttribute("data-num")!=="."){ 32 | if (resultNum) { // If a result was displayed, reset number 33 | theNum = this.getAttribute("data-num"); 34 | resultNum = ""; 35 | } else { // Otherwise, add digit to previous number (this is a string!) 36 | theNum += this.getAttribute("data-num"); 37 | } 38 | 39 | viewer.innerHTML = theNum; // Display current number 40 | } 41 | 42 | }; 43 | 44 | // When: Number key is pressed. Get the current number selected 45 | var setNumKey = function(keyPressed) { 46 | //if . was pressed, then only do this if theNum doesn't already include a . 47 | if ((keyPressed ==="." && theNum.indexOf(".") === -1) || keyPressed !=="."){ 48 | if (resultNum) { // If a result was displayed, reset number 49 | theNum = keyPressed; 50 | resultNum = ""; 51 | } else { // Otherwise, add digit to previous number (this is a string!) 52 | theNum += keyPressed; 53 | } 54 | 55 | viewer.innerHTML = theNum; // Display current number 56 | } 57 | } 58 | 59 | // When: Operator is clicked. Pass number to oldNum and save operator 60 | var moveNum = function() { 61 | oldNum = theNum; 62 | theNum = ""; 63 | operator = this.getAttribute("data-ops"); 64 | 65 | equals.setAttribute("data-result", ""); // Reset result in attr 66 | }; 67 | 68 | // When: Operator is clicked. Pass number to oldNum and save operator 69 | var moveNumKey = function(wordOperator) { 70 | oldNum = theNum; 71 | theNum = ""; 72 | operator = wordOperator; 73 | 74 | equals.setAttribute("data-result", ""); // Reset result in attr 75 | }; 76 | 77 | // When: Equals is clicked. Calculate result 78 | var displayNum = function() { 79 | 80 | // Convert string input to numbers 81 | oldNum = parseFloat(oldNum); 82 | theNum = parseFloat(theNum); 83 | 84 | // Perform operation 85 | switch (operator) { 86 | case "plus": 87 | resultNum = oldNum + theNum; 88 | break; 89 | 90 | case "minus": 91 | resultNum = oldNum - theNum; 92 | break; 93 | 94 | case "times": 95 | resultNum = oldNum * theNum; 96 | break; 97 | 98 | case "divided by": 99 | resultNum = oldNum / theNum; 100 | break; 101 | 102 | case "square": 103 | resultNum = oldNum ** 2; 104 | break; 105 | 106 | case "cube": 107 | resultNum = oldNum ** 3; 108 | break; 109 | 110 | case "square root": 111 | resultNum = Math.sqrt(oldNum); 112 | break; 113 | 114 | case "power": 115 | resultNum = oldNum ** theNum; 116 | break; 117 | 118 | case "sin": 119 | resultNum = Math.sin(oldNum); 120 | break; 121 | 122 | case "cos": 123 | resultNum = Math.cos(oldNum); 124 | break; 125 | 126 | case "tan": 127 | resultNum = Math.tan(oldNum); 128 | break; 129 | 130 | // If equal is pressed without an operator, keep number and continue 131 | default: 132 | resultNum = theNum; 133 | } 134 | 135 | // If NaN or Infinity returned 136 | if (!isFinite(resultNum)) { 137 | if (!isInt(resultNum) || !isFloat(resultNum)) { // If result is not a number; set off by, eg, double-clicking operators 138 | resultNum = "You broke it!"; 139 | } else { // If result is infinity, set off by dividing by zero 140 | resultNum = "Look at what you've done"; 141 | el('#calculator').classList.add("broken"); // Break calculator 142 | el('#reset').classList.add("show"); // And show reset button 143 | } 144 | } 145 | 146 | // Display result, finally! 147 | viewer.innerHTML = resultNum; 148 | equals.setAttribute("data-result", resultNum); 149 | 150 | // Now reset oldNum & keep result 151 | oldNum = 0; 152 | theNum = resultNum; 153 | 154 | }; 155 | 156 | // When: Clear button is pressed. Clear everything 157 | var clearAll = function() { 158 | oldNum = ""; 159 | theNum = ""; 160 | viewer.innerHTML = "0"; 161 | equals.setAttribute("data-result", resultNum); 162 | }; 163 | 164 | // When: Key is pressed, find out if it's a valid one and send to relevant function if so 165 | var findKey = function(e){ 166 | if((e.key >= 0 && e.key <= 9) || e.key == "."){ 167 | setNumKey(e.key); 168 | } 169 | // Operator keys 170 | switch (e.key) { 171 | case "+": 172 | moveNumKey("plus"); 173 | break; 174 | case "-": 175 | moveNumKey("minus"); 176 | break; 177 | case "*": 178 | moveNumKey("times"); 179 | break; 180 | case "/": 181 | moveNumKey("divided by"); 182 | break; 183 | case "=": 184 | case "Enter": 185 | displayNum(); 186 | break; 187 | case "Escape": 188 | case "c": 189 | case "C": 190 | clearAll(); 191 | break; 192 | // if another key is pressed then do nothing 193 | default: 194 | break; 195 | } 196 | } 197 | 198 | /* The click events */ 199 | 200 | // Add click event to numbers 201 | for (var i = 0, l = nums.length; i < l; i++) { 202 | nums[i].onclick = setNum; 203 | } 204 | 205 | // Add click event to operators 206 | for (var i = 0, l = ops.length; i < l; i++) { 207 | ops[i].onclick = moveNum; 208 | } 209 | 210 | //Add keyboard event to use numbers and basic operators 211 | document.onkeyup = findKey; 212 | 213 | // Add click event to equal sign 214 | equals.onclick = displayNum; 215 | 216 | // Add click event to clear button 217 | el("#clear").onclick = clearAll; 218 | 219 | // Add click event to reset button 220 | el("#reset").onclick = function() { 221 | window.location = window.location; 222 | }; 223 | 224 | }()); 225 | -------------------------------------------------------------------------------- /new_cal/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=DM+Serif+Text&display=swap'); 2 | html { 3 | background: #100a1c; 4 | background-image: radial-gradient(50% 30% ellipse at center top, #201e40 0%, rgba(0, 0, 0, 0) 100%), radial-gradient(60% 50% ellipse at center bottom, #261226 0%, #100a1c 100%); 5 | background-attachment: fixed; 6 | color: #6cacc5; 7 | } 8 | 9 | body { 10 | color: #6cacc5; 11 | font: 300 25px/1.6 'DM Serif Text', serif; 12 | margin: 0; 13 | padding: 5em 0 2em; 14 | text-align: center; 15 | } 16 | 17 | h1 { 18 | font-weight: 300; 19 | margin: 0; 20 | } 21 | 22 | /* Gradient text only on Webkit */ 23 | .warning { 24 | background: -webkit-linear-gradient(45deg, #44e4d1 10%, #d0f980 90%); 25 | -webkit-background-clip: text; 26 | -webkit-text-fill-color: transparent; 27 | color: #44e4d1; 28 | font-weight: 400; 29 | font-family: 'DM Serif Text', serif; 30 | margin: 0 auto 6em; 31 | max-width: 9em; 32 | } 33 | 34 | .calculator { 35 | font-size: 28px; 36 | margin: 0 auto; 37 | width: 10em; 38 | } 39 | 40 | .calculator::before, 41 | .calculator::after { 42 | content: " "; 43 | display: table; 44 | } 45 | 46 | .calculator::after { 47 | clear: both; 48 | } 49 | 50 | /* Calculator after dividing by zero */ 51 | .broken { 52 | animation: broken 2s; 53 | transform: translate3d(0, -2000px, 0); 54 | opacity: 0; 55 | } 56 | 57 | .viewer { 58 | border-top: 3px double; 59 | border-right: 3px double; 60 | border-bottom: 3px double; 61 | border-left: 3px double; 62 | padding: 2px; 63 | color: #44e4d1; 64 | margin: 0px auto; 65 | line-height: 3em; 66 | text-align: center; 67 | text-overflow: ellipsis; 68 | overflow: hidden; 69 | width: 10em; 70 | height: 3em; 71 | align-items: center; 72 | } 73 | 74 | button { 75 | border: 0; 76 | background: rgba(42, 50, 113, 0.28); 77 | color: #6cacc5; 78 | cursor: pointer; 79 | float: left; 80 | font: inherit; 81 | margin: 0.25em; 82 | width: 2em; 83 | height: 2em; 84 | transition: all 0.5s; 85 | } 86 | 87 | button:hover { 88 | background: #201e40; 89 | } 90 | 91 | button:focus { 92 | outline: 0; 93 | /* The value fade-ins that appear */ 94 | } 95 | 96 | button:focus::after { 97 | animation: zoom 1s; 98 | animation-iteration-count: 1; 99 | animation-fill-mode: both; 100 | content: attr(data-num); 101 | cursor: default; 102 | font-size: 100px; 103 | position: absolute; 104 | top: 1.5em; 105 | left: 50%; 106 | text-align: center; 107 | margin-left: -24px; 108 | opacity: 0; 109 | width: 48px; 110 | } 111 | 112 | /* Same as above, modified for operators */ 113 | .ops:focus::after { 114 | content: attr(data-ops); 115 | margin-left: -210px; 116 | width: 420px; 117 | } 118 | 119 | /* Same as above, modified for result */ 120 | .equals:focus::after { 121 | content: attr(data-result); 122 | margin-left: -300px; 123 | width: 600px; 124 | } 125 | 126 | /* Reset button */ 127 | .reset { 128 | background: rgba(201, 120, 116, 0.28); 129 | color: #44e4d1; 130 | font-weight: 400; 131 | margin-left: -77px; 132 | padding: 0.5em 1em; 133 | position: absolute; 134 | top: -20em; 135 | left: 50%; 136 | width: auto; 137 | height: auto; 138 | /* When button is revealed */ 139 | } 140 | 141 | .reset:hover { 142 | background: #44e4d1; 143 | color: #100a1c; 144 | } 145 | 146 | .reset.show { 147 | top: 20em; 148 | animation: fadein 4s; 149 | } 150 | 151 | /* Light mode theme colors and switcher */ 152 | .light-theme { 153 | background: #423e4d; 154 | background: -webkit-linear-gradient(to right, #E9E4F0, #D3CCE3); 155 | background: linear-gradient(to right, #E9E4F0, #D3CCE3); 156 | } 157 | 158 | .light-theme h1, 159 | .light-theme button { 160 | color: #5a5569; 161 | } 162 | 163 | .light-theme button:hover { 164 | background-color: #423e4d; 165 | color: #D3CCE3; 166 | } 167 | 168 | .light-theme button.equals { 169 | color: #5a5569; 170 | } 171 | 172 | /* Styles for dark-light mode switcher */ 173 | .toggle-container { 174 | position: absolute; 175 | top: 45px; 176 | right: 45px; 177 | } 178 | 179 | input[type=checkbox] { 180 | height: 0; 181 | width: 0; 182 | visibility: hidden; 183 | } 184 | 185 | label { 186 | background: #6cacc5; 187 | position: relative; 188 | width: 65px; 189 | height: 32px; 190 | text-indent: -9999px; 191 | float: right; 192 | border-radius: 20px; 193 | cursor: pointer; 194 | } 195 | 196 | label:after { 197 | content: ''; 198 | position: absolute; 199 | top: 3px; 200 | left: 4px; 201 | width: 26px; 202 | height: 26px; 203 | background: white; 204 | border-radius: 90px; 205 | transition: 0.3s; 206 | } 207 | 208 | input:checked+label { 209 | background: #5a5569; 210 | } 211 | 212 | input:checked+label:after { 213 | left: calc(100% - 5px); 214 | transform: translateX(-100%); 215 | } 216 | 217 | label:active:after { 218 | width: 56px; 219 | } 220 | 221 | html.transition, 222 | html.transition *, 223 | html.transition *:before, 224 | html.transition *:after { 225 | transition: all 750ms !important; 226 | transition-delay: 0 !important; 227 | } 228 | 229 | /* Animations */ 230 | /* Values that appear onclick */ 231 | @keyframes zoom { 232 | 0% { 233 | transform: scale(0.2); 234 | opacity: 1; 235 | } 236 | 237 | 70% { 238 | transform: scale(1); 239 | } 240 | 241 | 100% { 242 | opacity: 0; 243 | } 244 | } 245 | 246 | /* Division by zero animation */ 247 | @keyframes broken { 248 | 0% { 249 | transform: translate3d(0, 0, 0); 250 | opacity: 1; 251 | } 252 | 253 | 5% { 254 | transform: rotate(5deg); 255 | } 256 | 257 | 15% { 258 | transform: rotate(-5deg); 259 | } 260 | 261 | 20% { 262 | transform: rotate(5deg); 263 | } 264 | 265 | 25% { 266 | transform: rotate(-5deg); 267 | } 268 | 269 | 50% { 270 | transform: rotate(45deg); 271 | } 272 | 273 | 70% { 274 | transform: translate3d(0, 2000px, 0); 275 | opacity: 1; 276 | } 277 | 278 | 75% { 279 | opacity: 0; 280 | } 281 | 282 | 100% { 283 | transform: translate3d(0, -2000px, 0); 284 | } 285 | } 286 | 287 | /* Reset button fadein */ 288 | @keyframes fadein { 289 | 0% { 290 | top: 20em; 291 | opacity: 0; 292 | } 293 | 294 | 50% { 295 | opacity: 0; 296 | } 297 | 298 | 100% { 299 | opacity: 1; 300 | } 301 | } 302 | 303 | @media (min-width: 420px) { 304 | .calculator { 305 | width: 12em; 306 | } 307 | 308 | .viewer { 309 | width: 8.5em; 310 | } 311 | 312 | button { 313 | margin: 0.5em; 314 | } 315 | } 316 | 317 | /*# sourceMappingURL=style.css.map */ 318 | -------------------------------------------------------------------------------- /new_cal/style.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sourceRoot":"","sources":["style.scss"],"names":[],"mappings":"AAAA;EACI;EACA,kBACE;EAEF;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;AAEA;EAEE;EACA;;AAGF;EACE;;;AAIJ;AACA;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;AAEA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACK;EACA;EACL;EACA;EACA;EACA;;;AAKN;AACA;EACE;EACA;EACA;;;AAGF;AACA;EACE;EACA;EACA;;;AAGF;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACE;EACA;EACF;EACA;AAOA;;AALA;EACE;EACA;;AAIF;EACE;EACA;;;AAIJ;AAEA;AACA;EACE;IACE;IACA;;EAGF;IACE;;EAGF;IACE;;;AAIJ;AACA;EACE;IACE;IACA;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;IACA;;EAGF;IACE;;EAGF;IACE;;;AAIJ;AACA;EACE;IACE;IACA;;EAGF;IACE;;EAGF;IACE;;;AAIJ;EACE;IACE;;;EAEF;IACE;;;EAEF;IACE","file":"style.css"} -------------------------------------------------------------------------------- /new_cal/style.scss: -------------------------------------------------------------------------------- 1 | html { 2 | background: #100a1c; 3 | background-image: 4 | radial-gradient(50% 30% ellipse at center top, #201e40 0%, rgba(0, 0, 0, 0) 100%), 5 | radial-gradient(60% 50% ellipse at center bottom, #261226 0%, #100a1c 100%); 6 | background-attachment: fixed; 7 | color: #6cacc5; 8 | } 9 | 10 | body { 11 | color: #6cacc5; 12 | font: 300 18px/1.6 "Source Sans Pro", sans-serif; 13 | margin: 0; 14 | padding: 5em 0 2em; 15 | text-align: center; 16 | } 17 | 18 | h1 { 19 | font-weight: 300; 20 | margin: 0; 21 | } 22 | 23 | /* Gradient text only on Webkit */ 24 | .warning { 25 | background: -webkit-linear-gradient(45deg, #c97874 10%, #463042 90%); 26 | -webkit-background-clip: text; 27 | -webkit-text-fill-color: transparent; 28 | color: #8c5059; 29 | font-weight: 400; 30 | margin: 0 auto 6em; 31 | max-width: 9em; 32 | } 33 | 34 | .calculator { 35 | font-size: 28px; 36 | margin: 0 auto; 37 | width: 10em; 38 | 39 | &::before, 40 | &::after { 41 | content: " "; 42 | display: table; 43 | } 44 | 45 | &::after { 46 | clear: both; 47 | } 48 | } 49 | 50 | /* Calculator after dividing by zero */ 51 | .broken { 52 | animation: broken 2s; 53 | transform: translate3d(0, -2000px, 0); 54 | opacity: 0; 55 | } 56 | 57 | .viewer { 58 | color: #c97874; 59 | float: left; 60 | line-height: 3em; 61 | text-align: right; 62 | text-overflow: ellipsis; 63 | overflow: hidden; 64 | width: 7.5em; 65 | height: 3em; 66 | } 67 | 68 | button { 69 | border: 0; 70 | background: rgba(42, 50, 113, .28); 71 | color: #6cacc5; 72 | cursor: pointer; 73 | float: left; 74 | font: inherit; 75 | margin: 0.25em; 76 | width: 2em; 77 | height: 2em; 78 | transition: all 0.5s; 79 | 80 | &:hover { 81 | background: #201e40; 82 | } 83 | 84 | &:focus { 85 | outline: 0; // Better check accessibility 86 | 87 | /* The value fade-ins that appear */ 88 | &::after { 89 | animation: zoom 1s; 90 | animation-iteration-count: 1; 91 | animation-fill-mode: both; // Fix Firefox from firing animations only once 92 | content: attr(data-num); 93 | cursor: default; 94 | font-size: 100px; 95 | position: absolute; 96 | top: 1.5em; 97 | left: 50%; 98 | text-align: center; 99 | margin-left: -24px; 100 | opacity: 0; 101 | width: 48px; 102 | } 103 | } 104 | } 105 | 106 | /* Same as above, modified for operators */ 107 | .ops:focus::after { 108 | content: attr(data-ops); 109 | margin-left: -210px; 110 | width: 420px; 111 | } 112 | 113 | /* Same as above, modified for result */ 114 | .equals:focus::after { 115 | content: attr(data-result); 116 | margin-left: -300px; 117 | width: 600px; 118 | } 119 | 120 | /* Reset button */ 121 | 122 | .reset { 123 | background: rgba(201, 120, 116, .28); 124 | color: #c97874; 125 | font-weight: 400; 126 | margin-left: -77px; 127 | padding: 0.5em 1em; 128 | position: absolute; 129 | top: -20em; 130 | left: 50%; 131 | width: auto; 132 | height: auto; 133 | 134 | &:hover { 135 | background: #c97874; 136 | color: #100a1c; 137 | } 138 | 139 | /* When button is revealed */ 140 | &.show { 141 | top: 20em; 142 | animation: fadein 4s; 143 | } 144 | } 145 | 146 | /* Light mode theme colors and switcher */ 147 | .light-theme { 148 | background: #D3CCE3; 149 | background-image: radial-gradient(50% 30% ellipse at center top, #eee9f5 0%, rgba(0, 0, 0, 0) 100%), radial-gradient(60% 50% ellipse at center bottom, #d8bfff 0%, #D3CCE3 100%); 150 | 151 | h1 { 152 | color: #5a5569; 153 | } 154 | 155 | button { 156 | color: #5a5569; 157 | 158 | &:hover { 159 | background-color: #423e4d; 160 | color: #D3CCE3; 161 | } 162 | } 163 | } 164 | 165 | /* Styles for dark-light theme switcher */ 166 | .light-theme { 167 | background: #423e4d; 168 | background: -webkit-linear-gradient(to right, #E9E4F0, #D3CCE3); 169 | background: linear-gradient(to right, #E9E4F0, #D3CCE3); 170 | 171 | h1 { 172 | color: #5a5569; 173 | } 174 | 175 | button { 176 | color: #5a5569; 177 | 178 | &:hover { 179 | background-color: #423e4d; 180 | color: #D3CCE3; 181 | } 182 | 183 | &.equals { 184 | color: #5a5569; 185 | } 186 | } 187 | } 188 | 189 | /* Styles for dark-light mode switcher */ 190 | .toggle-container { 191 | position: absolute; 192 | top: 45px; 193 | right: 45px; 194 | } 195 | 196 | input[type=checkbox] { 197 | height: 0; 198 | width: 0; 199 | visibility: hidden; 200 | } 201 | 202 | label { 203 | background: #6cacc5; 204 | position: relative; 205 | width: 65px; 206 | height: 32px; 207 | text-indent: -9999px; 208 | float: right; 209 | border-radius: 20px; 210 | cursor: pointer; 211 | 212 | &:after { 213 | content: ''; 214 | position: absolute; 215 | top: 3px; 216 | left: 4px; 217 | width: 26px; 218 | height: 26px; 219 | background: white; 220 | border-radius: 90px; 221 | transition: 0.3s; 222 | } 223 | } 224 | 225 | input:checked+label { 226 | background: #5a5569; 227 | 228 | &:after { 229 | left: calc(100% - 5px); 230 | transform: translateX(-100%); 231 | } 232 | } 233 | 234 | label:active:after { 235 | width: 56px; 236 | } 237 | 238 | html.transition { 239 | transition: all 750ms !important; 240 | transition-delay: 0 !important; 241 | 242 | * { 243 | transition: all 750ms !important; 244 | transition-delay: 0 !important; 245 | 246 | &:before, 247 | &:after { 248 | transition: all 750ms !important; 249 | transition-delay: 0 !important; 250 | } 251 | } 252 | } 253 | 254 | /* Animations */ 255 | 256 | /* Values that appear onclick */ 257 | @keyframes zoom { 258 | 0% { 259 | transform: scale(.2); 260 | opacity: 1; 261 | } 262 | 263 | 70% { 264 | transform: scale(1); 265 | } 266 | 267 | 100% { 268 | opacity: 0; 269 | } 270 | } 271 | 272 | /* Division by zero animation */ 273 | @keyframes broken { 274 | 0% { 275 | transform: translate3d(0, 0, 0); 276 | opacity: 1; 277 | } 278 | 279 | 5% { 280 | transform: rotate(5deg); 281 | } 282 | 283 | 15% { 284 | transform: rotate(-5deg); 285 | } 286 | 287 | 20% { 288 | transform: rotate(5deg); 289 | } 290 | 291 | 25% { 292 | transform: rotate(-5deg); 293 | } 294 | 295 | 50% { 296 | transform: rotate(45deg); 297 | } 298 | 299 | 70% { 300 | transform: translate3d(0, 2000px, 0); 301 | opacity: 1; 302 | } 303 | 304 | 75% { 305 | opacity: 0; 306 | } 307 | 308 | 100% { 309 | transform: translate3d(0, -2000px, 0); 310 | } 311 | } 312 | 313 | /* Reset button fadein */ 314 | @keyframes fadein { 315 | 0% { 316 | top: 20em; 317 | opacity: 0; 318 | } 319 | 320 | 50% { 321 | opacity: 0; 322 | } 323 | 324 | 100% { 325 | opacity: 1; 326 | } 327 | } 328 | 329 | @media (min-width: 420px) { 330 | .calculator { 331 | width: 12em; 332 | } 333 | 334 | .viewer { 335 | width: 8.5em; 336 | } 337 | 338 | button { 339 | margin: 0.5em; 340 | } 341 | } 342 | -------------------------------------------------------------------------------- /pixel/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Calculator 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |

JavaScript Calculator

17 |

Don't divide by Zero.

18 |
19 | 20 | 21 |
0
22 |
23 | 24 | 25 | 26 | 27 | 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 | -------------------------------------------------------------------------------- /pixel/pixel.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: 'Dosis', sans-serif; 3 | } 4 | 5 | .calculator { 6 | width: 20rem; 7 | height: 33rem; 8 | background-color:#555; 9 | padding: 2rem; 10 | border-radius: 10px; 11 | } 12 | 13 | 14 | 15 | .viewer { 16 | width: 95%; 17 | border-radius: 4px; 18 | margin: 1.5rem 0; 19 | display: flex; 20 | background-color: #7bb581; 21 | height: 3.5rem; 22 | border-bottom: solid .3rem #5d8962; 23 | border-right: solid .3rem #5d8962; 24 | 25 | display: flex; 26 | align-items: center; 27 | padding-left: 10px; 28 | font-size: 34px; 29 | color:darkolivegreen; 30 | } 31 | 32 | .number-pad { 33 | display: grid; 34 | grid-template-columns: 1fr 1fr 1fr 1fr; 35 | grid-template-rows: auto; 36 | grid-gap: 1rem; 37 | justify-items: center; 38 | align-content: space-around; 39 | } 40 | 41 | button { 42 | font-family: 'Dosis', sans-serif; 43 | background-color: grey; 44 | border: none; 45 | border-bottom: 3px solid #42403f; 46 | border-right: 3px solid #42403f; 47 | border-radius: 7px; 48 | width: 3rem; 49 | height: 3rem; 50 | font-size: 20px; 51 | color: #555; 52 | } 53 | 54 | button.clear { 55 | margin-right: 0; 56 | font-size: 30px; 57 | color: #555; 58 | } 59 | 60 | button.ops { 61 | background-color: #ff6a00; 62 | border-bottom: 3px solid #db5700; 63 | border-right: 3px solid #db5700; 64 | color: white; 65 | align-items: center; 66 | justify-content: center; 67 | } 68 | 69 | button.reset { 70 | width: 100%; 71 | font-size: 30px; 72 | margin-top: 1rem; 73 | } 74 | button.num { 75 | font-size: 34px; 76 | } -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | /* 2 | TODO: 3 | Limit number input 4 | Clean up structure 5 | */ 6 | 7 | (function() { 8 | "use strict"; 9 | 10 | // Shortcut to get elements 11 | var el = function(element) { 12 | if (element.charAt(0) === "#") { // If passed an ID... 13 | return document.querySelector(element); // ... returns single element 14 | } 15 | 16 | return document.querySelectorAll(element); // Otherwise, returns a nodelist 17 | }; 18 | // Variables 19 | var viewer = el("#viewer"), // Calculator screen where result is displayed 20 | equals = el("#equals"), // Equal button 21 | nums = el(".num"), // List of numbers 22 | ops = el(".ops"), // List of operators 23 | theNum = "", // Current number 24 | oldNum = "", // First number 25 | resultNum, // Result 26 | operator; // Batman 27 | 28 | // When: Number is clicked. Get the current number selected 29 | var setNum = function() { 30 | //if . was pressed, then only do this if theNum doesn't already include a . 31 | if ((this.getAttribute("data-num")==="." && theNum.indexOf(".") === -1) || this.getAttribute("data-num")!=="."){ 32 | if (resultNum) { // If a result was displayed, reset number 33 | theNum = this.getAttribute("data-num"); 34 | resultNum = ""; 35 | } else { // Otherwise, add digit to previous number (this is a string!) 36 | theNum += this.getAttribute("data-num"); 37 | } 38 | 39 | viewer.innerHTML = theNum; // Display current number 40 | } 41 | 42 | }; 43 | 44 | // When: Number key is pressed. Get the current number selected 45 | var setNumKey = function(keyPressed) { 46 | //if . was pressed, then only do this if theNum doesn't already include a . 47 | if ((keyPressed ==="." && theNum.indexOf(".") === -1) || keyPressed !=="."){ 48 | if (resultNum) { // If a result was displayed, reset number 49 | theNum = keyPressed; 50 | resultNum = ""; 51 | } else { // Otherwise, add digit to previous number (this is a string!) 52 | theNum += keyPressed; 53 | } 54 | 55 | viewer.innerHTML = theNum; // Display current number 56 | } 57 | } 58 | 59 | // When: Operator is clicked. Pass number to oldNum and save operator 60 | var moveNum = function() { 61 | oldNum = theNum; 62 | theNum = ""; 63 | operator = this.getAttribute("data-ops"); 64 | 65 | equals.setAttribute("data-result", ""); // Reset result in attr 66 | }; 67 | 68 | // When: Operator is clicked. Pass number to oldNum and save operator 69 | var moveNumKey = function(wordOperator) { 70 | oldNum = theNum; 71 | theNum = ""; 72 | operator = wordOperator; 73 | 74 | equals.setAttribute("data-result", ""); // Reset result in attr 75 | }; 76 | 77 | // When: Equals is clicked. Calculate result 78 | var displayNum = function() { 79 | 80 | // Convert string input to numbers 81 | oldNum = parseFloat(oldNum); 82 | theNum = parseFloat(theNum); 83 | 84 | // Perform operation 85 | switch (operator) { 86 | case "plus": 87 | resultNum = oldNum + theNum; 88 | break; 89 | 90 | case "minus": 91 | resultNum = oldNum - theNum; 92 | break; 93 | 94 | case "times": 95 | resultNum = oldNum * theNum; 96 | break; 97 | 98 | case "divided by": 99 | resultNum = oldNum / theNum; 100 | break; 101 | 102 | case "square": 103 | resultNum = oldNum ** 2; 104 | break; 105 | 106 | case "cube": 107 | resultNum = oldNum ** 3; 108 | break; 109 | 110 | case "square root": 111 | resultNum = Math.sqrt(oldNum); 112 | break; 113 | 114 | case "power": 115 | resultNum = oldNum ** theNum; 116 | break; 117 | 118 | case "sin": 119 | resultNum = Math.sin(oldNum); 120 | break; 121 | 122 | case "cos": 123 | resultNum = Math.cos(oldNum); 124 | break; 125 | 126 | case "tan": 127 | resultNum = Math.tan(oldNum); 128 | break; 129 | 130 | // If equal is pressed without an operator, keep number and continue 131 | default: 132 | resultNum = theNum; 133 | } 134 | 135 | // If NaN or Infinity returned 136 | if (!isFinite(resultNum)) { 137 | if (!isInt(resultNum) || !isFloat(resultNum)) { // If result is not a number; set off by, eg, double-clicking operators 138 | resultNum = "You broke it!"; 139 | } else { // If result is infinity, set off by dividing by zero 140 | resultNum = "Look at what you've done"; 141 | el('#calculator').classList.add("broken"); // Break calculator 142 | el('#reset').classList.add("show"); // And show reset button 143 | } 144 | } 145 | 146 | // Display result, finally! 147 | viewer.innerHTML = resultNum; 148 | equals.setAttribute("data-result", resultNum); 149 | 150 | // Now reset oldNum & keep result 151 | oldNum = 0; 152 | theNum = resultNum; 153 | 154 | }; 155 | 156 | // When: Clear button is pressed. Clear everything 157 | var clearAll = function() { 158 | oldNum = ""; 159 | theNum = ""; 160 | viewer.innerHTML = "0"; 161 | equals.setAttribute("data-result", resultNum); 162 | }; 163 | 164 | // When: Key is pressed, find out if it's a valid one and send to relevant function if so 165 | var findKey = function(e){ 166 | if((e.key >= 0 && e.key <= 9) || e.key == "."){ 167 | setNumKey(e.key); 168 | } 169 | // Operator keys 170 | switch (e.key) { 171 | case "+": 172 | moveNumKey("plus"); 173 | break; 174 | case "-": 175 | moveNumKey("minus"); 176 | break; 177 | case "*": 178 | moveNumKey("times"); 179 | break; 180 | case "/": 181 | moveNumKey("divided by"); 182 | break; 183 | case "=": 184 | case "Enter": 185 | displayNum(); 186 | break; 187 | case "Escape": 188 | case "c": 189 | case "C": 190 | clearAll(); 191 | break; 192 | // if another key is pressed then do nothing 193 | default: 194 | break; 195 | } 196 | } 197 | 198 | /* The click events */ 199 | 200 | // Add click event to numbers 201 | for (var i = 0, l = nums.length; i < l; i++) { 202 | nums[i].onclick = setNum; 203 | } 204 | 205 | // Add click event to operators 206 | for (var i = 0, l = ops.length; i < l; i++) { 207 | ops[i].onclick = moveNum; 208 | } 209 | 210 | //Add keyboard event to use numbers and basic operators 211 | document.onkeyup = findKey; 212 | 213 | // Add click event to equal sign 214 | equals.onclick = displayNum; 215 | 216 | // Add click event to clear button 217 | el("#clear").onclick = clearAll; 218 | 219 | // Add click event to reset button 220 | el("#reset").onclick = function() { 221 | window.location = window.location; 222 | }; 223 | 224 | }()); 225 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css?family=DM+Serif+Text&display=swap"); 2 | html { 3 | background: #100a1c; 4 | background-image: radial-gradient( 5 | 50% 30% ellipse at center top, 6 | #201e40 0%, 7 | rgba(0, 0, 0, 0) 100% 8 | ), 9 | radial-gradient(60% 50% ellipse at center bottom, #261226 0%, #100a1c 100%); 10 | background-attachment: fixed; 11 | color: #6cacc5; 12 | } 13 | 14 | body { 15 | color: #6cacc5; 16 | font: 300 25px/1.6 "DM Serif Text", serif; 17 | margin: 0; 18 | padding: 5em 0 2em; 19 | text-align: center; 20 | } 21 | 22 | h1 { 23 | font-weight: 300; 24 | margin: 0; 25 | } 26 | 27 | /* Gradient text only on Webkit */ 28 | .warning { 29 | background: -webkit-linear-gradient(45deg, #44e4d1 10%, #d0f980 90%); 30 | -webkit-background-clip: text; 31 | -webkit-text-fill-color: transparent; 32 | color: #44e4d1; 33 | font-weight: 400; 34 | font-family: "DM Serif Text", serif; 35 | margin: 0 auto 6em; 36 | max-width: 9em; 37 | } 38 | 39 | .calculator { 40 | font-size: 28px; 41 | margin: 0 auto; 42 | width: 10em; 43 | } 44 | 45 | .calculator::before, 46 | .calculator::after { 47 | content: " "; 48 | display: table; 49 | } 50 | 51 | .calculator::after { 52 | clear: both; 53 | } 54 | 55 | /* Calculator after dividing by zero */ 56 | .broken { 57 | animation: broken 2s; 58 | transform: translate3d(0, -2000px, 0); 59 | opacity: 0; 60 | } 61 | 62 | .viewer { 63 | border-top: 3px double; 64 | border-right: 3px double; 65 | border-bottom: 3px double; 66 | border-left: 3px double; 67 | padding: 2px; 68 | color: #44e4d1; 69 | margin: 0px auto; 70 | line-height: 3em; 71 | text-align: center; 72 | text-overflow: ellipsis; 73 | overflow: hidden; 74 | width: 10em; 75 | height: 3em; 76 | align-items: center; 77 | } 78 | 79 | button { 80 | border: 0; 81 | background: rgba(42, 50, 113, 0.28); 82 | color: #6cacc5; 83 | cursor: pointer; 84 | float: left; 85 | font: inherit; 86 | margin: 0.25em; 87 | width: 2em; 88 | height: 2em; 89 | transition: all 0.5s; 90 | border-radius: 6px; 91 | } 92 | 93 | button:hover { 94 | background: #201e40; 95 | } 96 | 97 | button:focus { 98 | outline: 0; 99 | /* The value fade-ins that appear */ 100 | } 101 | 102 | button:focus::after { 103 | animation: zoom 1s; 104 | animation-iteration-count: 1; 105 | animation-fill-mode: both; 106 | content: attr(data-num); 107 | cursor: default; 108 | font-size: 100px; 109 | position: absolute; 110 | top: 1.5em; 111 | left: 50%; 112 | text-align: center; 113 | margin-left: -24px; 114 | opacity: 0; 115 | width: 48px; 116 | } 117 | 118 | /* Same as above, modified for operators */ 119 | .ops:focus::after { 120 | content: attr(data-ops); 121 | margin-left: -210px; 122 | width: 420px; 123 | } 124 | 125 | /* Same as above, modified for result */ 126 | .equals:focus::after { 127 | content: attr(data-result); 128 | margin-left: -300px; 129 | width: 600px; 130 | } 131 | 132 | /* Reset button */ 133 | .reset { 134 | background: rgba(201, 120, 116, 0.28); 135 | color: #44e4d1; 136 | font-weight: 400; 137 | margin-left: -77px; 138 | padding: 0.5em 1em; 139 | position: absolute; 140 | top: -20em; 141 | left: 50%; 142 | width: auto; 143 | height: auto; 144 | /* When button is revealed */ 145 | } 146 | 147 | .reset:hover { 148 | background: #44e4d1; 149 | color: #100a1c; 150 | } 151 | 152 | .reset.show { 153 | top: 20em; 154 | animation: fadein 4s; 155 | } 156 | 157 | /* Light mode theme colors and switcher */ 158 | .light-theme { 159 | background: #423e4d; 160 | background: -webkit-linear-gradient(to right, #e9e4f0, #d3cce3); 161 | background: linear-gradient(to right, #e9e4f0, #d3cce3); 162 | } 163 | 164 | .light-theme h1, 165 | .light-theme button { 166 | color: #5a5569; 167 | } 168 | 169 | .light-theme button:hover { 170 | background-color: #423e4d; 171 | color: #d3cce3; 172 | } 173 | 174 | .light-theme button.equals { 175 | color: #5a5569; 176 | } 177 | 178 | .light-theme .viewer { 179 | color: #5a5569; 180 | } 181 | 182 | .light-theme .warning { 183 | background: #5a5569; 184 | -webkit-background-clip: text; 185 | -webkit-text-fill-color: transparent; 186 | color: #5a5569; 187 | } 188 | 189 | /* Styles for dark-light mode switcher */ 190 | .toggle-container { 191 | position: absolute; 192 | top: 45px; 193 | right: 45px; 194 | } 195 | 196 | input[type="checkbox"] { 197 | height: 0; 198 | width: 0; 199 | visibility: hidden; 200 | } 201 | 202 | label { 203 | background: #6cacc5; 204 | position: relative; 205 | width: 65px; 206 | height: 32px; 207 | text-indent: -9999px; 208 | float: right; 209 | border-radius: 20px; 210 | cursor: pointer; 211 | } 212 | 213 | label:after { 214 | content: ""; 215 | position: absolute; 216 | top: 3px; 217 | left: 4px; 218 | width: 26px; 219 | height: 26px; 220 | background: white; 221 | border-radius: 90px; 222 | transition: 0.3s; 223 | } 224 | 225 | input:checked + label { 226 | background: #5a5569; 227 | } 228 | 229 | input:checked + label:after { 230 | left: calc(100% - 5px); 231 | transform: translateX(-100%); 232 | } 233 | 234 | label:active:after { 235 | width: 56px; 236 | } 237 | 238 | html.transition, 239 | html.transition *, 240 | html.transition *:before, 241 | html.transition *:after { 242 | transition: all 750ms !important; 243 | transition-delay: 0 !important; 244 | } 245 | 246 | /* Animations */ 247 | /* Values that appear onclick */ 248 | @keyframes zoom { 249 | 0% { 250 | transform: scale(0.2); 251 | opacity: 1; 252 | } 253 | 254 | 70% { 255 | transform: scale(1); 256 | } 257 | 258 | 100% { 259 | opacity: 0; 260 | } 261 | } 262 | 263 | /* Division by zero animation */ 264 | @keyframes broken { 265 | 0% { 266 | transform: translate3d(0, 0, 0); 267 | opacity: 1; 268 | } 269 | 270 | 5% { 271 | transform: rotate(5deg); 272 | } 273 | 274 | 15% { 275 | transform: rotate(-5deg); 276 | } 277 | 278 | 20% { 279 | transform: rotate(5deg); 280 | } 281 | 282 | 25% { 283 | transform: rotate(-5deg); 284 | } 285 | 286 | 50% { 287 | transform: rotate(45deg); 288 | } 289 | 290 | 70% { 291 | transform: translate3d(0, 2000px, 0); 292 | opacity: 1; 293 | } 294 | 295 | 75% { 296 | opacity: 0; 297 | } 298 | 299 | 100% { 300 | transform: translate3d(0, -2000px, 0); 301 | } 302 | } 303 | 304 | /* Reset button fadein */ 305 | @keyframes fadein { 306 | 0% { 307 | top: 20em; 308 | opacity: 0; 309 | } 310 | 311 | 50% { 312 | opacity: 0; 313 | } 314 | 315 | 100% { 316 | opacity: 1; 317 | } 318 | } 319 | 320 | @media (min-width: 420px) { 321 | .calculator { 322 | width: 12em; 323 | } 324 | 325 | .viewer { 326 | width: 8.5em; 327 | } 328 | 329 | button { 330 | margin: 0.5em; 331 | } 332 | } 333 | 334 | /*# sourceMappingURL=style.css.map */ 335 | -------------------------------------------------------------------------------- /style.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sourceRoot":"","sources":["style.scss"],"names":[],"mappings":"AAAA;EACI;EACA,kBACE;EAEF;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;AAEA;EAEE;EACA;;AAGF;EACE;;;AAIJ;AACA;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;AAEA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACK;EACA;EACL;EACA;EACA;EACA;;;AAKN;AACA;EACE;EACA;EACA;;;AAGF;AACA;EACE;EACA;EACA;;;AAGF;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACE;EACA;EACF;EACA;AAOA;;AALA;EACE;EACA;;AAIF;EACE;EACA;;;AAIJ;AAEA;AACA;EACE;IACE;IACA;;EAGF;IACE;;EAGF;IACE;;;AAIJ;AACA;EACE;IACE;IACA;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;IACA;;EAGF;IACE;;EAGF;IACE;;;AAIJ;AACA;EACE;IACE;IACA;;EAGF;IACE;;EAGF;IACE;;;AAIJ;EACE;IACE;;;EAEF;IACE;;;EAEF;IACE","file":"style.css"} -------------------------------------------------------------------------------- /style.scss: -------------------------------------------------------------------------------- 1 | html { 2 | background: #100a1c; 3 | background-image: 4 | radial-gradient(50% 30% ellipse at center top, #201e40 0%, rgba(0, 0, 0, 0) 100%), 5 | radial-gradient(60% 50% ellipse at center bottom, #261226 0%, #100a1c 100%); 6 | background-attachment: fixed; 7 | color: #6cacc5; 8 | } 9 | 10 | body { 11 | color: #6cacc5; 12 | font: 300 18px/1.6 "Source Sans Pro", sans-serif; 13 | margin: 0; 14 | padding: 5em 0 2em; 15 | text-align: center; 16 | } 17 | 18 | h1 { 19 | font-weight: 300; 20 | margin: 0; 21 | } 22 | 23 | /* Gradient text only on Webkit */ 24 | .warning { 25 | background: -webkit-linear-gradient(45deg, #c97874 10%, #463042 90%); 26 | -webkit-background-clip: text; 27 | -webkit-text-fill-color: transparent; 28 | color: #8c5059; 29 | font-weight: 400; 30 | margin: 0 auto 6em; 31 | max-width: 9em; 32 | } 33 | 34 | .calculator { 35 | font-size: 28px; 36 | margin: 0 auto; 37 | width: 10em; 38 | 39 | &::before, 40 | &::after { 41 | content: " "; 42 | display: table; 43 | } 44 | 45 | &::after { 46 | clear: both; 47 | } 48 | } 49 | 50 | /* Calculator after dividing by zero */ 51 | .broken { 52 | animation: broken 2s; 53 | transform: translate3d(0, -2000px, 0); 54 | opacity: 0; 55 | } 56 | 57 | .viewer { 58 | color: #c97874; 59 | float: left; 60 | line-height: 3em; 61 | text-align: right; 62 | text-overflow: ellipsis; 63 | overflow: hidden; 64 | width: 7.5em; 65 | height: 3em; 66 | } 67 | 68 | button { 69 | border: 0; 70 | background: rgba(42, 50, 113, .28); 71 | color: #6cacc5; 72 | cursor: pointer; 73 | float: left; 74 | font: inherit; 75 | margin: 0.25em; 76 | width: 2em; 77 | height: 2em; 78 | transition: all 0.5s; 79 | 80 | &:hover { 81 | background: #201e40; 82 | } 83 | 84 | &:focus { 85 | outline: 0; // Better check accessibility 86 | 87 | /* The value fade-ins that appear */ 88 | &::after { 89 | animation: zoom 1s; 90 | animation-iteration-count: 1; 91 | animation-fill-mode: both; // Fix Firefox from firing animations only once 92 | content: attr(data-num); 93 | cursor: default; 94 | font-size: 100px; 95 | position: absolute; 96 | top: 1.5em; 97 | left: 50%; 98 | text-align: center; 99 | margin-left: -24px; 100 | opacity: 0; 101 | width: 48px; 102 | } 103 | } 104 | } 105 | 106 | /* Same as above, modified for operators */ 107 | .ops:focus::after { 108 | content: attr(data-ops); 109 | margin-left: -210px; 110 | width: 420px; 111 | } 112 | 113 | /* Same as above, modified for result */ 114 | .equals:focus::after { 115 | content: attr(data-result); 116 | margin-left: -300px; 117 | width: 600px; 118 | } 119 | 120 | /* Reset button */ 121 | 122 | .reset { 123 | background: rgba(201, 120, 116, .28); 124 | color: #c97874; 125 | font-weight: 400; 126 | margin-left: -77px; 127 | padding: 0.5em 1em; 128 | position: absolute; 129 | top: -20em; 130 | left: 50%; 131 | width: auto; 132 | height: auto; 133 | 134 | &:hover { 135 | background: #c97874; 136 | color: #100a1c; 137 | } 138 | 139 | /* When button is revealed */ 140 | &.show { 141 | top: 20em; 142 | animation: fadein 4s; 143 | } 144 | } 145 | 146 | /* Light mode theme colors and switcher */ 147 | .light-theme { 148 | background: #D3CCE3; 149 | background-image: radial-gradient(50% 30% ellipse at center top, #eee9f5 0%, rgba(0, 0, 0, 0) 100%), radial-gradient(60% 50% ellipse at center bottom, #d8bfff 0%, #D3CCE3 100%); 150 | 151 | h1 { 152 | color: #5a5569; 153 | } 154 | 155 | button { 156 | color: #5a5569; 157 | 158 | &:hover { 159 | background-color: #423e4d; 160 | color: #D3CCE3; 161 | } 162 | } 163 | } 164 | 165 | /* Styles for dark-light theme switcher */ 166 | .light-theme { 167 | background: #423e4d; 168 | background: -webkit-linear-gradient(to right, #E9E4F0, #D3CCE3); 169 | background: linear-gradient(to right, #E9E4F0, #D3CCE3); 170 | 171 | h1 { 172 | color: #5a5569; 173 | } 174 | 175 | button { 176 | color: #5a5569; 177 | 178 | &:hover { 179 | background-color: #423e4d; 180 | color: #D3CCE3; 181 | } 182 | 183 | &.equals { 184 | color: #5a5569; 185 | } 186 | } 187 | } 188 | 189 | /* Styles for dark-light mode switcher */ 190 | .toggle-container { 191 | position: absolute; 192 | top: 45px; 193 | right: 45px; 194 | } 195 | 196 | input[type=checkbox] { 197 | height: 0; 198 | width: 0; 199 | visibility: hidden; 200 | } 201 | 202 | label { 203 | background: #6cacc5; 204 | position: relative; 205 | width: 65px; 206 | height: 32px; 207 | text-indent: -9999px; 208 | float: right; 209 | border-radius: 20px; 210 | cursor: pointer; 211 | 212 | &:after { 213 | content: ''; 214 | position: absolute; 215 | top: 3px; 216 | left: 4px; 217 | width: 26px; 218 | height: 26px; 219 | background: white; 220 | border-radius: 90px; 221 | transition: 0.3s; 222 | } 223 | } 224 | 225 | input:checked+label { 226 | background: #5a5569; 227 | 228 | &:after { 229 | left: calc(100% - 5px); 230 | transform: translateX(-100%); 231 | } 232 | } 233 | 234 | label:active:after { 235 | width: 56px; 236 | } 237 | 238 | html.transition { 239 | transition: all 750ms !important; 240 | transition-delay: 0 !important; 241 | 242 | * { 243 | transition: all 750ms !important; 244 | transition-delay: 0 !important; 245 | 246 | &:before, 247 | &:after { 248 | transition: all 750ms !important; 249 | transition-delay: 0 !important; 250 | } 251 | } 252 | } 253 | 254 | /* Animations */ 255 | 256 | /* Values that appear onclick */ 257 | @keyframes zoom { 258 | 0% { 259 | transform: scale(.2); 260 | opacity: 1; 261 | } 262 | 263 | 70% { 264 | transform: scale(1); 265 | } 266 | 267 | 100% { 268 | opacity: 0; 269 | } 270 | } 271 | 272 | /* Division by zero animation */ 273 | @keyframes broken { 274 | 0% { 275 | transform: translate3d(0, 0, 0); 276 | opacity: 1; 277 | } 278 | 279 | 5% { 280 | transform: rotate(5deg); 281 | } 282 | 283 | 15% { 284 | transform: rotate(-5deg); 285 | } 286 | 287 | 20% { 288 | transform: rotate(5deg); 289 | } 290 | 291 | 25% { 292 | transform: rotate(-5deg); 293 | } 294 | 295 | 50% { 296 | transform: rotate(45deg); 297 | } 298 | 299 | 70% { 300 | transform: translate3d(0, 2000px, 0); 301 | opacity: 1; 302 | } 303 | 304 | 75% { 305 | opacity: 0; 306 | } 307 | 308 | 100% { 309 | transform: translate3d(0, -2000px, 0); 310 | } 311 | } 312 | 313 | /* Reset button fadein */ 314 | @keyframes fadein { 315 | 0% { 316 | top: 20em; 317 | opacity: 0; 318 | } 319 | 320 | 50% { 321 | opacity: 0; 322 | } 323 | 324 | 100% { 325 | opacity: 1; 326 | } 327 | } 328 | 329 | @media (min-width: 420px) { 330 | .calculator { 331 | width: 12em; 332 | } 333 | 334 | .viewer { 335 | width: 8.5em; 336 | } 337 | 338 | button { 339 | margin: 0.5em; 340 | } 341 | } 342 | --------------------------------------------------------------------------------