├── README.md ├── index.html ├── style └── script.js /README.md: -------------------------------------------------------------------------------- 1 | # neumorphiccalcdarkmode 2 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Calculator 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 |
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 | 69 |
70 |
71 | 72 |
73 |
74 | 75 |
76 |
77 |
78 |
79 |
80 | 84 |
85 |
86 | 87 | 88 | -------------------------------------------------------------------------------- /style: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap"); 2 | p { 3 | font-family: "Roboto Mono", monospace; 4 | } 5 | body { 6 | background: rgba(43, 45, 47, 1); 7 | } 8 | .dark { 9 | background: rgba(43, 45, 47, 1); 10 | .calculator-container { 11 | border: 1px solid #333; 12 | background: rgba(43, 45, 47, 1); 13 | box-shadow: -1px -1px 3px 0 rgba(99, 99, 99, 1), 14 | 1px 1px 3px 0 rgba(0, 0, 0, 1); 15 | .calculator__screen { 16 | background: rgba(43, 45, 47, 1); 17 | box-shadow: inset 1px 1px 5px 0 rgba(0, 0, 0, 1), 18 | inset -2px -2px 5px 0 rgba(99, 99, 99, 1); 19 | input { 20 | color: rgba(255, 255, 255, 0.6); 21 | background: rgba(255, 255, 255, 0); 22 | } 23 | } 24 | .calculator__buttons__container { 25 | .calculator__button { 26 | button { 27 | box-shadow: -1px -1px 3px 0 rgba(99, 99, 99, 1), 28 | 1px 1px 3px 0 rgba(0, 0, 0, 1); 29 | color: rgba(255, 255, 255, 0.6); 30 | background: rgba(0, 0, 0, 0); 31 | &:active { 32 | box-shadow: inset 1px 1px 3px 0 rgba(0, 0, 0, 1), 33 | inset -1px -1px 3px 0 rgba(99, 99, 99, 1); 34 | color: rgba(0, 255, 255, 1); 35 | } 36 | &.selected { 37 | color: rgba(0, 255, 255, 1); 38 | } 39 | } 40 | } 41 | } 42 | } 43 | } 44 | .light { 45 | background: rgba(232, 233, 237, 1); 46 | .calculator-container { 47 | border: 1px solid rgba(255, 255, 255, 1); 48 | background: rgba(232, 233, 237, 1); 49 | box-shadow: 3px 2px 3px 0 rgba(196, 196, 196, 1), 50 | -3px -2px 5px 0 rgba(255, 255, 255, 1); 51 | .calculator__screen { 52 | background: rgba(232, 233, 237, 1); 53 | box-shadow: inset 3px 2px 3px 0 rgba(196, 196, 196, 1), 54 | inset -3px -2px 5px 0 rgba(255, 255, 255, 1); 55 | input { 56 | color: rgba(0, 0, 0, 0.6); 57 | background: rgba(255, 255, 255, 0); 58 | } 59 | } 60 | .calculator__buttons__container { 61 | .calculator__button { 62 | button { 63 | box-shadow: 3px 2px 3px 0 rgba(196, 196, 196, 1), 64 | -3px -2px 5px 0 rgba(255, 255, 255, 1); 65 | color: rgba(0, 0, 0, 0.6); 66 | background: rgba(0, 0, 0, 0); 67 | &:active { 68 | box-shadow: inset 1px 1px 3px 0 rgba(196, 196, 196, 1), 69 | inset -1px -1px 3px 0 rgba(255, 255, 255, 1); 70 | color: rgba(0, 255, 255, 1); 71 | } 72 | &.selected { 73 | color: rgba(0, 255, 255, 1); 74 | } 75 | } 76 | } 77 | } 78 | } 79 | } 80 | #wrapper { 81 | width: 100vw; 82 | display: flex; 83 | justify-content: center; 84 | .calculator-container { 85 | width: 350px; 86 | height: 650px; 87 | border-radius: 5px; 88 | margin: 80px 0; 89 | .calculator__screen { 90 | width: 320px; 91 | height: 220px; 92 | margin: 15px; 93 | display: flex; 94 | padding: 15px; 95 | box-sizing: border-box; 96 | justify-content: flex-end; 97 | border-radius: 3px; 98 | input { 99 | width: 100%; 100 | padding: 10px; 101 | font-size: 40px; 102 | border: none; 103 | height: 40px; 104 | } 105 | } 106 | .calculator__buttons__container { 107 | margin: 25px 15px 15px 15px; 108 | width: 320px; 109 | height: 375px; 110 | display: flex; 111 | flex-wrap: wrap; 112 | justify-content: space-around; 113 | .calculator__button { 114 | flex: 0 0 25%; 115 | border-radius: 50%; 116 | &:last-child { 117 | flex: 0 0 50%; 118 | border-radius: 25%; 119 | button { 120 | width: 145px; 121 | border-radius: 15px; 122 | font-size: 30px; 123 | } 124 | } 125 | button { 126 | width: 65px; 127 | height: 65px; 128 | border-radius: 10px; 129 | line-height: 65px; 130 | text-align: center; 131 | display: block; 132 | margin: auto; 133 | font-size: 22px; 134 | border: 0; 135 | &:focus { 136 | outline: 0; 137 | } 138 | } 139 | } 140 | } 141 | } 142 | } 143 | #light-dark-mode { 144 | position: absolute; 145 | top: 10px; 146 | left: 30px; 147 | .switch { 148 | display: inline-block; 149 | width: 80px; 150 | height: 44px; 151 | input { 152 | opacity: 0; 153 | width: 0; 154 | height: 0; 155 | &:checked + .slider { 156 | background-color: #f2f3f7; 157 | box-shadow: inset -3px -2px 5px #ffffff, inset 3px 2px 5px #c4c4c4; 158 | &:before { 159 | background-color: rgb(43, 45, 47); 160 | box-shadow: inset 1px 1px 5px 0 rgba(0, 0, 0, 1), 161 | inset -2px -2px 5px 0 rgba(99, 99, 99, 1); 162 | } 163 | } 164 | } 165 | } 166 | .slider { 167 | position: absolute; 168 | cursor: pointer; 169 | top: 0; 170 | left: 0; 171 | right: 0; 172 | bottom: 0; 173 | background-color: rgb(43, 45, 47); 174 | box-shadow: inset 1px 1px 5px 0 rgba(0, 0, 0, 1), 175 | inset -2px -2px 5px 0 rgba(99, 99, 99, 1); 176 | transition: all ease 0.4s; 177 | border-radius: 34px; 178 | &:before { 179 | position: absolute; 180 | content: ""; 181 | height: 36px; 182 | width: 36px; 183 | left: 4px; 184 | bottom: 4px; 185 | background-color: #f2f3f7; 186 | box-shadow: inset -2px -1px 3px #ffffff, inset 2px 1px 3px #c4c4c4; 187 | transition: all ease 0.5s; 188 | border-radius: 50%; 189 | } 190 | } 191 | } 192 | input:checked + .slider:before { 193 | transform: translateX(36px); 194 | } -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | const calculator = { 2 | num1: "", 3 | num2: "", 4 | operator1: "", 5 | operator2: "", 6 | answer: null, 7 | digitCount: 0 8 | }; 9 | 10 | let output = document.getElementById("output"); 11 | 12 | function resetDisplay() { 13 | (calculator.num1 = ""), 14 | (calculator.num2 = ""), 15 | (calculator.operator1 = ""), 16 | (calculator.operator2 = ""), 17 | (calculator.answer = null), 18 | (calculator.digitCount = 0); 19 | } 20 | function resetAfterEquals() { 21 | (calculator.operator1 = ""), 22 | (calculator.num1 = ""), 23 | (calculator.num2 = ""), 24 | (calculator.digitCount = 0); 25 | } 26 | function updateDisplay() { 27 | if (calculator.operator1 == "" && calculator.answer == null) { 28 | output.value = calculator.num1; 29 | } 30 | if (calculator.operator1 != "") { 31 | output.value = calculator.num2; 32 | } 33 | if (calculator.answer != null) { 34 | output.value = calculator.answer; 35 | } 36 | } 37 | 38 | function inputDigit(digit) { 39 | if (calculator.operator1 === "" && calculator.answer == null) { 40 | if (calculator.digitCount == 9) { 41 | return; 42 | } 43 | calculator.num1 += digit; 44 | } 45 | if (calculator.operator1 !== "") { 46 | if (calculator.num2 == "") { 47 | calculator.digitCount = 0; 48 | } 49 | if (calculator.digitCount == 9) { 50 | return; 51 | } 52 | calculator.num2 += digit; 53 | } 54 | if (calculator.answer != null) { 55 | calculator.num1 += digit; 56 | calculator.answer = null; 57 | } 58 | calculator.digitCount++; 59 | } 60 | 61 | function handleOperator(operator) { 62 | Number.prototype.countDecimals = function () { 63 | if (Math.floor(this.valueOf()) === this.valueOf()) return 0; 64 | return this.toString().split(".")[1].length || 0; 65 | }; 66 | if (calculator.operator1 === "") { 67 | calculator.operator1 = operator; 68 | digitCount = 0; 69 | } 70 | if (calculator.operator1 != "" && calculator.num2 === "") { 71 | calculator.operator1 = operator; 72 | digitCount = 0; 73 | } 74 | if (calculator.num1 == "" && calculator.answer != null) { 75 | calculator.num1 = calculator.answer; 76 | calculator.answer = null; 77 | } 78 | 79 | function addition() { 80 | return parseFloat(calculator.num1) + parseFloat(calculator.num2); 81 | } 82 | 83 | function subtraction() { 84 | return parseFloat(calculator.num1) - parseFloat(calculator.num2); 85 | } 86 | 87 | function multiply() { 88 | return parseFloat(calculator.num1) * parseFloat(calculator.num2); 89 | } 90 | 91 | function divide() { 92 | return parseFloat(calculator.num1) / parseFloat(calculator.num2); 93 | } 94 | 95 | if (operator === "=") { 96 | let temp = 0; 97 | if (calculator.operator1 != "" && calculator.num2 === "") { 98 | return; 99 | } 100 | if (calculator.operator1 === "+") { 101 | temp = addition(); 102 | } 103 | if (calculator.operator1 === "-") { 104 | temp = subtraction(); 105 | } 106 | if (calculator.operator1 === "*") { 107 | temp = multiply(); 108 | } 109 | if (calculator.operator1 === "/") { 110 | temp = divide(); 111 | } 112 | if (temp.toString().includes(".")) { 113 | calculator.answer = 114 | temp.countDecimals() > 6 ? temp.toExponential(6) : temp; 115 | } 116 | if (!temp.toString().includes(".")) { 117 | calculator.answer = 118 | temp.toString().length > 9 ? temp.toExponential(6) : temp; 119 | } 120 | resetAfterEquals(); 121 | } 122 | 123 | if (operator === "+/-") { 124 | if (calculator.num1 == "") { 125 | return; 126 | } 127 | if ( 128 | calculator.num1 != "" && 129 | calculator.num2 == "" && 130 | calculator.answer == null 131 | ) { 132 | calculator.num1 *= -1; 133 | } 134 | if ( 135 | calculator.num1 != "" && 136 | calculator.num2 == "" && 137 | calculator.answer != null 138 | ) { 139 | calculator.num1 *= -1; 140 | calculator.answer *= -1; 141 | } 142 | if (calculator.num2 != "") { 143 | calculator.num2 *= -1; 144 | } 145 | } 146 | } 147 | 148 | function handlePercent() { 149 | if (calculator.operator1 == "") { 150 | calculator.answer = calculator.num1 / 100; 151 | } 152 | if (calculator.operator1 == "-") { 153 | calculator.answer = 154 | parseFloat(calculator.num1) * (parseFloat(calculator.num2) / 100); 155 | } 156 | if (calculator.operator1 == "+") { 157 | calculator.answer = 158 | (parseFloat(calculator.num1) / 100) * parseFloat(calculator.num2); 159 | } 160 | if (calculator.operator1 == "*") { 161 | calculator.answer = 162 | parseFloat(calculator.num1) + 163 | parseFloat(calculator.num1) * (parseFloat(calculator.num2) / 100); 164 | } 165 | resetAfterEquals(); 166 | } 167 | 168 | function handleDecimal(decimal) { 169 | if (calculator.operator1 == "") { 170 | if (!calculator.num1.includes(decimal)) { 171 | calculator.num1 += decimal; 172 | } 173 | } 174 | if (calculator.operator1 != "") { 175 | if (!calculator.num2.includes(decimal)) { 176 | calculator.num2 += decimal; 177 | } 178 | } 179 | } 180 | 181 | //////// handle button push 182 | const keys = document.querySelector(".calculator__buttons__container"); 183 | let current = ""; 184 | keys.addEventListener("click", (event) => { 185 | const { target } = event; 186 | if (!target.matches("button")) { 187 | return; 188 | } 189 | 190 | if (target.classList.contains("digit")) { 191 | inputDigit(target.value); 192 | } 193 | 194 | if (target.classList.contains("operator")) { 195 | if (target.value != "=") { 196 | if (target.value == current.value) { 197 | current.classList.remove("selected"); 198 | } 199 | if (target.value != current.value && target.value != "+/-") { 200 | if (current != "") { 201 | current.classList.remove("selected"); 202 | } 203 | target.classList.toggle("selected"); 204 | } 205 | current = document.querySelector(".selected") 206 | ? document.querySelector(".selected") 207 | : ""; 208 | } 209 | if (target.value == "=") { 210 | if (current != "") { 211 | current.classList.remove("selected"); 212 | current = ""; 213 | } 214 | } 215 | 216 | handleOperator(target.value); 217 | } 218 | 219 | if (target.classList.contains("percent")) { 220 | if (current != "") { 221 | current.classList.remove("selected"); 222 | current = ""; 223 | } 224 | handlePercent(target.value); 225 | } 226 | 227 | if (target.classList.contains("decimal")) { 228 | handleDecimal(target.value); 229 | } 230 | 231 | if (target.classList.contains("allClear")) { 232 | if (current != "") { 233 | current.classList.remove("selected"); 234 | current = ""; 235 | } 236 | resetDisplay(); 237 | } 238 | 239 | updateDisplay(); 240 | }); 241 | 242 | document.getElementById("switchBox").addEventListener("click", function () { 243 | let mainContainer = document.getElementById("wrapper"); 244 | mainContainer.classList.toggle("dark"); 245 | mainContainer.classList.toggle("light"); 246 | }); --------------------------------------------------------------------------------