Exemplo de Soma com items selecionados

Exemplo de Soma com items selecionados com Javascript Puro

by Rodrigo Portillo

HTML

<input type="text" id="conta"/>
<button id="somar" onclick="calcular()">
Somar
</button>
<div class="caixa" rel="52">
Cinquenta e Dois
</div>
<div class="caixa" rel="67">
Meia Sete
</div>
<div class="caixa" rel="97">
Noventa e Sete
</div>
<div class="caixa" rel="32">
Trinta e Dois
</div>

CSS

body{
  font-family: sans-serif;
}
.caixa{
  border: black dashed 1px;
  margin: 10px;
  padding: 30px;
  cursor: pointer;
}

.caixa.selecionada{
  border: black solid 2px;
  background-color: lightblue;
}

JavaScript

function selecionarCaixa(event){
	var el = event.target;
  var className = "selecionada";
 
  if (el.classList.contains(className)){
  	el.classList.remove(className);
	}else{
  	el.classList.add(className);
  }
}

function calcular(){
	var caixas_selecionadas = document.querySelectorAll(".selecionada");
 	var calculo = "";
  caixas_selecionadas.forEach((caixa)=>{
    calculo += caixa.getAttribute("rel") + " + ";
	});
	
	document.querySelector("#conta").value = calculo.substring(0, calculo.length-2); 
  
	alert(eval(calculo.substring(0, calculo.length-2)));
}

var caixas = document.querySelectorAll(".caixa");

caixas.forEach((caixa)=>{
	caixa.addEventListener('click', function(){
  	selecionarCaixa(event);
  });
});