JSFiddle - React, Tailwind, and code Playground

by Vijay Dhanvai

HTML

<div id="formular">
  <div id="formulartekst">
    <form>

      <h2 class="formskrift">Order Hot Food</h2>
      <p class="kroner">$39 / $29 when 3 or more checked</p>
      <input name="product" value="39" type="checkbox" id="p1" onclick="totalIt(this.name)" /> Monday
      <br>
      <input name="product" value="39" type="checkbox" id="p2" onclick="totalIt(this.name)" /> Tuesday
      <br>
      <input name="product" value="39" type="checkbox" id="p3" onclick="totalIt(this.name)" /> Wednesday
      <br>
      <input name="product" value="39" type="checkbox" id="p4" onclick="totalIt(this.name)" /> Thursday
      <br>
      <input name="product" value="39" type="checkbox" id="p5" onclick="totalIt(this.name)" /> Friday
      
      <h2 class="formskrift">Dessert</h2>
        <p class="kroner">$20 ALWAYS</p>
        <input name="dessert" value="20" type="checkbox" id="p6" onclick="totalIt(this.name)"/>
        Monday<br>
        <input name="dessert" value="20" type="checkbox" id="p7" onclick="totalIt(this.name)"/>
        Tuesday<br>
        <input name="dessert" value="20" type="checkbox" id="p8" onclick="totalIt(this.name)"/>
        Wednesday<br>
        <input name="dessert" value="20" type="checkbox" id="p9" onclick="totalIt(this.name)"/>
        Thursday<br>
        <input name="dessert" value="20" type="checkbox" id="p10" onclick="totalIt(this.name)"/>
        Friday<br>
   
      <label>
        <br> Total
        <input value="$0.00" readonly type="text" id="total" />
      </label>
      <input type="submit" value="Order">
    </form>
  </div>
</div>

JavaScript

var grndTotal = 0;
var total1 = 0;
var total2 = 0;

window.totalIt= function(name) {
  if(name == "product"){
 
  var input = document.getElementsByName("product");
  var total = 0;
	  for (var i = 0; i < input.length; i++) {
		if (input[i].checked) {
		  total += 1;
		}
	  }
  if(total>=3){ total1 =  (total*29).toFixed(2);}
  else{total1 =  (total*39).toFixed(2);}
  }

if(name == "dessert"){

  var input = document.getElementsByName("dessert");
  var total = 0;
  for (var i = 0; i < input.length; i++) {
    if (input[i].checked) {
      total += parseFloat(input[i].value);
    }
  }
  
  total2 =  total.toFixed(2);
  }
  grndTotal = parseInt(total2) + parseInt(total1);
  document.getElementById("total").value = "$"+grndTotal ;
	 
}