A simple price calculator using javascript

My client who is an active lifestyle coach wanted a price calculator on her webpage. She planned on selling multiple products with different product pricing. Her clients could add the desired quantity they wanted to purchase. Based on the Shipping method and the State where the products were to be delivered, the estimator had to calculate the total price.

Below is a price estimator I created as a prototype. The estimator was later tweaked and used on my client’s business page.

Snapshot of the simple price calculator
Snapshot of the simple price calculator

Notes

  • Create text fields for the user to input the quantity for each Item.
  • Make sure each text field has a unique ID.
  • Create separate javascript variables to represent each of the products.
  • Set the tax based on the location where the products need to be shipped.
  • Set the shipping and handling fee based on the method selected by the user.
  • On form submit event, calculate the total using a lot of math.
  • To make sure the calculations are rounded off to two decimal places, I used the javascript methods toFixed.
  • Display the final results as the value in the Text Field created for this purpose.

Sample html code to setup the input fields.

<div class="order">
   <label for="bb_sneakers">Quantity Desired: </label>
   <input type="number" name="bb_sneakers" id="bb_sneakers" min="0" placeholder="0" size="3">
</div>

Here is the javascript used for the calculation.

 
// JavaScript Document

(function() {
"use strict";
var state = document.getElementById("id_state");
document.addEventListener('DOMContentLoaded', function(){
	document.getElementById('cart_custom').addEventListener('submit', estimateTotal);
	var v_btn_estimate = document.getElementById('btn_estimate');
	v_btn_estimate.disabled = true;
	state.addEventListener('change', function(){
		if(state.value === ''){
			v_btn_estimate.disabled = true;
			console.log("True");
		}
		else{
			v_btn_estimate.disabled = false;
			console.log("False");
		}
	});
});
function estimateTotal(event) {
	event.preventDefault();
	if( state.value === ''){
		alert('Please select the state you want to send your shipment');
		state.focus();
	}
	var sneakers = parseInt(document.getElementById("bb_sneakers").value, 10 )|| 0;
	var jersey = parseInt(document.getElementById("a_jersey").value, 10 )|| 0;
	var supple = parseInt(document.getElementById("p_supple").value, 10 )|| 0;
	var water = parseInt(document.getElementById("m_water").value, 10 )|| 0;
	console.log(water);
	var state_index = state.value;
	var shipping = document.querySelector('input[name=ship]:checked').value || '';
	var special_gift = document.getElementById("gift").checked;
	var special_mailing = document.getElementById("mailing").checked;
	var special_recipes = document.getElementById("recipes").checked;
	var t_message = document.getElementById("message").value;
	var shippingCostPer,
		totalShippingCost, 
		taxFactor = 1,
		totalItemPrice, 
		estimate;
	var t_quantity = sneakers + jersey + supple + water;
	totalItemPrice = (sneakers * 90 ) + (jersey * 25) + (supple * 30) + (water * 4);
	if (state.value === 'CA'){
		taxFactor = 1.075;
	}
	else if(state.value ==='WA'){
		taxFactor = 1.065;	
	}
	switch(shipping){
		case 'us':
			shippingCostPer = 2;
			break;
		case 'ups':
			shippingCostPer = 3;	
			break;
		default :
			shippingCostPer = 0;
			break;
	}
	totalShippingCost = shippingCostPer * t_quantity;
	estimate = '$' +((totalItemPrice * taxFactor ) + totalShippingCost).toFixed(2);
	document.getElementById('total_estimate').value=estimate;
	var result_html = document.getElementById('results');
	result_html.innerHTML = 'Total Item: ' + t_quantity + '<br>';
	result_html.innerHTML +='Total Shipping: $' + totalShippingCost.toFixed(2) + '<br>';
	result_html.innerHTML +='Tax:' + (( taxFactor - 1 )*100).toFixed(2) + '%';
	result_html.innerHTML +='(State:'  + state_index + ')';
}
})();

Are you looking at building a price estimator on your web page? Let me know if you have any questions.

Subscribe by email
If you're an email kind of person, sign up below to get the latest blog posts in your inbox! You might get some free WordPress goodies from me:-).
I promise not to spam you or share your address.

Client Love

Femy is detail oriented and creative in her approach, and thorough in her execution, of any project. She is a great team player and always willing to stretch herself in any direction that the project needs. It has been wonderful working with Femy!

Alpana Verma-Alag Co-founder and CEO, Upgrademe, Inc