engineervix/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <meta name="description" content="" />
    <meta name="author" content="" />

    <title>Electricity Tariff Calculator</title>

    <!-- Bootstrap core CSS -->
    <link
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
      rel="stylesheet"
    />
  </head>
  <body>
    <!-- Page Content -->
    <div class="container-fluid">
      <!-- Page Heading -->
      <h1 class="my-4">Electricity Tariff Calculator</h1>

      <div class="row">
        <div class="col">
          <div class="row">
            <div class="col-12">
              <form
                id="kwacha-amount"
                class="form-inline needs-validation"
                novalidate
              >
                <label class="sr-only" for="amount_rendered"
                  >Amount Rendered</label
                >
                <div class="input-group mb-2 mr-sm-2">
                  <div class="input-group-prepend">
                    <div class="input-group-text">ZMK</div>
                  </div>
                  <input
                    type="number"
                    min="0"
                    class="form-control"
                    id="amount_rendered"
                    placeholder="Amount Rendered"
                    required
                  />
                  <div class="invalid-feedback">
                    You must enter an amount greater than 0!
                  </div>
                </div>

                <button
                  id="calculate"
                  type="submit"
                  class="btn btn-primary mb-2"
                >
                  Calculate
                </button>
              </form>
            </div>
            <div class="col-12">
              <table
                style="display:none;"
                id="results"
                class="table table-sm table-hover"
              >
                <tr>
                  <th></th>
                  <th>Current Tariffs</th>
                  <th>Old Tariffs</th>
                </tr>
                <tr>
                  <td>Energy Units purchased in kWh</td>
                  <td id="kWh-new"></td>
                  <td id="kWh-old"></td>
                </tr>
                <tr>
                  <td>Energy charge</td>
                  <td id="energy-charge-new"></td>
                  <td id="energy-charge-old"></td>
                </tr>
                <tr>
                  <td>VAT @16%</td>
                  <td id="vat-new"></td>
                  <td id="vat-old"></td>
                </tr>
                <tr>
                  <td>Excise duty</td>
                  <td id="exc-duty-new"></td>
                  <td id="exc-duty-old"></td>
                </tr>
                <tr>
                  <td><strong>Total</strong></td>
                  <td id="total-new"></td>
                  <td id="total-old"></td>
                </tr>
              </table>
            </div>
          </div>
        </div>
        <div class="col">
          <table class="table table-sm table-dark table-striped table-hover">
            <thead>
              <tr>
                <th scope="col">&numero;</th>
                <th scope="col">Tariff Structure</th>
                <th scope="col">Current Rates</th>
                <th scope="col">Old Rates</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th scope="row">R1</th>
                <td>From 1 - 100kWh</td>
                <td>0.47</td>
                <td>0.15</td>
              </tr>
              <tr>
                <th scope="row">R2</th>
                <td>From 101 - 300kWh</td>
                <td>0.85</td>
                <td>0.89</td>
              </tr>
              <tr>
                <th scope="row">R3</th>
                <td>Above 300kWh</td>
                <td>N/A</td>
                <td>1.94</td>
              </tr>
              <tr>
                <th scope="row"></th>
                <td>Fixed Charge</td>
                <td>Removed</td>
                <td>18.23</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>

    <!-- Bootstrap core JavaScript -->
    <script
      src="https://code.jquery.com/jquery-3.4.1.slim.js"
      integrity="sha256-BTlTdQO9/fascB1drekrDVkaKd9PkwBymMlHOiG+qLI="
      crossorigin="anonymous"
    ></script>
    <script
      type="text/javascript"
      src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.1/dist/jquery.validate.min.js"
    ></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>

    <script type="text/javascript" src="script.js"></script>
  </body>
</html>

## script.js
(function() {
  "use strict";
  window.addEventListener(
    "load",
    function() {
      // Fetch all the forms we want to apply custom Bootstrap validation styles to
      var forms = document.getElementsByClassName("needs-validation");
      // Loop over them and prevent submission
      var validation = Array.prototype.filter.call(forms, function(form) {
        form.addEventListener(
          "submit",
          function(event) {
            if (form.checkValidity() === false) {
              event.preventDefault();
              event.stopPropagation();
            }
            form.classList.add("was-validated");
          },
          false
        );
      });
    },
    false
  );
})();

$(function() {
  $("#kwacha-amount").submit(function() {
    if ($(this).valid()) {
      var amount_rendered = $("#amount_rendered").val();
      calculate_tariff(amount_rendered);
      // alert("Amount Rendered: " + amount_rendered);
      $("#results").show();
    }
  });
});

function calculate_tariff(amount) {
  // This is the tariff structure
  var tariff_structure = [
    {
      id: "R1",
      current_rate: 0.47,
      old_rate: 0.15
    },
    {
      id: "R2",
      current_rate: 0.85,
      old_rate: 0.89
    },
    {
      id: "R3",
      current_rate: 1.94,
      old_rate: 0
    }
  ];

  var exc_duty_markup = 1.03;
  var vat_markup = 1.16;

  var taxed_rates = [];

  _.forEach(tariff_structure, function(element, i) {
    taxed_current_rate = vat_markup * exc_duty_markup * element["current_rate"];
    taxed_old_rate = vat_markup * exc_duty_markup * element["old_rate"];
    id = i + 1;

    taxed_rates.push({
      id: "R" + id,
      current_rate: taxed_current_rate,
      old_rate: taxed_old_rate
    });
  });

  function R1_kWh_new(amount) {
    if (amount / taxed_rates[0]["current_rate"] > 100) {
      return 100;
    } else {
      return amount / taxed_rates[0]["current_rate"];
    }
  }

  function R2_kWh_new(amount) {
    if (amount / taxed_rates[0]["current_rate"] > 100) {
      balance = amount - 100 * taxed_rates[0]["current_rate"];
      if (balance / taxed_rates[1]["current_rate"] > 200) {
        return 200;
      } else {
        return balance / taxed_rates[1]["current_rate"];
      }
    } else {
      return 0;
    }
  }

  function R3_kWh_new(amount) {
    if (amount / taxed_rates[0]["current_rate"] > 100) {
      balance = amount - 100 * taxed_rates[0]["current_rate"];
      if (balance / taxed_rates[1]["current_rate"] > 200) {
        new_balance =
          amount -
          200 * taxed_rates[1]["current_rate"] -
          100 * taxed_rates[0]["current_rate"];
        return new_balance / taxed_rates[2]["current_rate"];
      } else {
        return 0;
      }
    } else {
      return 0;
    }
  }

  // For testing ...
  // console.log(
  //   "Total kWh (New Rates) = " +
  //     _.sum([R1_kWh_new(amount), R2_kWh_new(amount), R3_kWh_new(amount)])
  // );
  var total_kwh_new_rates = _.sum([
    R1_kWh_new(amount),
    R2_kWh_new(amount),
    R3_kWh_new(amount)
  ]);
  $("#kWh-new").html("<strong>" + total_kwh_new_rates + "</strong>");

  var fixed_charge = 18.23;

  var kWh = [];
  var energy_charge = [];
  var VAT = [];
  var excise_duty = [];
  var total = [];
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8" />
	<meta
	name="viewport"
	content="width=device-width, initial-scale=1, shrink-to-fit=no"
	/>
	<meta name="description" content="" />
	<meta name="author" content="" />

	<title>Electricity Tariff Calculator</title>

	<!-- Bootstrap core CSS -->
	<link
	href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
	rel="stylesheet"
	/>
	</head>
	<body>
	<!-- Page Content -->
	<div class="container-fluid">
	<!-- Page Heading -->
	<h1 class="my-4">Electricity Tariff Calculator</h1>

	<div class="row">
	<div class="col">
	<div class="row">
	<div class="col-12">
	<form
	id="kwacha-amount"
	class="form-inline needs-validation"
	novalidate
	>
	<label class="sr-only" for="amount_rendered"
	>Amount Rendered</label
	>
	<div class="input-group mb-2 mr-sm-2">
	<div class="input-group-prepend">
	<div class="input-group-text">ZMK</div>
	</div>
	<input
	type="number"
	min="0"
	class="form-control"
	id="amount_rendered"
	placeholder="Amount Rendered"
	required
	/>
	<div class="invalid-feedback">
	You must enter an amount greater than 0!
	</div>
	</div>

	<button
	id="calculate"
	type="submit"
	class="btn btn-primary mb-2"
	>
	Calculate
	</button>
	</form>
	</div>
	<div class="col-12">
	<table
	style="display:none;"
	id="results"
	class="table table-sm table-hover"
	>
	<tr>
	<th></th>
	<th>Current Tariffs</th>
	<th>Old Tariffs</th>
	</tr>
	<tr>
	<td>Energy Units purchased in kWh</td>
	<td id="kWh-new"></td>
	<td id="kWh-old"></td>
	</tr>
	<tr>
	<td>Energy charge</td>
	<td id="energy-charge-new"></td>
	<td id="energy-charge-old"></td>
	</tr>
	<tr>
	<td>VAT @16%</td>
	<td id="vat-new"></td>
	<td id="vat-old"></td>
	</tr>
	<tr>
	<td>Excise duty</td>
	<td id="exc-duty-new"></td>
	<td id="exc-duty-old"></td>
	</tr>
	<tr>
	<td><strong>Total</strong></td>
	<td id="total-new"></td>
	<td id="total-old"></td>
	</tr>
	</table>
	</div>
	</div>
	</div>
	<div class="col">
	<table class="table table-sm table-dark table-striped table-hover">
	<thead>
	<tr>
	<th scope="col">&numero;</th>
	<th scope="col">Tariff Structure</th>
	<th scope="col">Current Rates</th>
	<th scope="col">Old Rates</th>
	</tr>
	</thead>
	<tbody>
	<tr>
	<th scope="row">R1</th>
	<td>From 1 - 100kWh</td>
	<td>0.47</td>
	<td>0.15</td>
	</tr>
	<tr>
	<th scope="row">R2</th>
	<td>From 101 - 300kWh</td>
	<td>0.85</td>
	<td>0.89</td>
	</tr>
	<tr>
	<th scope="row">R3</th>
	<td>Above 300kWh</td>
	<td>N/A</td>
	<td>1.94</td>
	</tr>
	<tr>
	<th scope="row"></th>
	<td>Fixed Charge</td>
	<td>Removed</td>
	<td>18.23</td>
	</tr>
	</tbody>
	</table>
	</div>
	</div>
	</div>

	<!-- Bootstrap core JavaScript -->
	<script
	src="https://code.jquery.com/jquery-3.4.1.slim.js"
	integrity="sha256-BTlTdQO9/fascB1drekrDVkaKd9PkwBymMlHOiG+qLI="
	crossorigin="anonymous"
	></script>
	<script
	type="text/javascript"
	src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.1/dist/jquery.validate.min.js"
	></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>

	<script type="text/javascript" src="script.js"></script>
	</body>
	</html>
	(function() {
	"use strict";
	window.addEventListener(
	"load",
	function() {
	// Fetch all the forms we want to apply custom Bootstrap validation styles to
	var forms = document.getElementsByClassName("needs-validation");
	// Loop over them and prevent submission
	var validation = Array.prototype.filter.call(forms, function(form) {
	form.addEventListener(
	"submit",
	function(event) {
	if (form.checkValidity() === false) {
	event.preventDefault();
	event.stopPropagation();
	}
	form.classList.add("was-validated");
	},
	false
	);
	});
	},
	false
	);
	})();

	$(function() {
	$("#kwacha-amount").submit(function() {
	if ($(this).valid()) {
	var amount_rendered = $("#amount_rendered").val();
	calculate_tariff(amount_rendered);
	// alert("Amount Rendered: " + amount_rendered);
	$("#results").show();
	}
	});
	});

	function calculate_tariff(amount) {
	// This is the tariff structure
	var tariff_structure = [
	{
	id: "R1",
	current_rate: 0.47,
	old_rate: 0.15
	},
	{
	id: "R2",
	current_rate: 0.85,
	old_rate: 0.89
	},
	{
	id: "R3",
	current_rate: 1.94,
	old_rate: 0
	}
	];

	var exc_duty_markup = 1.03;
	var vat_markup = 1.16;

	var taxed_rates = [];

	_.forEach(tariff_structure, function(element, i) {
	taxed_current_rate = vat_markup * exc_duty_markup * element["current_rate"];
	taxed_old_rate = vat_markup * exc_duty_markup * element["old_rate"];
	id = i + 1;

	taxed_rates.push({
	id: "R" + id,
	current_rate: taxed_current_rate,
	old_rate: taxed_old_rate
	});
	});

	function R1_kWh_new(amount) {
	if (amount / taxed_rates[0]["current_rate"] > 100) {
	return 100;
	} else {
	return amount / taxed_rates[0]["current_rate"];
	}
	}

	function R2_kWh_new(amount) {
	if (amount / taxed_rates[0]["current_rate"] > 100) {
	balance = amount - 100 * taxed_rates[0]["current_rate"];
	if (balance / taxed_rates[1]["current_rate"] > 200) {
	return 200;
	} else {
	return balance / taxed_rates[1]["current_rate"];
	}
	} else {
	return 0;
	}
	}

	function R3_kWh_new(amount) {
	if (amount / taxed_rates[0]["current_rate"] > 100) {
	balance = amount - 100 * taxed_rates[0]["current_rate"];
	if (balance / taxed_rates[1]["current_rate"] > 200) {
	new_balance =
	amount -
	200 * taxed_rates[1]["current_rate"] -
	100 * taxed_rates[0]["current_rate"];
	return new_balance / taxed_rates[2]["current_rate"];
	} else {
	return 0;
	}
	} else {
	return 0;
	}
	}

	// For testing ...
	// console.log(
	// "Total kWh (New Rates) = " +
	// _.sum([R1_kWh_new(amount), R2_kWh_new(amount), R3_kWh_new(amount)])
	// );
	var total_kwh_new_rates = _.sum([
	R1_kWh_new(amount),
	R2_kWh_new(amount),
	R3_kWh_new(amount)
	]);
	$("#kWh-new").html("<strong>" + total_kwh_new_rates + "</strong>");

	var fixed_charge = 18.23;

	var kWh = [];
	var energy_charge = [];
	var VAT = [];
	var excise_duty = [];
	var total = [];
	}