├── README.md ├── index.htm ├── projeto_calculadora.css └── projeto_calculadora.js /README.md: -------------------------------------------------------------------------------- 1 | # projeto_calculadora 2 | 3 | Calculadora implementada em JavaScript na segunda turma da Resilia Webdev 4 | -------------------------------------------------------------------------------- /index.htm: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 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 | -------------------------------------------------------------------------------- /projeto_calculadora.css: -------------------------------------------------------------------------------- 1 | body{ 2 | 3 | background-color: thistle; 4 | 5 | } 6 | .container{ 7 | 8 | margin-top: 10%; 9 | border: solid black 1px; 10 | padding: 8px; 11 | width: 320px; 12 | height: 250px; 13 | margin-left: 35%; 14 | border-radius: 10px; 15 | background-color: #17706e 16 | } 17 | 18 | 19 | #display{ 20 | 21 | display: flex; 22 | justify-content: center; 23 | border: solid black 1px; 24 | border-radius: 10px; 25 | width: 270px; 26 | height: 60px; 27 | margin: 0 auto; 28 | margin-bottom: 10px; 29 | background-color: #f7eb09; 30 | font-family: helvetica; 31 | font-weight: bold; 32 | align-items: center; 33 | font-size: larger; 34 | } 35 | 36 | 37 | 38 | .prototipoCalc{ 39 | display:flex; 40 | justify-content: space-around; 41 | 42 | } 43 | 44 | .botoesNumeroTodos{ 45 | display:flex; 46 | flex-wrap:wrap; 47 | justify-content:space-around; 48 | padding:5px; 49 | } 50 | .botoesNum{ 51 | width: 67px; 52 | padding: 4px; 53 | background-color:#01d28e; 54 | border-radius: 15px; 55 | font-weight: bold; 56 | font-family: helvetica; 57 | font-size:larger; 58 | 59 | } 60 | 61 | .botoesOperacoes{ 62 | 63 | display:grid; 64 | 65 | } 66 | .botoesOp{ 67 | background-color:#f7f7ee; 68 | border-radius: 10px; 69 | font-family: helvetica; 70 | font-weight: bold; 71 | font-size:larger; 72 | width:55px; 73 | 74 | } 75 | 76 | #clear{ 77 | 78 | border-radius: 5px; 79 | padding:5px; 80 | background-color:#fb7813; 81 | font-family: helvetica; 82 | font-weight: bold; 83 | color:white; 84 | } 85 | 86 | @media(max-width: 768px) 87 | { 88 | .container{ 89 | 90 | margin: 0 auto; 91 | height: 400px; 92 | margin-top: 100px; 93 | width: 280px; 94 | } 95 | #display{ 96 | width: 250px; 97 | height: 80px; 98 | font-size: x-large; 99 | } 100 | .prototipoCalc { 101 | height: 300px; 102 | } 103 | 104 | .botoesOp{ 105 | width: 50px; 106 | } 107 | 108 | 109 | 110 | } 111 | -------------------------------------------------------------------------------- /projeto_calculadora.js: -------------------------------------------------------------------------------- 1 | let calculadora = {}; 2 | calculadora.display = document.querySelector("#display"); 3 | calculadora.botoes = document.querySelectorAll(".botoesNum"); // seleciona todos os botoes de numero 4 | calculadora.botaoSoma = document.querySelector("#soma"); 5 | calculadora.botaoIgual = document.querySelector("#igual"); 6 | calculadora.botaoSubtracao= document.querySelector("#subtracao"); 7 | calculadora.botaoMultiplicacao= document.querySelector("#multiplicacao"); 8 | calculadora.botaoDivisao= document.querySelector("#divisao"); 9 | calculadora.botaoClear = document.querySelector("#clear"); 10 | let acumulador = ""; 11 | let count=0; 12 | 13 | 14 | //para cada botao do array de botoes irá adicionar um evento de click , o qual executa a funçao de add no display 15 | 16 | calculadora.botoes.forEach(function (button){ button.addEventListener("click", function (){ 17 | //só executa o evento para um numero que possua menos de 20 caracteres// 18 | if(calculadora.display.textContent.length <17) 19 | ColocaNumDisplay(button); 20 | 21 | })}); 22 | 23 | //funçao que acrescenta numeros ao display da calculadora// 24 | function ColocaNumDisplay(bt) 25 | { 26 | console.log(count); 27 | calculadora.display.innerText += bt.innerText;// armazena o valor no display de acordo com o botao clicado 28 | 29 | } 30 | 31 | 32 | 33 | calculadora.botaoSoma.onclick = function() { 34 | acumulador += calculadora.display.innerText; //acumulador recebe o que está armazenado no display 35 | acumulador += " + "; // insere o operador para realizar a conta 36 | calculadora.display.innerText = "";// limpa o display para inserir o proximo numero 37 | } 38 | calculadora.botaoSubtracao.onclick = function() { 39 | acumulador += calculadora.display.innerText; 40 | acumulador += " - ";// operador de subtração// 41 | calculadora.display.innerText = ""; 42 | } 43 | calculadora.botaoMultiplicacao.onclick = function() { 44 | acumulador += calculadora.display.innerText; 45 | acumulador += " * ";// operador de multiplicaçao// 46 | calculadora.display.innerText = ""; 47 | } 48 | calculadora.botaoDivisao.onclick = function() { 49 | acumulador += calculadora.display.innerText; 50 | acumulador += "/";// operador de multiplicaçao// 51 | calculadora.display.innerText = ""; 52 | } 53 | 54 | 55 | calculadora.botaoIgual.onclick = function() { 56 | //TODO: checar se existe conteúdo dentro do display 57 | 58 | //colocando conteúdo do display no acumulador 59 | 60 | acumulador += calculadora.display.innerText; 61 | //resolvendo conta (conteúdo acumulador) 62 | let resultado = eval(acumulador); 63 | //colocando no display o conteúdo do acumulador 64 | calculadora.display.innerText = resultado; 65 | // limpando o acumulador 66 | acumulador = ""; 67 | 68 | } 69 | 70 | calculadora.botaoClear.onclick= function() { 71 | acumulador = "" 72 | calculadora.display.innerText= "";} // limpa a conta anterior// 73 | 74 | 75 | 76 | 77 | --------------------------------------------------------------------------------