Calculator

├── Assets └── Calculator-Image.png ├── CSS └── index.css ├── HTML └── index.html ├── JS └── index.js ├── LICENSE └── README.md /Assets/Calculator-Image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheuscristian/JavaScript-Calculator/0c75f61a33e1f2422910e81bb191d7b2b944705f/Assets/Calculator-Image.png -------------------------------------------------------------------------------- /CSS/index.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; 4 | -webkit-user-select: none; 5 | -moz-user-select: none; 6 | -ms-user-select: none; 7 | user-select: none; 8 | } 9 | 10 | body { 11 | margin: 0; 12 | overflow: hidden; 13 | min-height: 100vh; 14 | } 15 | 16 | main { 17 | margin: auto; 18 | width: 100%; 19 | height: 100vh; 20 | padding-top: 20px; 21 | } 22 | 23 | main > * { 24 | width: fit-content; 25 | margin: auto; 26 | text-align: center; 27 | } 28 | 29 | span { 30 | width: 70px; 31 | height: 55px; 32 | border: 3px solid rgb(66, 66, 66); 33 | background-color: rgb(175, 175, 175); 34 | font-size: 200%; 35 | font-weight: lighter; 36 | } 37 | 38 | span:hover { 39 | cursor: pointer; 40 | filter: brightness(90%); 41 | } 42 | 43 | #numbers { 44 | display: grid; 45 | grid-template-columns: repeat(4, 70px); 46 | } 47 | 48 | #display { 49 | display: block; 50 | min-width: min-content; 51 | min-height: min-content; 52 | width: 280px; 53 | height: 60px; 54 | margin-bottom: 5px; 55 | text-align: right; 56 | font-size: 200%; 57 | border: 2px solid rgb(36, 36, 36); 58 | padding: 5px; 59 | color: rgb(255, 255, 255); 60 | background-color: rgba(0, 0, 0, 0.226); 61 | } 62 | 63 | #calculator { 64 | width: 295px; 65 | height: 380px; 66 | border-radius: 5px; 67 | display: flex; 68 | flex-direction: column; 69 | justify-content: center; 70 | align-items: center; 71 | background-color: rgb(66, 66, 66); 72 | box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.514); 73 | } 74 | 75 | .operator { 76 | background-color: rgb(202, 150, 150); 77 | } 78 | 79 | #equal { 80 | background-color: rgb(150, 207, 207); 81 | } -------------------------------------------------------------------------------- /HTML/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Calculator 8 | 9 | 10 | 11 |

12 |

13 |

14 |

15 | 7 16 | 8 17 | 9 18 | × 19 | 4 20 | 5 21 | 6 22 | – 23 | 1 24 | 2 25 | 3 26 | + 27 | . 28 | 0 29 | ÷ 30 | = 31 |

32 |

33 |

34 | 35 | 36 | -------------------------------------------------------------------------------- /JS/index.js: -------------------------------------------------------------------------------- 1 | const calculator = { 2 | result: 0, 3 | currentValue: '', 4 | currentOperator: '', 5 | displayValue: '', 6 | lastValue: '' 7 | } 8 | 9 | const display = document.getElementById("display"); 10 | 11 | let lastOperationDid = false 12 | 13 | function calculate() { 14 | const n1 = parseFloat(calculator.lastValue); 15 | const n2 = parseFloat(calculator.currentValue); 16 | 17 | if (!Number.isNaN(n1) && !Number.isNaN(n2)) { 18 | let res = 0; 19 | 20 | if (calculator.currentOperator == '+') { 21 | res = calculator.displayValue = n1 + n2; 22 | } else if (calculator.currentOperator == '–') { 23 | res = calculator.displayValue = n1 - n2; 24 | } else if (calculator.currentOperator == '×') { 25 | res = calculator.displayValue = n1 * n2; 26 | } else if (calculator.currentOperator == '÷') { 27 | res = calculator.displayValue = n1 / n2; 28 | } 29 | 30 | calculator.currentValue = ''; 31 | calculator.lastValue = res; 32 | lastOperationDid = true; 33 | calculator.currentOperator = ''; 34 | } 35 | } 36 | 37 | function updateDisplay(value) { 38 | if (value == '+' || value == '–' || value == '×' || value == '÷') { 39 | if (calculator.currentOperator == '') { 40 | calculator.displayValue = ''; 41 | if (calculator.currentValue != '' && calculator.lastValue == '') calculator.lastValue = calculator.currentValue; 42 | calculator.currentValue = '' 43 | } else { 44 | calculate(); 45 | } 46 | calculator.currentOperator = value; 47 | } else if (value == '=') { 48 | calculate(); 49 | } else { 50 | if (lastOperationDid) { 51 | lastOperationDid = false; 52 | calculator.displayValue = ''; 53 | } 54 | calculator.displayValue += value; 55 | calculator.currentValue += value; 56 | } 57 | 58 | display.innerText = calculator.displayValue; 59 | } 60 | 61 | const spans = document.querySelectorAll("span"); 62 | 63 | spans.forEach((v) => { 64 | v.addEventListener("click", (e) => { 65 | updateDisplay(e.path[0].innerText); 66 | }) 67 | }) -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Matheus Cristian 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 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 THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # JavaScript Calculator 2 | 3 | #### A simple calculator made with JavaScript. 4 | 5 | ![Calculator-Image](https://github.com/matheuscristian/JavaScript-Calculator/blob/main/Assets/Calculator-Image.png) --------------------------------------------------------------------------------