akhaliq/calculator-anycoder
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Modern Calculator</title>7 <style>8 * {9 margin: 0;10 padding: 0;11 box-sizing: border-box;12 }13 14 body {15 min-height: 100vh;16 display: grid;17 place-items: center;18 background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);19 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;20 padding: 20px;21 }22 23 .calculator {24 background: rgba(255, 255, 255, 0.1);25 backdrop-filter: blur(10px);26 border-radius: 20px;27 padding: 30px;28 box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);29 border: 1px solid rgba(255, 255, 255, 0.18);30 max-width: 350px;31 width: 100%;32 }33 34 .display {35 background: rgba(255, 255, 255, 0.9);36 border-radius: 15px;37 padding: 20px;38 margin-bottom: 20px;39 text-align: right;40 min-height: 80px;41 display: flex;42 flex-direction: column;43 justify-content: center;44 box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.1);45 }46 47 .previous-operand {48 color: rgba(0, 0, 0, 0.5);49 font-size: 1.2rem;50 min-height: 1.5rem;51 overflow: hidden;52 }53 54 .current-operand {55 color: #000;56 font-size: 2rem;57 font-weight: 500;58 word-wrap: break-word;59 overflow: hidden;60 }61 62 .buttons {63 display: grid;64 grid-template-columns: repeat(4, 1fr);65 gap: 10px;66 }67 68 button {69 border: none;70 outline: none;71 background: rgba(255, 255, 255, 0.2);72 color: white;73 font-size: 1.5rem;74 padding: 25px;75 border-radius: 15px;76 cursor: pointer;77 transition: all 0.3s ease;78 backdrop-filter: blur(5px);79 border: 1px solid rgba(255, 255, 255, 0.1);80 }81 82 button:hover {83 background: rgba(255, 255, 255, 0.3);84 transform: translateY(-2px);85 box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);86 }87 88 button:active {89 transform: translateY(0);90 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);91 }92 93 .operator {94 background: rgba(255, 149, 0, 0.8);95 font-weight: bold;96 }97 98 .operator:hover {99 background: rgba(255, 149, 0, 0.9);100 }101 102 .equals {103 background: rgba(0, 255, 127, 0.8);104 font-weight: bold;105 }106 107 .equals:hover {108 background: rgba(0, 255, 127, 0.9);109 }110 111 .clear, .delete {112 background: rgba(255, 59, 48, 0.8);113 font-weight: bold;114 }115 116 .clear:hover, .delete:hover {117 background: rgba(255, 59, 48, 0.9);118 }119 120 .span-2 {121 grid-column: span 2;122 }123 124 @media (max-width: 400px) {125 .calculator {126 padding: 20px;127 }128 129 button {130 padding: 20px;131 font-size: 1.3rem;132 }133 }134 </style>135</head>136<body>137 <div class="calculator">138 <div class="display">139 <div class="previous-operand" data-previous-operand></div>140 <div class="current-operand" data-current-operand>0</div>141 </div>142 <div class="buttons">143 <button class="clear span-2" data-clear>C</button>144 <button class="delete" data-delete>⌫</button>145 <button class="operator" data-operation>÷</button>146 <button data-number>7</button>147 <button data-number>8</button>148 <button data-number>9</button>149 <button class="operator" data-operation>×</button>150 <button data-number>4</button>151 <button data-number>5</button>152 <button data-number>6</button>153 <button class="operator" data-operation>-</button>154 <button data-number>1</button>155 <button data-number>2</button>156 <button data-number>3</button>157 <button class="operator" data-operation>+</button>158 <button data-number>0</button>159 <button data-number>.</button>160 <button class="equals span-2" data-equals>=</button>161 </div>162 </div>163 164 <script>165 class Calculator {166 constructor(previousOperandElement, currentOperandElement) {167 this.previousOperandElement = previousOperandElement;168 this.currentOperandElement = currentOperandElement;169 this.clear();170 }171 172 clear() {173 this.currentOperand = '0';174 this.previousOperand = '';175 this.operation = undefined;176 }177 178 delete() {179 if (this.currentOperand === '0') return;180 if (this.currentOperand.length === 1) {181 this.currentOperand = '0';182 } else {183 this.currentOperand = this.currentOperand.slice(0, -1);184 }185 }186 187 appendNumber(number) {188 if (number === '.' && this.currentOperand.includes('.')) return;189 if (this.currentOperand === '0' && number !== '.') {190 this.currentOperand = number;191 } else {192 this.currentOperand = this.currentOperand + number;193 }194 }195 196 chooseOperation(operation) {197 if (this.currentOperand === '') return;198 if (this.previousOperand !== '') {199 this.compute();200 }201 this.operation = operation;202 this.previousOperand = this.currentOperand;203 this.currentOperand = '';204 }205 206 compute() {207 let computation;208 const prev = parseFloat(this.previousOperand);209 const current = parseFloat(this.currentOperand);210 if (isNaN(prev) || isNaN(current)) return;211 212 switch (this.operation) {213 case '+':214 computation = prev + current;215 break;216 case '-':217 computation = prev - current;218 break;219 case '×':220 computation = prev * current;221 break;222 case '÷':223 computation = prev / current;224 break;225 default:226 return;227 }228 229 this.currentOperand = computation.toString();230 this.operation = undefined;231 this.previousOperand = '';232 }233 234 getDisplayNumber(number) {235 const stringNumber = number.toString();236 const integerDigits = parseFloat(stringNumber.split('.')[0]);237 const decimalDigits = stringNumber.split('.')[1];238 let integerDisplay;239 240 if (isNaN(integerDigits)) {241 integerDisplay = '';242 } else {243 integerDisplay = integerDigits.toLocaleString('en', { maximumFractionDigits: 0 });244 }245 246 if (decimalDigits != null) {247 return `${integerDisplay}.${decimalDigits}`;248 } else {249 return integerDisplay;250 }251 }252 253 updateDisplay() {254 this.currentOperandElement.innerText = this.getDisplayNumber(this.currentOperand);255 if (this.operation != null) {256 this.previousOperandElement.innerText = `${this.getDisplayNumber(this.previousOperand)} ${this.operation}`;257 } else {258 this.previousOperandElement.innerText = '';259 }260 }261 }262 263 const previousOperandElement = document.querySelector('[data-previous-operand]');264 const currentOperandElement = document.querySelector('[data-current-operand]');265 const numberButtons = document.querySelectorAll('[data-number]');266 const operationButtons = document.querySelectorAll('[data-operation]');267 const equalsButton = document.querySelector('[data-equals]');268 const deleteButton = document.querySelector('[data-delete]');269 const clearButton = document.querySelector('[data-clear]');270 271 const calculator = new Calculator(previousOperandElement, currentOperandElement);272 273 numberButtons.forEach(button => {274 button.addEventListener('click', () => {275 calculator.appendNumber(button.innerText);276 calculator.updateDisplay();277 });278 });279 280 operationButtons.forEach(button => {281 button.addEventListener('click', () => {282 calculator.chooseOperation(button.innerText);283 calculator.updateDisplay();284 });285 });286 287 equalsButton.addEventListener('click', () => {288 calculator.compute();289 calculator.updateDisplay();290 });291 292 clearButton.addEventListener('click', () => {293 calculator.clear();294 calculator.updateDisplay();295 });296 297 deleteButton.addEventListener('click', () => {298 calculator.delete();299 calculator.updateDisplay();300 });301 302 // Keyboard support303 document.addEventListener('keydown', e => {304 if (e.key >= '0' && e.key <= '9') {305 calculator.appendNumber(e.key);306 calculator.updateDisplay();307 } else if (e.key === '.') {308 calculator.appendNumber('.');309 calculator.updateDisplay();310 } else if (e.key === '+' || e.key === '-') {311 calculator.chooseOperation(e.key);312 calculator.updateDisplay();313 } else if (e.key === '*') {314 calculator.chooseOperation('×');315 calculator.updateDisplay();316 } else if (e.key === '/') {317 e.preventDefault();318 calculator.chooseOperation('÷');319 calculator.updateDisplay();320 } else if (e.key === 'Enter' || e.key === '=') {321 calculator.compute();322 calculator.updateDisplay();323 } else if (e.key === 'Backspace') {324 calculator.delete();325 calculator.updateDisplay();326 } else if (e.key === 'Escape' || e.key === 'c' || e.key === 'C') {327 calculator.clear();328 calculator.updateDisplay();329 }330 });331 </script>332</body>333</html>