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

I’d love to know to hear from you: Did you run into any code challenge when you built a price estimator on your web page?
Leave a comment below and let me know.

Thanks for geeking out with me,

Signed By Femy Praseeth

Share it with your people:

Leave a Reply

Your email address will not be published. Required fields are marked *

Endorsed by these folks ...

Femy is not only very professional, technically savvy and reliable, she is a joy to work with.

Dale McGrew CTO and Co-founder, GoLightly