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.

Steps to create the price calculator.

• 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 + ')';
}
})();