1
\$\begingroup\$

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 {
  padding: 20px;
  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>

Thanks in advance!

\$\endgroup\$

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.