Add the script to generate the volume calculator, preferably on footer section inside the <body> tag:
(external js file)
<script type="text/javascript" src="./index.js"></script>
or (inline js)
<script type="text/javascript">const calculatorHTML='\n<style>\n.ERVcalculator {\n background-color: #F6F6F6;\n padding: 1em 2em 2em;\n border-radius: .5em;\n display: block;\n opacity: .9;\n max-width: 500px;\n }\n .ERVcalculator input {\n max-width: 100px;\n line-height: 2em;\n }\n .ERVcalculator input[disabled] {\n background-color: transparent;\n border: none;\n font-size: 1.5em;\n font-weight: 700;\n display: inline-block;\n }\n .ERVcalculator label {\n margin-bottom: .5em;\n display: block;\n }\n .ERVcalculator label[for=output] {\n margin-bottom: 0;\n }\n .ERVcalculator .inline-block {\n max-width: 125px;\n display: inline-block;\n }\n .ERVcalculator table {\n width: 100%;\n border-collapse: collapse;\n margin: 1em auto 3em;\n }\n .ERVcalculator table tr td {\n border-bottom: solid thin #333333;\n height: 3em;\n }\n </style>\n<h2>Epoxy Resin Volume Calculator</h2>\n<h4>What are the dimensions of your project?</h4>\n<div class="inline-block">\n <label for="length">Length (in)</label>\n <input id="length" type="number" value="0">\n</div>\n<div class="inline-block">\n <label for="width">Width (in)</label>\n <input id="width" type="number" value="0">\n</div>\n<div class="inline-block">\n <label for="thickness">Thickness (in)</label>\n <input id="thickness" type="number" value="0">\n</div>\n\n<table>\n <tbody>\n <tr>\n <td style="width: 100px;">1/8\'\' = 0.125</td>\n <td style="width: 101px;">1/4\'\' = 0.25</td>\n <td style="width: 103px;">3/8\'\' = 0.375</td>\n <td style="width: 99px;">1/2\'\' = 0.50</td>\n </tr>\n <tr>\n <td style="width: 100px;">5/8\'\' = 0.625</td>\n <td style="width: 101px;">3/4\'\' = 0.75</td>\n <td style="width: 103px;">7/8\'\' = 0.875</td>\n <td style="width: 99px;">1\'\' = 1.00</td>\n </tr>\n <tr>\n <td style="width: 100px;" colspan="4"><em>1/16\'\' or 0.0625 can be used for seal coats</em></td>\n </tr>\n </tbody>\n</table>\n\n<h4>Here is the volume of your project</h4>\n<div class="inline-block">\n <label for="output">Cubic Inches</label>\n <input id="cubicInches" type="number" disabled value="0">\n</div>\n<div class="inline-block">\n <label for="output">Cubic Feet</label>\n <input id="cubicFeet" type="number" disabled value="0">\n</div>\n\n<h4>Here is the amount of epoxy resin you will need</h4>\n<div class="inline-block">\n <label for="output">Ounces</label>\n <input id="ounces" type="number" disabled value="0">\n</div>\n<div class="inline-block">\n <label for="output">Liters</label>\n <input id="liters" type="number" disabled value="0">\n</div>\n<div class="inline-block">\n <label for="output">Gallons</label>\n <input id="gallons" type="number" disabled value="0">\n</div>';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)});</script>
and then use this element as container:
<div id="epoxyResinVolumeCalculator" class="ERVcalculator"></div>
Check the demo here: Epoxy Resin Volume Calculator Demo