Training Calculator

by pphheerroonn

HTML

<input id="num_of_teachers" value="100" type='number' pattern="[0-9]{4}" name="numTeachers" onkeydown="javascript: return ['Backspace','Delete','ArrowLeft','ArrowRight'].includes(event.code) ? true : !isNaN(Number(event.key)) && event.code!=='Space'"  oninput="updatePricing();">

<div id="price_output">From €100</div>
<div id="split_price_output">€XX per teacher.</div>

<script>

//
function updatePricing() {
	var val = parseInt(document.getElementById("num_of_teachers").value);
	var displayText = ""
  document.getElementById("price_output").innerHTML = val + 1;
  console.log("RUN");
  console.log(val);
  switch (true) {
    case 0:
      displayText = "XX";
      break;
    case val<=10:
      displayText = "36";
      break;
    case val<=25:
       displayText = "35";
      break;
    case val<=50:
      displayText = "34";
      break;
    case val<=75:
      displayText = "33";
      break;
    case val<=100:
      displayText = "32";
      break;
    case val<=150:
      displayText = "31";
      break;
    case val>150:
      displayText = "30";
		default:
      displayText = "50";
  }
  document.getElementById("split_price_output").innerHTML = "€"+ displayText  + " per teacher";
  document.getElementById("price_output").innerHTML = "From €"+ (parseInt(displayText) * val);
}



var trainingPricing = {
	10:36,
	25:35,
  50:34,
  75:33,
  100:32
}
</script>

CSS

*{
font-family: sans-serif;
text-align: center;}
#num_of_teachers{
  display: inline-block;
  border: none;
  font-size: 30px;
  width: auto;
  text-align: center;
  font-weight: 600;
  color: #888;
  outline: none;
}




input[type=number]::-webkit-inner-spin-button {
  opacity: 0.5;
  border: none;
}