├── README.md ├── index.html └── src ├── css └── styles.css └── js └── script.js /README.md: -------------------------------------------------------------------------------- 1 | # Calculadora_js 2 | 3 | Calculadora básica com javascript puro 4 | 5 |
6 | 7 | 8 |
9 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Calculadora basica 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 | 41 | 42 | 43 | 44 | 45 | 46 | 47 |
48 |
49 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /src/css/styles.css: -------------------------------------------------------------------------------- 1 | *{ 2 | font-family: sans-serif; 3 | margin: 0; 4 | padding: 0; 5 | outline: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | .container{ 10 | height: 100vh; 11 | display: flex; 12 | justify-content: center; 13 | align-items: center; 14 | transition: .2s; 15 | } 16 | 17 | table{ 18 | position: relative; 19 | padding: 20px; 20 | border-radius: 10px; 21 | box-shadow: 0 0 30px #000; 22 | width: 300px; 23 | } 24 | 25 | .mode{ 26 | width: 25px; 27 | height: 25px; 28 | border-radius: 50%; 29 | position: absolute; 30 | right: 20px; 31 | top: 20px; 32 | } 33 | 34 | .display{ 35 | margin-top: 100px; 36 | padding: 10px; 37 | width: 100%; 38 | font-size: 30px; 39 | text-align: right; 40 | border:none; 41 | background-color: transparent; 42 | } 43 | 44 | button{ 45 | width: 60px; 46 | height: 60px; 47 | border: none; 48 | border-radius:50% ; 49 | font-size: 20px; 50 | margin: 5px; 51 | cursor: pointer; 52 | transition: all .2s ease; 53 | } 54 | 55 | button:hover{ 56 | transform: scale(1.1); 57 | } 58 | 59 | /* light theme */ 60 | 61 | 62 | .light{ 63 | background-color: rgb(126, 165, 250); 64 | } 65 | 66 | .calculator-light{ 67 | background-color: #fff; 68 | } 69 | 70 | .calculator-light .mode{ 71 | background-color: #1c1c1c; 72 | } 73 | 74 | .calculator-light button.btn-number{ 75 | background-color: #c3eaff; 76 | color: #000; 77 | } 78 | 79 | .calculator-light button.btn-operation{ 80 | background-color: #ffd0f2; 81 | color: #f967f3; 82 | } 83 | 84 | .calculator-light button.btn-equal{ 85 | background-color: #adf9d7; 86 | color: #000; 87 | } 88 | 89 | /* dark theme */ 90 | 91 | 92 | .dark{ 93 | background-color: #254655; 94 | } 95 | .calculator-dark{ 96 | background-color: #071115; 97 | } 98 | 99 | .calculator-dark .display{ 100 | color: #fff; 101 | } 102 | .calculator-dark .mode{ 103 | background-color: #fff; 104 | } 105 | 106 | .calculator-dark button.btn-number{ 107 | background-color: #1b2f38; 108 | color: #fff; 109 | } 110 | 111 | .calculator-dark button.btn-operation{ 112 | background-color: #8f2286; 113 | color: #f967f3; 114 | } 115 | 116 | .calculator-dark button.btn-equal{ 117 | background-color: #77143a; 118 | color: #3a0318; 119 | } -------------------------------------------------------------------------------- /src/js/script.js: -------------------------------------------------------------------------------- 1 | 2 | const container = document.querySelector('.container'); 3 | const calculator = container.querySelector('table'); 4 | const btnMode = calculator.querySelector('.mode'); 5 | const display = calculator.querySelector('.display'); 6 | 7 | btnMode.addEventListener('click',changeMode); 8 | document.querySelectorAll('button').forEach(btn=>{ 9 | 10 | btn.addEventListener('click',()=>{ 11 | 12 | const {value} = display; 13 | 14 | if(btn.classList.contains('btn-clear')) 15 | display.value = " "; 16 | 17 | else if(btn.classList.contains('btn-equal')) 18 | display.value = eval(value) 19 | 20 | else if(btn.classList.contains('btn-del')) 21 | display.value = value.substring(0,value.length -1) 22 | 23 | else 24 | display.value += btn.textContent; 25 | }) 26 | 27 | }) 28 | 29 | 30 | function changeMode(){ 31 | if(container.classList.contains('dark')){ 32 | container.classList.replace('dark','light'); 33 | calculator.classList.replace('calculator-dark','calculator-light'); 34 | } 35 | else{ 36 | container.classList.replace('light','dark'); 37 | calculator.classList.replace('calculator-light','calculator-dark'); 38 | } 39 | } --------------------------------------------------------------------------------