Cost Calculator

<div class="w-100 container p-0">
<style scoped>
  .calculator {
    border: #9c9c9c;
    border-width: 2px;
    border-style: solid;
    padding: 2em 1em;
    border-radius: 10px;
  }

  .calculator label {
    letter-spacing: 0 !important;
    text-transform: none !important;
    font-size: 1em !important;
  }

  .calculator input {
    width: 100%;
    border-radius: 10px;
  }

  .costPerKMClass {
    font-size: 1.4em;
    color: #38a849;
    font-weight: bold;
  }
</style>
<div class="row d-flex justify-content-center">
  <div class="col-12 col-md-4 d-flex flex-column justify-content-center text-center me-md-5">
    <h3>Cost Calculator</h3>
    <p>We help you calculate expenses which you will incur by using our
      E-Cycles. To check
      your
      monthly electricity expenses, you just have to enter distance in kms you travel in a day
      and per unit electricity price in your area. As per current inputs, average running cost
      for GHMEV Cycles is
      <br />
      <span class="costPerKMClass">₹
        <span id="costPerKM"></span> per km</span>
    </p>
  </div>
  <div class="col-12 col-md-4 mt-3 mt-md-0 calculator">
    <label for="kmPerDay" class="mb-1">Enter Kms driven per day</label>
    <input id="kmPerDay" oninput="calcCost()" type="number" value="10" />
    <label for="perUnitPrice" class="mt-3 mb-1">Enter per unit electricity price</label>
    <input id="perUnitPrice" oninput="calcCost()" type="number" value="4" />
    <p class="mt-3">You can travel around <span class="costPerKMClass"><span
          id="noOfKmsPerMon"></span> KM</span> in a month at just
      <span class="costPerKMClass">₹<span id="costPerMonth"></span></span>.
    </p>
  </div>

</div>

<script type="text/javascript">
  let kmPerDayEle = document.getElementById("kmPerDay");
  let perUnitPriceEle = document.getElementById("perUnitPrice");
  let costPerKMEle = document.getElementById("costPerKM");
  let costPerMonthEle = document.getElementById("costPerMonth");
  let noOfKmsPerMonEle = document.getElementById("noOfKmsPerMon");
  costPerKMEle.innerText = (perUnitPriceEle.value / 140).toFixed(2);
  costPerMonthEle.innerText = Math.round((kmPerDayEle.value * 30 / 140) * perUnitPriceEle.value);
  noOfKmsPerMonEle.innerText = kmPerDayEle.value * 30;

  function calcCost() {
    // console.log(1);
    // console.log(kmPerDayEle.value);
    // console.log(perUnitPriceEle.value);
    if (perUnitPriceEle.value < 0) {
      perUnitPriceEle.value = 0;
    }
    if (kmPerDayEle.value < 0) {
      kmPerDayEle.value = 0;
    }
    costPerKMEle.innerText = (perUnitPriceEle.value / 140).toFixed(2);
    costPerMonthEle.innerText = Math.round((kmPerDayEle.value * 30 / 140) * perUnitPriceEle.value);
    noOfKmsPerMonEle.innerText = Math.round(kmPerDayEle.value * 30);
  }
</script>
</div>