JSFiddle - React, Tailwind, and code Playground

by Alexis López Espinoza

HTML

<section id = "productos">
	<h3>Productos</h3>
	<div class = "producto">
		<label for = "remera">Remera</label>
		<input type = "checkbox" id = "remera" name = "remera" value = "25.95" />
	</div>
		
	<div class = "producto">
		<label for = "zapatos">Zapatos</label>
		<input type = "checkbox" id = "zapatos" name = "zapatos" value = "48.75" />
	</div>
		
	<div class = "producto">
		<label for = "lentes">Lentes</label>
		<input type = "checkbox" name = "lentes" value = "22.30" />
	</div>
</section>
<section id = "medidas">
	<h3>Medidas</h3>
	<label for = "uno">5.98</label>
	<input type = "radio" id = "uno" name = "medida" value = "5.98" checked />
	<label for = "dos">8.23</label>
	<input type = "radio" id = "dos" name = "medida" value = "8.23" />
	<label for = "tres">10.43</label>
	<input type = "radio" id = "tres" name = "medida" value = "10.43" />
</section>
<span id = "resultado">Total: US$0.00</span>

CSS

body{
	background: steelblue;
}

#productos, #medidas{
	width: 30%;
	border-radius: .25rem;
}

#productos{
	background: lightyellow;
}

#medidas{
	background: lightcyan;
	margin-bottom: 2.5%;
}

#resultado{
	background: aquamarine;
	font-size: 1.5rem;
	border-radius: .25rem;
}

h3{
	color: navy;
}

#productos label{
	color: midnightblue;
}

#medidas label{
	color: darkblue;
}

JavaScript

var productos = document.querySelectorAll("[type=checkbox]"),
	medidas = document.querySelectorAll("[type=radio]"),
	salida = document.querySelector("#resultado"),
	total = 0, 
	fijo = 90500,
	acumulado = 0,
	radioMarcado = null,
	calcular = function(){
		if (!document.querySelectorAll("[type=checkbox]:checked").length){
			total = 0;	
		}
		else{
			radioMarcado = document.querySelectorAll("[type=radio]:checked")[0];
			total = (fijo / 7) * Number(radioMarcado.value) + acumulado;	
		}		
		salida.innerHTML = "Total: US$" + total.toFixed(2);
	};

[].forEach.call(productos, function(producto){
	producto.addEventListener("click", function(){
		if (this.checked) acumulado += Number(this.value);
		else acumulado -= Number(this.value);
		calcular();
	}, false);
});

[].forEach.call(medidas, function(medida){
	medida.addEventListener("click", calcular, false);
});