Calculator

├── index.html ├── index.js └── style.css /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Calculator 5 | 6 | 7 | 8 |

9 |

10 | 41 |

42 |

43 | 44 | 45 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | function Solve(val) { 2 | var v = document.getElementById('res'); 3 | v.value += val; 4 | } 5 | function Result() { 6 | var num1 = document.getElementById('res').value; 7 | try { 8 | var num2 = eval(num1.replace('x', '*')); 9 | document.getElementById('res').value = num2; 10 | } catch { 11 | document.getElementById('res').value = 'Error'; 12 | } 13 | } 14 | function Clear() { 15 | var inp = document.getElementById('res'); 16 | inp.value = ''; 17 | } 18 | function Back() { 19 | var ev = document.getElementById('res'); 20 | ev.value = ev.value.slice(0, -1); 21 | } 22 | document.addEventListener('keydown', function (event) { 23 | const key = event.key; 24 | const validKeys = '0123456789+-*/.%'; 25 | if (validKeys.includes(key)) { 26 | Solve(key === '*' ? 'x' : key); 27 | } else if (key === 'Enter') { 28 | Result(); 29 | } else if (key === 'Backspace') { 30 | Back(); 31 | } else if (key.toLowerCase() === 'c') { 32 | Clear(); 33 | } 34 | }); -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | #calc { 7 | width: 100%; 8 | height: 100vh; 9 | display: flex; 10 | justify-content: center; 11 | align-items: center; 12 | } 13 | #content { 14 | background: #2c302c; 15 | padding: 20px; 16 | border-radius: 10px; 17 | 18 | } 19 | #content form input { 20 | border: 0; 21 | outline: 0; 22 | width: 50px; 23 | height: 50px; 24 | border-radius: 8px; 25 | font-size: 15px; 26 | margin: 10px; 27 | cursor: pointer; 28 | } 29 | #backspace { 30 | background-color: rgb(237, 89, 30); 31 | color: white; 32 | } 33 | #res { 34 | padding: 10px; 35 | } 36 | #clear { 37 | background-color: rgb(237, 89, 30); 38 | color: white; 39 | } 40 | form #output { 41 | display: flex; 42 | justify-content: flex-end; 43 | margin: 15px 0; 44 | } 45 | form #output input { 46 | text-align: right; 47 | flex: 1; 48 | font-size: 25px; 49 | } --------------------------------------------------------------------------------