Skip to content

Instantly share code, notes, and snippets.

@agrtechnology

agrtechnology/CodeSnippetForCalculatingMaterials

Created January 4, 2022 04:46
Show Gist options
  • Save agrtechnology/b95eb43ee2b95227f13c607974e014fa to your computer and use it in GitHub Desktop.
Save agrtechnology/b95eb43ee2b95227f13c607974e014fa to your computer and use it in GitHub Desktop.
Download ZIP
Used in our website design/development: https://agrtech.com.au/website-design/
Raw
CodeSnippetForCalculatingMaterials
<html>
<head>
<style>
.calculator-main{
width: 100%;
display: flex;
justify-content: center;
}
.calculator-container{
width: 320px;
}
.calculator-container *{
font-family: 'open_sansregular',Arial,sans-serif !important;
}
.calculator-header{
text-transform: uppercase;
border-bottom: 1px solid #e4e6df;
margin: 0;
font-family: 'open_sansbold';
font-size: 14px;
letter-spacing: 1px;
padding: 0px;
color: #515151;
}
.calculator-container p{
margin-top: 0px;
margin-bottom: 15px;
font-size: 13px;
color: #515151;
line-height: 20px;
}
.volume-calculator{
padding: 15px 0px;
}
.volume-calculator p{
margin: 5px 0px;
}
.volume-calculator label {
float: left;
width: 30%;
display: inline-block;
max-width: 100%;
margin-bottom: 5px;
font-weight: bold;
}
.volume-calculator span {
float: left;
width: 70%;
}
.volume-calculator span .vc-input {
width: 70px;
}
.volume-calculator .vc-answer {
display: none;
padding: 10px;
text-align: center;
color: #FFF;
background-color: #32572C;
margin: 10px 0px;
}
.volume-calculator .vc-answer p {
font-size: 16px;
font-weight: bold;
color: #FFF;
}
.volume-calculator .vc-answer h4 {
font-size: 12px;
font-weight: bold;
color: #FFF;
margin: 3px 0px;
}
</style>
</head>
<body>
<div class="calculator-main">
<div class="calculator-container">
<h3 class="calculator-header">Calculator</h3>
<p>How much material do I need?</p>
<div class="volume-calculator">
<p>
<label>Length</label>
<span>
<input type="text" name="Length" class="vc-length vc-input">
Metres
</span>
</p>
<div style="clear:both"></div>
<p></p>
<p>
<label>Width</label>
<span>
<input type="text" name="width" class="vc-width vc-input">
Metres
</span>
</p>
<div style="clear:both"></div>
<p></p>
<p>
<label>Depth</label>
<span>
<input type="text" name="depth" class="vc-depth vc-input">
Metres
</span>
</p>
<div style="clear:both"></div>
<p></p>
<div style="clear:both"></div>
<div class="vc-answer"></div>
</div>
</div>
</div>
</body>
<script>
const inputWidth = document.querySelector('.vc-width')
const inputLength = document.querySelector('.vc-length')
const inputThickness = document.querySelector('.vc-depth')
const panelAnswer = document.querySelector('.vc-answer')
const events = "change keyup keydown";
const calculateVolume = () => {
const width = inputWidth.value;
const length = inputLength.value;
const thickness = inputThickness.value;
if(width != '' && length != '' && thickness != '')
{
var result = width * length * thickness;
console.log( result )
panelAnswer.style.display = "block";
panelAnswer.innerHTML = '<h4>From the above specifications, you will require</h4><p>' + result + " Cubic Metres</p>";
}
else
{
panelAnswer.style.display = "none";
}
}
events.split(" ").forEach( (e) => {
inputWidth.addEventListener( e, calculateVolume, false);
inputLength.addEventListener( e, calculateVolume, false);
inputThickness.addEventListener( e, calculateVolume, false);
});
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment