-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
161 lines (138 loc) · 6.49 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
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculadora de Imposto</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
table, th, td {
border: 1px solid #ccc;
border-collapse: collapse;
padding: 10px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
.button {
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
.button:hover {
background-color: #45a049;
}
.remove-button {
background-color: #f44336;
}
.remove-button:hover {
background-color: #da190b;
}
</style>
</head>
<body>
<h2>Calculadora de Imposto</h2>
<label for="total-compra">Total da compra (R$):</label>
<input type="number" id="total-compra" placeholder="Ex: 187,47" step="0.01">
<br><br>
<label for="total-imposto">Valor total do imposto (R$):</label>
<input type="number" id="total-imposto" placeholder="Ex: 62,05" step="0.01">
<br><br>
<label for="total-cartao">Valor total via cartão (R$):</label>
<input type="number" id="total-cartao" placeholder="Ex: 192,49" step="0.01">
<br><br>
<h3>Produtos</h3>
<table id="produtos-table">
<thead>
<tr>
<th>Nome</th>
<th>Preço (R$)</th>
<th>Quantidade</th>
<th>Ações</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" class="produto-nome" placeholder="Nome do produto"></td>
<td><input type="number" class="produto-preco" placeholder="Preço" step="0.01"></td>
<td><input type="number" class="produto-quantidade" placeholder="Quantidade" step="1" value="1"></td>
<td><button class="button" onclick="removerProduto(this)">Remover</button></td>
</tr>
</tbody>
</table>
<button class="button" onclick="adicionarProduto()">Adicionar produto</button>
<br><br>
<button class="button" onclick="calcularImposto()">Calcular Imposto</button>
<h3>Imposto por unidade:</h3>
<ul id="resultado-imposto"></ul>
<h3>Taxa do Cartão por unidade:</h3>
<ul id="resultado-cartao"></ul>
<script>
function adicionarProduto() {
const tabela = document.getElementById("produtos-table").getElementsByTagName('tbody')[0];
const novaLinha = tabela.insertRow();
novaLinha.innerHTML = `
<td><input type="text" class="produto-nome" placeholder="Nome do produto"></td>
<td><input type="number" class="produto-preco" placeholder="Preço" step="0.01"></td>
<td><input type="number" class="produto-quantidade" placeholder="Quantidade" step="1" value="1"></td>
<td><button class="button remove-button" onclick="removerProduto(this)">Remover</button></td>
`;
}
function removerProduto(button) {
const row = button.closest('tr');
row.remove();
}
function calcularImposto() {
const totalCompra = parseFloat(document.getElementById("total-compra").value);
const totalImposto = parseFloat(document.getElementById("total-imposto").value);
const totalCartao = parseFloat(document.getElementById("total-cartao").value);
const produtos = document.querySelectorAll("#produtos-table tbody tr");
const resultadoImposto = document.getElementById("resultado-imposto");
const resultadoCartao = document.getElementById("resultado-cartao");
resultadoImposto.innerHTML = ""; // Limpa o resultado anterior
resultadoCartao.innerHTML = ""; // Limpa o resultado anterior
let totalProdutos = 0;
// Calcular o valor total dos produtos
produtos.forEach(produto => {
const preco = parseFloat(produto.querySelector(".produto-preco").value);
const quantidade = parseInt(produto.querySelector(".produto-quantidade").value);
if (!preco || !quantidade) return; // Se faltar preço ou quantidade, ignora
totalProdutos += preco * quantidade;
});
if (totalProdutos <= 0) {
alert("Por favor, preencha corretamente os campos dos produtos.");
return;
}
// Calcular a taxa do cartão com base no valor total da compra
const taxaCartaoTotal = totalCartao - totalCompra;
// Calcular o imposto e a taxa do cartão por unidade de produto
produtos.forEach(produto => {
const nome = produto.querySelector(".produto-nome").value;
const preco = parseFloat(produto.querySelector(".produto-preco").value);
const quantidade = parseInt(produto.querySelector(".produto-quantidade").value);
if (!nome || !preco || !quantidade) return; // Se faltar alguma informação, ignora o produto
// Calcular o imposto por unidade
const impostoUnitario = (preco * totalImposto) / totalCompra;
// Calcular a taxa do cartão por unidade
const taxaCartaoUnitaria = (preco * taxaCartaoTotal) / totalProdutos;
// Adicionar o imposto e a taxa para cada unidade
for (let i = 0; i < quantidade; i++) {
const itemResultadoImposto = document.createElement("li");
itemResultadoImposto.textContent = `${nome} (unidade ${i + 1}): R$ ${impostoUnitario.toFixed(2)} de imposto.`;
resultadoImposto.appendChild(itemResultadoImposto);
const itemResultadoCartao = document.createElement("li");
itemResultadoCartao.textContent = `${nome} (unidade ${i + 1}): R$ ${taxaCartaoUnitaria.toFixed(2)} de taxa do cartão.`;
resultadoCartao.appendChild(itemResultadoCartao);
}
});
alert("Cálculos realizados com sucesso!");
}
</script>
</body>
</html>