<!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 Produtos</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
.product-list {
list-style: none;
padding: 0;
}
.product-item {
margin: 10px 0;
}
#total {
font-weight: bold;
margin-top: 20px;
font-size: 1.5em;
}
</style>
</head>
<body>
<h1>Internet Simples</h1>
<ul class=”product-list”>
<li class=”product-item”>
<input type=”checkbox” class=”product” value=”99.90″ id=”product1″>
<label for=”product1″>400MB – R$ 99,90/109,90</label>
</li>
<li class=”product-item”>
<input type=”checkbox” class=”product” value=”109.90″ id=”product2″>
<label for=”product2″>500MB – R$ 109,90/119,90</label>
</li>
<li class=”product-item”>
<input type=”checkbox” class=”product” value=”169.90″ id=”product3″>
<label for=”product3″>1000mb – 169,90/</label>
</li>
</ul>
<h1>Internet Mesh</h1>
<ul class=”product-list”>
<li class=”product-item”>
<input type=”checkbox” class=”product” value=”139,90″ id=”product1″>
<label for=”product1″>600MB + 1 ponto – R$ 139,90/149,90</label>
</li>
<li class=”product-item”>
<input type=”checkbox” class=”product” value=”169.90″ id=”product2″>
<label for=”product2″>600MB + 2 pontos – R$ 169.90/179.90</label>
</li>
<li class=”product-item”>
<input type=”checkbox” class=”product” value=”189.90″ id=”product3″>
<label for=”product3″>600mb + 3 pontos – 169,90/</label>
</li>
</ul>
<h1>Telefonia Fixa</h1>
<ul class=”product-list”>
<li class=”product-item”>
<input type=”checkbox” class=”product” value=”29.90″ id=”product1″>
<label for=”product1″>100 minutos – R$ 29,90</label>
</li>
<li class=”product-item”>
<input type=”checkbox” class=”product” value=”49.90″ id=”product2″>
<label for=”product2″>1000 minutos – R$ 49,90</label>
</li>
<li class=”product-item”>
<input type=”checkbox” class=”product” value=”99.90″ id=”product3″>
<label for=”product3″>Ilimitado – R$ 99,90</label>
</li>
<li class=”product-item”>
<input type=”checkbox” class=”product” value=”15.00″ id=”product4″>
<label for=”product4″>Produto 4 – R$ 15,00</label>
</li>
</ul>
<h1>Telefonia Móvel</h1>
<ul class=”product-list”>
<li class=”product-item”>
<input type=”checkbox” class=”product” value=”28.00″ id=”product1″>
<label for=”product1″>3GB</label>
</li>
<li class=”product-item”>
<input type=”checkbox” class=”product” value=”37.50″ id=”product2″>
<label for=”product2″>5GB</label>
</li>
<li class=”product-item”>
<input type=”checkbox” class=”product” value=”40.50″ id=”product3″>
<label for=”product3″>8GB</label>
</li>
<li class=”product-item”>
<input type=”checkbox” class=”product” value=”54.00″ id=”product4″>
<label for=”product4″>14GB</label>
</li>
<li class=”product-item”>
<input type=”checkbox” class=”product” value=”67.50″ id=”product4″>
<label for=”product4″>20GB</label>
</li>
<li class=”product-item”>
<input type=”checkbox” class=”product” value=”85.00″ id=”product4″>
<label for=”product4″>30GB</label>
</li>
</ul>
<div id=”total”>Total: R$ 0,00</div>
<script>
const checkboxes = document.querySelectorAll(‘.product’);
const totalElement = document.getElementById(‘total’);
checkboxes.forEach(checkbox => {
checkbox.addEventListener(‘change’, updateTotal);
});
function updateTotal() {
let total = 0;
checkboxes.forEach(checkbox => {
if (checkbox.checked) {
total += parseFloat(checkbox.value);
}
});
totalElement.textContent = `Total: R$ ${total.toFixed(2)}`;
}
</script>
</body>
</html>