This JavaScript code creates a user-friendly web-based calculator for calculating sales tax on products. It allows users to input product price and quantity, then automatically computes and displays the subtotal, tax, and total cost of the order. This tool simplifies the process of calculating sales tax, making it helpful for individuals or businesses managing pricing and taxation.
You can use this code on your e-commerce website to provide customers with a straightforward sales tax calculation too. It helps simplify the tax calculation process, reducing user errors and saving time.
How to Create a Sales Tax Calculator Using JavaScript
1. First, copy the HTML code into your webpage within the <body> tags. This code creates the form structure necessary for user input.
<center>
<div class ="form">
<h2> Sales Tax Calculator</h5>
<form name="orderform" id="orderform">
<table>
</div>
<tr><th>
<label>Product: </label>
</th>
<th scope="row">
<div align="left">
<label><span>$</span></label>
<input name="price" type="text" id="price" size="10">
</div>
</th>
<tr><th>
<label>Quantity</label>
</th>
<th scope="row">
<div align="left">
<label><span>#</span></label>
<input name="quantity" type="text" id="quantity" size="10">
</div>
</th>
<tr><th>
<label>Subtotal:</label>
</th>
<th scope="row">
<div align="left">
<label>$</label>
<input name="subtotal" type="text" id="subtotal" onFocus="this.form.elements[1].focus()" size="10">
<input name="subBtn" onClick="subTotal();" type="button" id="subBtn" value="Subtotal">
</div>
</th>
</tr>
<tr><th>
<label>Tax:</label>
</th>
<th scope="row">
<div align="left">
<label>$</label>
<input name="salestax" type="text" id="salestax" onFocus="this.form.elements[1].focus()" size="10">
<input name="taxBtn" onClick="calculateTax();" type="button" id="taxBtn" value="Tax">
</div>
</th>
</tr>
<tr><th>
<label>Total:</label>
</th>
<th scope="row">
<div align="left">
<label>$</label>
<input name="gtotal" type="text" id="gtotal" onFocus="this.form.elements[2].focus()" size="10">
<input name="gtotalBtn" onClick="grandTotal();" type="button" id="gtotalBtn" value="Calculate Order">
</div>
</th>
</tr>
</table>
</form>
</div>
</center>
2. Add the CSS code to your stylesheet or within a <style> tag in the HTML. This CSS provides a visually appealing layout for the form and buttons.
table{
border-style: solid;
border-color: black;
border-width: 5px;
border-radius: 5px;
background-color: silver;
}
#subBtn{
border-style: solid;
border-color: black;
border-width: 2px;
border-radius: 5px;
}
#taxBtn{
border-style: solid;
border-color: black;
border-width: 2px;
border-radius: 5px;
}
#gtotalBtn{
border-style: solid;
border-color: black;
border-width: 2px;
border-radius: 5px;
}
3. Finally, insert the JavaScript code within a <script> tag or an external JavaScript file. These functions enable the calculation of the subtotal, tax, and grand total.
function subTotal() {
var price = document.orderform.price.value;
var quantity = document.orderform.quantity.value;
productPrice = price * quantity;
document.orderform.subtotal.value = productPrice.toFixed(2);
return productPrice;
}
//calculateTax() takes result of subTotal function but has to refer to the result to move forward as opposed to the previous function
//.toFixed() is the decimal points
function calculateTax() {
//var subTotal = document.orderform.subtotal.value; OR for dryer code:
var subtotal = subTotal();
var stax = 0.03;
tax = subtotal * stax;
document.orderform.salestax.value = tax.toFixed(3);
return tax;
}
//takes the HTML output results from the previous two functions and adds them together.
function grandTotal() {
var subtotal = subTotal();
var tax = calculateTax();
document.orderform.subtotal.value = subtotal.toFixed(2);
document.orderform.salestax.value = tax.toFixed(2);
var gtotal = subtotal + tax;
document.orderform.gtotal.value = gtotal.toFixed(2);
}
That’s all! hopefully, you have successfully created a Sales Tax Calculator using JavaScript. This tool simplifies the process for customers to calculate sales tax. If you have any questions or suggestions, feel free to comment below.
Similar Code Snippets:
Automatic Logout After 15 Minutes Of Inactivity in JavaScript- Fahrenheit to Celsius Converter JavaScript Code
- Scroll Progress Bar in JavaScript
- Multiple Toast Notifications in JavaScript
I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.