# Here's my attempt at a Volumetric Weight Calculator (in cm). How did I do?

So, I've written this small calculator for computing the volumetric weight of a parcel. I've been trying to kick some bad habits to the kerb lately so I was wondering if I could get a code review. Specifically, I'm hoping you lovely people could point out/correct my pitfalls in this example.

Here's the Calculator:

var getSpans = document.getElementsByClassName('calcValues'); // Get all Spans
// console.log("Span Array:", getSpans);

var getInputs = document.getElementsByClassName('calcInput'); // Get all inputs
// console.log("Input Array:", getInputs);

const calcDivisionVal = 6000; // Dividing Factor
$(getInputs[0]).val(calcDivisionVal); // Set Dividing Factor // Set Placeholders$(getInputs[1]).attr("placeholder", "0");
$(getInputs[2]).attr("placeholder", "0");$(getInputs[3]).attr("placeholder", "0");
$(getInputs[4]).attr("placeholder", "0");$('input').keyup(function() { // run anytime the value changes

var lengthVal = $(getInputs[1]).val(); var widthVal =$(getInputs[2]).val();
var heightVal = $(getInputs[3]).val(); var DivisionVal =$(getInputs[0]).val();
var resultVal = $(getInputs[4]).val(); var volume = lengthVal * widthVal * heightVal; var volumeWeight = volume / DivisionVal; x = volumeWeight - parseInt(volumeWeight); if (x <= 0.5 && 0 < x && calcDivisionVal == 6000) { y = 0.5; } else { y = 1; } if (x == 0) y = 0; calcedWeight = volumeWeight - x + y; if (volume != 0 && (isNaN(calcedWeight) || calcedWeight < 1)) calcedWeight = 1; // console.log("Answer:", calcedWeight); resultVal =$(getInputs[4]).val(parseFloat(calcedWeight))

if (volumeWeight > 0) {

// Set Spans to reflect inputted values
var spanLengthVal = $(getSpans[0]).html($(getInputs[1]).val());
var spanWidthVal = $(getSpans[1]).html($(getInputs[2]).val());
var spanHeightVal = $(getSpans[2]).html($(getInputs[3]).val());
var spanDivisionVal = $(getSpans[3]).html($(getInputs[0]).val());
var spanResultVal = $(getSpans[4]).html($(getInputs[4]).val());

} else {

// Set Spans to default values
var spanLengthVal = $(getSpans[0]).html("Length"); var spanWidthVal =$(getSpans[1]).html("Width");
var spanHeightVal = $(getSpans[2]).html("Height"); var spanDivisionVal =$(getSpans[3]).html(calcDivisionVal);
var spanResultVal = $(getSpans[4]).html("Volumetric Weight"); } });$('input').keyup();
body {
font-family: Helvetica;
}

.wrapper {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 10px;
}

.box input[type=text] {
box-sizing: border-box;
display: inline-block;
}

.box .appended {
display: inline-block;
font-size: 12px;
}

.calcValues {
font-weight: bold;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p><span class="calcValues lengthVal">Length</span> x <span class="calcValues widthVal">Width</span> x <span class="calcValues HeightVal">Height</span> in centimetres / <span class="calcValues divisionVal">6000</span> = <span class="calcValues ResultVal">Volumetric Weight</span>  in kilograms rounded up to the nearest 0.5kg.</p>

<form name="vwc-form">

<input type="hidden" id="calcDivision" class="calcInput" name="calcDivision">

<div class="wrapper">

<div class="box calcLength">
<label for="calcLength">Length:</label>
<input type="text" id="calcLength" class="calcInput" name="calcLength">
<span class="appended">cm</span>
</div>

<div class="box calcWidth">
<label for="calcWidth">Width:</label>
<input type="text" id="calcWidth" class="calcInput" name="calcWidth">
<span class="appended">cm</span>
</div>

<div class="box calcHeight">
<label for="calcHeight">Height:</label>
<input type="text" id="calcHeight" class="calcInput" name="calcHeight">
<span class="appended">cm</span>
</div>

<div class="box calcResult">
<label for="calcResult">Result:</label>
<input type="text" id="calcResult" class="calcInput" name="calcResult" disabled>
<span class="appended">kg</span>
</div>

</div>

</form>