-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
117 lines (116 loc) · 5.76 KB
/
index.html
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
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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<html>
<head>
<meta charset="UTF-8">
<title>imersaoDev - Calculadora Simples</title>
<link rel ="stylesheet" href="./style.css">
</head>
<body>
<main>
<section class="calculator">
<br>
<br>
<h1 class="namber" >CALCULADORA SIMPLES</h1>
<form name='screen'>
<input class="result" name='result'disabled>
</form>
<input type="button" class='calculation-button' onclick="addParameter(1)" value="1">
<input type="button" class='calculation-button' onclick="addParameter(2)" value="2">
<input type="button" class='calculation-button' onclick="addParameter(3)" value="3">
<input type="button" class='calculation-button' onclick="erase()" value="<<">
<input type="button" class='calculation-button' onclick="ce()" value="CE">
<input type="button" class='calculation-button' onclick="addParameter(4)" value="4">
<input type="button" class='calculation-button' onclick="addParameter(5)" value="5">
<input type="button" class='calculation-button' onclick="addParameter(6)" value="6">
<input type="button" class='calculation-button' onclick="addParameter('/')" value="÷">
<input type="button" class='calculation-button' onclick="addParameter('*')" value="x">
<input type="button" class='calculation-button' onclick="addParameter(7)" value="7">
<input type="button" class='calculation-button' onclick="addParameter(8)" value="8">
<input type="button" class='calculation-button' onclick="addParameter(9)" value="9">
<input type="button" class='calculation-button' onclick="addParameter('-')" value="-">
<input type="button" class='calculation-button' onclick="addParameter('+')" value="+">
<input type="button" class='calculation-button-zero' onclick="addParameter(0)" value="0">
<input type="button" class='calculation-button' onclick="addParameter('.')" value=".">
<input type="button" class='calculation-button-equal' onclick="addEqual()" value="=">
</section>
<p><img src="./leitao.png" width="90px" height="90px" class="image"><strong>Made With 💙 by Gislaine Carvalho</strong></p>
</main>
<script>
var cleanScreen = false;
// Declaração da variável responsável por não repetir operadores
var operator = false;
// Declaração da variável responsável por não repetir pontos
var point = false;
// Declaração da variável responsável por não colcocar operadores e ponto no início da expressão
var firstParameter = true;
// Declaração da funçaõ responsável por adicionar elementos na estrutura de operação
function addParameter(number) {
// condição responsável por verificar se já houve uma operação anteriormente para limpar a tela
if (cleanScreen == true && number != '/' && number != '*' && number != '+' && number != '-' && number != '.') {
ce();
cleanScreen = false;
}
// Condição responsável por verificar se foi selecionado operadores
if (number == '/' || number == '*' || number == '+' || number == '-') {
// Condição responsável por não haver repetição de operadores nem escrevê-los no início da expressão
if (operator == false && firstParameter == false) {
document.querySelector('.result').value = document.querySelector('.result').value + number;
operator = true;
point = false;
cleanScreen = false;
}
else if (operator == true || firstParameter == true) {
document.querySelector('.result').value = document.querySelector('.result').value;
}
}
// Condição responsável por não haver repetição de operadores nem escrevê-los no início da expressão
if (operator == true) {
document.querySelector('.result').value = document.querySelector('.result').value
}
// Condição responsável por não haver repetição de pontos nem escrevê-los no início da expressão
if (number == '.') {
if (point == false && firstParameter == false) {
document.querySelector('.result').value = document.querySelector('.result').value + number;
point = true;
}
else {
document.querySelector('.result').value = document.querySelector('.result').value;
}
}
// Condição responsável por adicionar números na expressão
if (number != '/' && number != '*' && number != '+' && number != '-' && number != '.') {
// responsável por montar a estrutura de operação de acordo com o valor do botão clicado
document.querySelector('.result').value = document.querySelector('.result').value + number;
firstParameter = false;
}
}
// Declaração da função que executa a operação já escrita
function addEqual() {
var content = document.querySelector('.result').value;
// Se há conteúdo a função 'eval' executa a operação baseada nos números e no operador escolhido
if (content) {
document.querySelector('.result').value = eval(content);
}
// Atribui verdadeira a situação de operação executada para posteriormente limpar-se a tela
cleanScreen = true;
// Permite que operadores sejam utilizados novamente
operator = false;
// Permite que pontos sejam utilizados novamente
point = false;
}
// Declaração da função responsável por limpar a tela
function ce() {
// limpa a expressão digitada na tela e zera a calculadora
document.querySelector('.result').value = "";
operator = false;
point = false;
firstParameter = true;
}
// Declaração da função apagar conteúdo
function erase() {
var content = document.querySelector('.result').value;
// recebe o conteúdo da input e retira 1 caractere do seu comprimento
document.querySelector('.result').value = content.substring(0, content.length-1);
}
</script>
</body>
</html>