JSFiddle - React, Tailwind, and code Playground

by r3wt

HTML

<script src="https://code.jquery.com/jquery-2.2.2.min.js"></script>
<label>Number of Bathrooms</label>
<input type="number" min="0" max="6" name="baths" value="0"/>
<br/>

<label>Number of Bedrooms</label>
<input type="number" name="beds" min="0" max="6" value="0"/>
<br/>
<strong>ADD ONS</strong><br/>
<label>No fridge</label>
<input type="radio" name="fridge" value="0" checked /><br/>
<label>Fridge &amp; Freeze</label>
<input type="radio" name="fridge" value="2"/><br/>
<label>Only Fridge</label>
<input type="radio" name="fridge" value="1"/><br/>
<label>Windows &amp; Tracks</label>
<input type="checkbox" name="windows" value="1"/><br/>
<label>Wash Dishes</label>
<input type="checkbox" name="dishes" value="1"/><br/>
<label>Suprise Bonus</label>
<input type="checkbox" name="surprise" value="1"/><br/>
<hr>
<label>Total</label>
<input type="text" id="total" value="$0.00" disabled />

JavaScript

$(function(){
	$(':input').not('#total').on('change',calculateTotal);

	function calculateTotal() {
  
		var total = 0.0,
			beds = $('input[name="beds"]').val(),
			baths = $('input[name="baths"]').val(),
			bathVals = [43.75,43.75,35,20,20,35],
			bedVals = [46.24,26.26,26.25,15,15,25],
			fridge = parseInt($('input[name="fridge"]:checked').val());
      
		for(var i=0;i<beds;i++){
			total += bedVals[i];
		}
    
		for(var i=0;i<baths;i++){
			total += bathVals[i];
		}
		
		switch(fridge){
			
			case 2:
				total += 15;//will cascade into next case resulting in "60"
			case 1:
				total += 45;
			break;
			
		}
		
		if($('input[name="windows"').is(':checked')){
    	total += 39;
    }
		
		if($('input[name="dishes"').is(':checked')){
    	total += 25;
    } 
		
		if($('input[name="surprise"').is(':checked')){ 
    	total += 9;
    }
		
		$('#total').val( '$'+total.toFixed(2) );
	}

});