https://github.com/chiedev/volume-calculator
Epoxy Resin volume calculator
https://github.com/chiedev/volume-calculator
calculator volume
Last synced: 11 months ago
JSON representation
Epoxy Resin volume calculator
- Host: GitHub
- URL: https://github.com/chiedev/volume-calculator
- Owner: chiedev
- Created: 2020-07-24T17:24:24.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2020-08-03T20:26:56.000Z (almost 6 years ago)
- Last Synced: 2025-06-19T10:17:36.065Z (12 months ago)
- Topics: calculator, volume
- Language: JavaScript
- Homepage: https://chiedev.github.io/volume-calculator
- Size: 7.81 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Epoxy Resin Volume Calculator
Add the script to generate the volume calculator, preferably on footer section inside the <body> tag:
(external js file)
```
```
or (inline js)
```
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)});
```
and then use this element as container:
```
```
Check the demo here: [Epoxy Resin Volume Calculator Demo](https://chiedev.github.io/volume-calculator/)