How to create a basic volume calculator using JavaScript?
In this post, a step by step procedure will be provided to help you develop a custom volume calculator using HTML and JavaScript from scratch.
If you’d like to check its git repository, just click here.
You can also see the demo page here:
DEMO
In this example, we are going to replicate the Epoxy Resin Volume Calculator found on this website. This particular calculator will help determine the amount of epoxy you will need for a project.
The very first thing you might wanna start is prepare the layout of your calculator using HTML and CSS.
HTML
<h2>Epoxy Resin Volume Calculator</h2>
<h4>What are the dimensions of your project?</h4>
<div class="inline-block">
<label for="length">Length (in)</label>
<input id="length" type="number" value="0">
</div>
<div class="inline-block">
<label for="width">Width (in)</label>
<input id="width" type="number" value="0">
</div>
<div class="inline-block">
<label for="thickness">Thickness (in)</label>
<input id="thickness" type="number" value="0">
</div>
<table>
<tbody>
<tr>
<td style="width: 100px;">1/8\'\' = 0.125</td>
<td style="width: 101px;">1/4\'\' = 0.25</td>
<td style="width: 103px;">3/8\'\' = 0.375</td>
<td style="width: 99px;">1/2\'\' = 0.50</td>
</tr>
<tr>
<td style="width: 100px;">5/8\'\' = 0.625</td>
<td style="width: 101px;">3/4\'\' = 0.75</td>
<td style="width: 103px;">7/8\'\' = 0.875</td>
<td style="width: 99px;">1\'\' = 1.00</td>
</tr>
<tr>
<td style="width: 100px;" colspan="4"><em>1/16\'\' or 0.0625 can be used for seal coats</em></td>
</tr>
</tbody>
</table>
<h4>Here is the volume of your project</h4>
<div class="inline-block">
<label for="output">Cubic Inches</label>
<input id="cubicInches" type="number" disabled value="0">
</div>
<div class="inline-block">
<label for="output">Cubic Feet</label>
<input id="cubicFeet" type="number" disabled value="0">
</div>
<h4>Here is the amount of epoxy resin you will need</h4>
<div class="inline-block">
<label for="output">Ounces</label>
<input id="ounces" type="number" disabled value="0">
</div>
<div class="inline-block">
<label for="output">Liters</label>
<input id="liters" type="number" disabled value="0">
</div>
<div class="inline-block">
<label for="output">Gallons</label>
<input id="gallons" type="number" disabled value="0">
</div>
CSS
<style>
.ERVcalculator {
background-color: #F6F6F6;
padding: 1em 2em 2em;
border-radius: .5em;
display: block;
opacity: .9;
max-width: 500px;
}
.ERVcalculator input {
max-width: 100px;
line-height: 2em;
}
.ERVcalculator input[disabled] {
background-color: transparent;
border: none;
font-size: 1.5em;
font-weight: 700;
display: inline-block;
}
.ERVcalculator label {
margin-bottom: .5em;
display: block;
}
.ERVcalculator label[for=output] {
margin-bottom: 0;
}
.ERVcalculator .inline-block {
max-width: 125px;
display: inline-block;
}
.ERVcalculator table {
width: 100%;
border-collapse: collapse;
margin: 1em auto 3em;
}
.ERVcalculator table tr td {
border-bottom: solid thin #333333;
height: 3em;
}
</style>
When you’ve finished setting up those, you then need to proceed applying the logic or calculations via JavaScript.
Based on the example we took, to be able to provide adequate information for Epoxy Resin volume we need to make conversions available in different units — cubic inches, cubic feet, ounces, liters, and gallons.
JavaScript
Get all the required elements by selecting their IDs. Do not forget to include the values given by the user from the calculator which are length, width, and thickness.
const vLength = document.getElementById("length"),
vWidth = document.getElementById("width"),
vThickness = document.getElementById("thickness"),
cubicInches = document.getElementById("cubicInches"),
cubicFeet = document.getElementById("cubicFeet"),
ounces = document.getElementById("ounces"),
liters = document.getElementById("liters"),
gallons = document.getElementById("gallons");
By doing a little research on Google or any search engine you may prefer, we can find the conversions of the following units.
Cubic Inches = LENGTH x WIDTH x THICKNESS
Cubic Feet = Cubic Inches ÷ 1728
Ounces = Cubic Inches ÷ 1.805
Liters = Cubic Inches ÷ 61.024
Gallons = Cubic Inches ÷ 231
The next step is to translate those conversions into JavaScript.
cubicInches.value = (vLength.value * vWidth.value * vThickness.value).toFixed(2), cubicFeet.value = (cubicInches.value / 1728).toFixed(2), ounces.value = (cubicInches.value / 1.805).toFixed(2), liters.value = (cubicInches.value / 61.024).toFixed(2), gallons.value = (cubicInches.value / 231).toFixed(2)
If you run the code, you’ll notice that you’re getting 2 decimals even if it’s a whole number. To prevent that, we need to adjust the code and replace it with the one below:
cubicInches.value = !0 === Number.isInteger(vLength.value * vWidth.value * vThickness.value) ? vLength.value * vWidth.value * vThickness.value : (vLength.value * vWidth.value * vThickness.value).toFixed(2), cubicFeet.value = !0 === Number.isInteger(cubicInches.value / 1728) ? cubicInches.value / 1728 : (cubicInches.value / 1728).toFixed(2), ounces.value = !0 === Number.isInteger(cubicInches.value / 1.805) ? cubicInches.value / 1.805 : (cubicInches.value / 1.805).toFixed(2), liters.value = !0 === Number.isInteger(cubicInches.value / 61.024) ? cubicInches.value / 61.024 : (cubicInches.value / 61.024).toFixed(2), gallons.value = !0 === Number.isInteger(cubicInches.value / 231) ? cubicInches.value / 231 : (cubicInches.value / 231).toFixed(2)
The last step is to ensure we include an event listener into the script.
For instance, you can do the following to make sure that the calculation is triggered every time a user tries to type in any of the fields:
document.getElementById("epoxyResinVolumeCalculator").innerHTML = calculatorHTML;
var cssId = "ERVCalculator";
const vLength = document.getElementById("length"),
vWidth = document.getElementById("width"),
vThickness = document.getElementById("thickness"),
cubicInches = document.getElementById("cubicInches"),
cubicFeet = document.getElementById("cubicFeet"),
ounces = document.getElementById("ounces"),
liters = document.getElementById("liters"),
gallons = document.getElementById("gallons"),
volume_array = [vLength, vWidth, vThickness];
for (let e = 0; e <= volume_array.length - 1; e++) volume_array[e].addEventListener("keyup", e => {
cubicInches.value = !0 === Number.isInteger(vLength.value * vWidth.value * vThickness.value) ? vLength.value * vWidth.value * vThickness.value : (vLength.value * vWidth.value * vThickness.value).toFixed(2),
cubicFeet.value = !0 === Number.isInteger(cubicInches.value / 1728) ? cubicInches.value / 1728 : (cubicInches.value / 1728).toFixed(2),
ounces.value = !0 === Number.isInteger(cubicInches.value / 1.805) ? cubicInches.value / 1.805 : (cubicInches.value / 1.805).toFixed(2),
liters.value = !0 === Number.isInteger(cubicInches.value / 61.024) ? cubicInches.value / 61.024 : (cubicInches.value / 61.024).toFixed(2),
gallons.value = !0 === Number.isInteger(cubicInches.value / 231) ? cubicInches.value / 231 : (cubicInches.value / 231).toFixed(2)
});
That’s it!
You can also do it in another approach, using inline JS.
Watch this video to see how you can integrate that inline JS code into any Shopify Store account.
