├── index.html ├── scripts.js └── style.css /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Calculator 8 | 9 | 10 | 11 |
12 |
13 |
14 | 15 |
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 | -------------------------------------------------------------------------------- /scripts.js: -------------------------------------------------------------------------------- 1 | 2 | class Calculator{ 3 | constructor(previousTextElement, currentTextElement) { 4 | this.previousTextElement = previousTextElement 5 | this.currentTextElement = currentTextElement 6 | this.clear() 7 | } 8 | 9 | clear(){ 10 | this.current = '' 11 | this.previous = '' 12 | this.operation = undefined 13 | } 14 | 15 | delete(){ 16 | this.current = this.current.toString().slice(0, -1) 17 | } 18 | 19 | appendNumber(number) { 20 | if (number === '.' && this.current.includes('.')) return; 21 | this.current = this.current.toString() + number.toString() 22 | } 23 | 24 | chooseOperation(operation) { 25 | if (this.current === '') return 26 | if (this.previous !== '') { 27 | this.compute() 28 | } 29 | 30 | this.operation = operation 31 | this.previous = this.current 32 | this.current = '' 33 | } 34 | 35 | compute() { 36 | let computation 37 | const prev = parseFloat(this.previous) 38 | const current = parseFloat(this.current) 39 | if (isNaN(prev) || isNaN(current)) return 40 | 41 | switch (this.operation) { 42 | case '+': 43 | computation = prev + current 44 | break 45 | case '-': 46 | computation = prev - current 47 | break 48 | case '*': 49 | computation = prev * current 50 | break 51 | case '÷': 52 | computation = prev / current 53 | break 54 | default: 55 | return 56 | } 57 | this.current = computation.toString() 58 | this.operation = undefined 59 | this.previous = '' 60 | } 61 | 62 | getDisplayNumber(number) { 63 | 64 | let str = '' 65 | const arr = number.split('.') 66 | 67 | for(let i in arr[0]){ 68 | if(Number(i) !== 0 && i%3 === 0) str += ',' 69 | str += arr[0][i] 70 | } 71 | 72 | if(number.endsWith('.')) str += '.' 73 | if(arr[1]) str += '.'+arr[1] 74 | 75 | return str 76 | } 77 | 78 | updateDisplay() { 79 | this.currentTextElement.innerText = 80 | this.getDisplayNumber(this.current) 81 | if (this.operation) { 82 | this.previousTextElement.innerText = 83 | `${this.getDisplayNumber(this.previous)} ${this.operation}` 84 | } else { 85 | this.previousTextElement.innerText = '' 86 | } 87 | } 88 | } 89 | 90 | const numberButtons = document.querySelectorAll('[data-number]') 91 | const operationButtons = document.querySelectorAll('[data-operation]') 92 | 93 | const equalsButton = document.querySelector('[data-equals]') 94 | const deleteButton = document.querySelector('[data-delete]') 95 | const clearButton = document.querySelector('[data-clear]') 96 | 97 | const previousTextElement = document.querySelector('[data-previous]') 98 | const currentTextElement = document.querySelector('[data-current]') 99 | 100 | 101 | 102 | const calculator = new Calculator(previousTextElement, currentTextElement) 103 | 104 | 105 | numberButtons.forEach(button => { 106 | button.addEventListener('click', () => { 107 | calculator.appendNumber(button.innerText) 108 | calculator.updateDisplay() 109 | }) 110 | }) 111 | 112 | operationButtons.forEach(button => { 113 | button.addEventListener('click', () => { 114 | calculator.chooseOperation(button.innerText) 115 | calculator.updateDisplay() 116 | }) 117 | }) 118 | 119 | equalsButton.addEventListener('click', button => { 120 | calculator.compute() 121 | calculator.updateDisplay() 122 | }) 123 | 124 | clearButton.addEventListener('click', button => { 125 | calculator.clear() 126 | calculator.updateDisplay() 127 | }) 128 | 129 | deleteButton.addEventListener('click', button => { 130 | calculator.delete() 131 | calculator.updateDisplay() 132 | }) -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Parisienne&display=swap'); 2 | 3 | *, *::before, *::after{ 4 | box-sizing: border-box; 5 | font-family: sans-serif; 6 | font-weight: normal; 7 | font-size: 10px; 8 | } 9 | 10 | body{ 11 | padding:0; 12 | margin: 0; 13 | background: rgba(255, 192, 203, 0.7); 14 | display: flex; 15 | justify-content: center; 16 | align-items: center; 17 | } 18 | ::selection { 19 | background: transparent; 20 | } 21 | .layout{ 22 | width: 350px; 23 | height: 540px; 24 | background: pink; 25 | border-radius: 20px; 26 | box-shadow: 2px 2px 15px rgb(248, 147, 165); 27 | } 28 | 29 | .calculator{ 30 | height: 500px; 31 | display: grid; 32 | justify-content: center; 33 | grid-template-columns: repeat(4, 70px); 34 | grid-template-rows: minmax(100px, auto) repeat(5, 70px); 35 | } 36 | 37 | .calculator > button{ 38 | margin: 6px; 39 | color: #fff; 40 | font-size: 2rem; 41 | outline: none; 42 | cursor: pointer; 43 | } 44 | 45 | .span-two{ 46 | grid-column: span 2; 47 | height: 90%; 48 | width: 95%; 49 | border-radius: 5em; 50 | } 51 | 52 | button{ 53 | border-radius: 50%; 54 | border: none; 55 | background: linear-gradient(315deg, #fc737c, pink); 56 | box-shadow: 2px 2px 6px #f58787; 57 | } 58 | 59 | button:active{ 60 | background: linear-gradient(315deg, pink, #fc737c); 61 | } 62 | 63 | .output{ 64 | grid-column: 1/ -1; 65 | box-shadow : inset -2px -2px 10px #f17171; 66 | display: flex; 67 | align-items: flex-end; 68 | justify-content: space-around; 69 | flex-direction:column; 70 | padding: 0px 20px; 71 | word-wrap: break-word; 72 | word-break: break-all; 73 | border-radius: 30px; 74 | margin: 35px 0 30px 0; 75 | } 76 | .output .previous { 77 | color: rgb(255, 255, 255, .7); 78 | font-size: 20px; 79 | margin-top:10px; 80 | } 81 | 82 | .output .current { 83 | color: #fff; 84 | font-size: 25px; 85 | margin: 5px 0; 86 | } 87 | 88 | 89 | footer{ 90 | position: relative; 91 | margin: 20px 0; 92 | top: 10vh; 93 | height: 50px; 94 | width: 100%; 95 | text-align: center; 96 | color: #fff; 97 | font-size: 32px; 98 | font-weight: bold; 99 | text-shadow: 2px 2px 5px #fc737c; 100 | font-family: 'Parisienne', cursive; 101 | } 102 | a{ 103 | color: #fff; 104 | font-size: 35px; 105 | font-weight: bold; 106 | text-decoration:none; 107 | font-family: 'Parisienne', cursive; 108 | text-shadow: 2px 2px 5px #fc737c; 109 | } 110 | --------------------------------------------------------------------------------