├── LICENSE
├── README.md
├── css
└── style.css
├── index.html
└── js
└── script.js
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2017 Francisco Junio Santos Chaves
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 | [](https://app.netlify.com/sites/calculadora-js/deploys)
3 |
4 | 
5 |
6 | ## Desenvolvido por [Francisco Chaves](http://www.franciscochaves.com.br)
7 |
8 | # Calculadora JavaScript
9 |
10 | A calculadora realiza **soma**, **subtração**, **multiplicação** e **divisão**.
11 |
12 | Para conhecer mais sobre programação e tecnologia acesse: [http://www.franciscochaves.com.br](http://www.franciscochaves.com.br)
13 |
--------------------------------------------------------------------------------
/css/style.css:
--------------------------------------------------------------------------------
1 | #calculadora table {
2 | margin: 0 auto;
3 | padding: 0;
4 | box-sizing: content-box;
5 | background-color: #CFD8DC;
6 | border: 0 double black;
7 | font-size: 1.5625rem;
8 | }
9 |
10 | #calculadora tr {
11 | width: 100%;
12 | height:100%;
13 | }
14 |
15 | #calculadora tr td input {
16 | width: 100%;
17 | height:100%;
18 | }
19 |
20 | #calculadora td input:hover {
21 | color: #fff;
22 | background-color: #546E7A;
23 | }
24 |
25 | #calculadora td input#tela {
26 | text-align: right;
27 | }
28 |
29 | #calculadora td input#tela:hover {
30 | color: #000;
31 | background-color: #fff;
32 | }
33 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Calculadora
6 |
7 |
8 |
9 |
10 |
11 |
12 |
14 |
15 |
16 |
17 |
18 |
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 |
75 |
76 |
77 |
78 |
79 |
82 |
83 |
84 |
--------------------------------------------------------------------------------
/js/script.js:
--------------------------------------------------------------------------------
1 | document.addEventListener("DOMContentLoaded", function () {
2 |
3 | var tela = document.getElementById("tela");
4 |
5 | //Array de elementos que receber uma listener
6 | var listenerBtn = [];
7 |
8 | //teclas adicionais do teclado
9 | var btnResultado = document.getElementById("resultado");
10 | var btnLimparTela = document.getElementById("limparTela");
11 | var btnApagarAnterior = document.getElementById("apagarAnterior");
12 |
13 | listenerBtn.push(document.getElementById("ponto"));
14 |
15 | //teclas dos operadores
16 | listenerBtn.push(document.getElementById("soma"));
17 | listenerBtn.push(document.getElementById("subtracao"));
18 | listenerBtn.push(document.getElementById("divisao"));
19 | listenerBtn.push(document.getElementById("multiplicacao"));
20 |
21 | //teclas númericas da calculadora
22 | listenerBtn.push(document.getElementById("num0"));
23 | listenerBtn.push(document.getElementById("num1"));
24 | listenerBtn.push(document.getElementById("num2"));
25 | listenerBtn.push(document.getElementById("num3"));
26 | listenerBtn.push(document.getElementById("num4"));
27 | listenerBtn.push(document.getElementById("num5"));
28 | listenerBtn.push(document.getElementById("num6"));
29 | listenerBtn.push(document.getElementById("num7"));
30 | listenerBtn.push(document.getElementById("num8"));
31 | listenerBtn.push(document.getElementById("num9"));
32 |
33 | //Adicionando evento de click
34 | for (var i = 0; i < listenerBtn.length; i++) {
35 | listenerBtn[i].addEventListener("click", passarValorTela);
36 | }
37 |
38 | btnResultado.onclick = function () {
39 | verificarResulatado();
40 | }
41 |
42 | function verificarResulatado() {
43 | try {
44 | var aux = tela.value.substring(tela.value.length - 1, tela.value.length);
45 | if (verificarOperador(aux)) {
46 | apagarAnterior();
47 | }
48 |
49 | var valorCalculado = eval(tela.value); //calcular o conteúdo da string
50 | if (valorCalculado || valorCalculado == "0") {
51 | tela.value = valorCalculado;
52 | } else {
53 | throw "erro";
54 | }
55 | } catch (e) {
56 | console.error(e);
57 | }
58 | }
59 |
60 | function passarValorTela() {
61 |
62 | if (verificarOperador(this.value)) {
63 | var aux = tela.value.substring(tela.value.length - 1, tela.value.length);
64 | //subtituir o valor do operador pelo atual
65 | if (verificarOperador(aux)) {
66 | apagarAnterior();
67 | }
68 | }
69 | if (this.value) {
70 | tela.value += this.value;
71 | }
72 |
73 | }
74 |
75 | btnApagarAnterior.onclick = function () {
76 | apagarAnterior();
77 | }
78 |
79 | function apagarAnterior() {
80 | if (tela.value.length > 0) {
81 | var aux = tela.value.substring(0, tela.value.length - 1);
82 | tela.value = aux;
83 | }
84 | }
85 |
86 | btnLimparTela.onclick = function () {
87 | tela.value = "";
88 | }
89 |
90 | function verificarOperador(valor) {
91 | switch (valor) {
92 | case "+":
93 | return true;
94 | case "-":
95 | return true;
96 | case "*":
97 | return true;
98 | case "/":
99 | return true;
100 |
101 | default:
102 | return false;
103 | }
104 | }
105 |
106 | });
107 |
--------------------------------------------------------------------------------