calaulator

├── README.md ├── index.js ├── styles.css └── index.html /README.md: -------------------------------------------------------------------------------- 1 | # calculator-using-html-css-and-js -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | let input = document.getElementById(`inputBox`); 2 | let buttons = document.querySelectorAll(`button`); 3 | let string = ""; 4 | let arr = Array.from(buttons); 5 | arr.forEach(button => { 6 | button.addEventListener('click', (e) => { 7 | if (e.target.innerHTML == '=') { 8 | string = eval(string); 9 | input.value = string; 10 | } 11 | else if (e.target.innerHTML == 'AC') { 12 | string = ""; 13 | input.value = string; 14 | } 15 | else if (e.target.innerHTML == 'DEL') { 16 | string = string.substring(0, string.length - 1); 17 | input.value = string; 18 | } 19 | 20 | else { 21 | string += e.target.innerHTML; 22 | input.value = string; 23 | } 24 | 25 | }) 26 | }) -------------------------------------------------------------------------------- /styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | font-family: 'Alfa Slab One', serif; 6 | font-family: 'Poppins', sans-serif; 7 | } 8 | 9 | body { 10 | width: 100%; 11 | height: 100vh; 12 | display: flex; 13 | justify-content: center; 14 | align-items: center; 15 | background: linear-gradient(45deg, #0a0a0a, #3a4452); 16 | 17 | 18 | } 19 | 20 | 21 | 22 | #calculator { 23 | border: 1px solid #717377; 24 | padding: 20px; 25 | border-radius: 16px; 26 | background: transparent; 27 | box-shadow: 0px 3px 15px rgba(113, 115, 119, 0.5); 28 | } 29 | 30 | input { 31 | width: 320px; 32 | border: none; 33 | padding: 24px; 34 | margin: 10px; 35 | background: transparent; 36 | box-shadow: 0px 3px 15px rgba(84, 84, 84, 01); 37 | font-family: 40px; 38 | text-align: right; 39 | cursor: pointer; 40 | color: white; 41 | } 42 | 43 | input::placeholder { 44 | color: white; 45 | } 46 | 47 | button { 48 | border: none; 49 | width: 60px; 50 | height: 60px; 51 | margin: 10px; 52 | border-radius: 50%; 53 | background: transparent; 54 | color: white; 55 | font-size: 20px; 56 | box-shadow: -8px -8px 15px rgba(255, 255, 255, 0.1); 57 | cursor: pointer; 58 | } 59 | 60 | .equal { 61 | background-color: orange; 62 | } 63 | 64 | .operator { 65 | color: aqua; 66 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | calaulator 9 | 10 | 11 | 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 | --------------------------------------------------------------------------------