Build BSES Electricity Bill Calculator Online Tool in Browser Using HTML5 & Javascript Full Project For Beginners

 

 

 

index.html

 

 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css"/>
<div class="container-fluid">

  <div class="row">

    <div class="col-xs-12 col-sm-12 col-md-6 col-md-offset-3 col-lg-6 col-lg-offset-3 reducedCol well text-center">
      <form action="#box" role="form" name="elecForm" class="form">
        <fieldset class="form-group form-inline">

          <label for="curr">Current Reading</label> <input class="form-control inp" name="curr" type="number" value="" placeholder="Units in kWh">

          <label for="prev">Previous Reading</label> <input class="form-control inp" name="prev" type="" value="" placeholder="Units in kWh">

        </fieldset>

        <fieldset class="form-group form-inline">
          <label for="startDate">Start Date</label>
          <input class="form-control inp" name="startDate" type="date">
          <label for="endDate">End Date</label>
          <input class="form-control inp" name="endDate" type="date">
        </fieldset>

        <fieldset class="form-group form-inline">
          <label for="sancLoad">Sanctioned Load</label>
          <select class="form-control inp" name="sancLoad">
            <option>2 kW</option>
            <option>>2-5 kW</option>
          </select>
        </fieldset>

        <fieldset class="form-group">
          <button class="btn bg-primary getButton" type="button" onClick="calcBill(this.form)">Get Bill</button>
        </fieldset>
      </form>
    </div>

    <div class="col-xs-12 col-sm-12 col-md-4 col-md-offset-4 col-lg-4 col-lg-offset-4">
      <div class="box text-responsive" id="#box">
        <center>
          <h2>Bill : </h2><span class="change" id="change"></span></center>
      </div>
    </div>

  </div>


</div>

<div class="container-fluid">
  <nav class="navbar navbar-dark navbar-fixed-bottom foot" style="background-color : #555;color : white">
    <span class="navbar-brand"><center>Made By Aarush~chargE</center></span>
  </nav>
</div>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

 

 

style.css

 

 

html,
body {
  font-family : Monospace;
  background-color : #222;
  color : white;
}
.reducedCol {
  margin-top:10vh;
  background-color : #403D3F;
  border : 0px #FFF solid;
}

.inp {
  background-color : #333;
  color : #FFF;
  font-color : #FFF;
  border : 2px solid white;
  transition : background-color 0.5s,border 0.5s;
}
.inp:focus {
  background-color : #000;
  outline : none !important;
  border-color: #39FF14;
  -webkit-box-shadow: none;
  box-shadow: none;
}
.inp:hover {
  outline : none !important;
  border-color: #39FF14;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.box {
  display  : block;
}
.change {
  font-size  : 3em;
}

.foot {
  margin-top : 70px;
}

.getButton {
  background-color : #010101 !important;
  
  transition : background-color 1s,border 1s;
  color : white !important;
}

.getButton:hover {
  border : 1.5px solid white;
  background-color : #353535 !important;
  color : white !important;
}

 

 

script.js

 

 

Date.prototype.monthDays= function(){
    var d= new Date(this.getFullYear(), this.getMonth()+1, 0);
    return d.getDate();
}

function getSlab(sDate,eDate) {
  var slab = 0;
  if(sDate.getMonth() === eDate.getMonth()) {
    slab += (eDate.getDate()+1 - sDate.getDate())/sDate.monthDays();
  }
  else {
    slab += (sDate.monthDays()+1-sDate.getDate())/sDate.monthDays();
    slab += eDate.getDate()/eDate.monthDays();
   
  }
  console.log(slab);
  return slab;
}

function unitsPrice(units,slab) {
	var pay = 0;
  if(units < 0) {
    return pay;
  }
  console.log(units+" "+pay);
  
	if(units === 0) {
		return pay;
	}
	if(units > 1200) {
		pay += ((units-1200)*slab)*8.75;
		units = 1200;
		return pay+unitsPrice(units,slab);
	}
	else if(units > 800) {
		pay += ((units - 800)*slab)*8.10;
		units = 800;
		return pay+unitsPrice(units,slab);
	}
	else if(units > 400) {
		pay += ((units-400)*slab)*7.30;
		units = 400;
		return pay+unitsPrice(units,slab);
	}
	else if(units > 200) {
		pay += ((units-200)*slab)*5.95;
		units = 200;
		return pay+unitsPrice(units,slab);
	}
	else {
		pay+= ((units)*slab)*4.00;
		units = 0;
		return pay+unitsPrice(units,slab);
	}
}
function calcBill(f) {
  var units = parseFloat(f.curr.value) - parseFloat(f.prev.value);
  units = parseInt(units);
  startDate = new Date(f.startDate.value);
  endDate = new Date(f.endDate.value);
  console.log(startDate);
  console.log(endDate);
  
  var bill = 0;
  var slab = getSlab(startDate,endDate)

  //FIXED CHARGES with 8% surcharge 
  if(f.sancLoad.value === "2 kW") {
    bill += 40*slab*1.08;
  }
  if(f.sancLoad.value === ">2-5 kW") {
    bill += 100*slab*1.08;
  }

  bill += unitsPrice(units,slab);
  bill = bill*1.06; //PPAC  charges 6%
  bill = bill*1.08; //8% Surcharge 8%
  
  bill = bill*1.05 //Electriciy Tax 5%

  bill = (bill).toFixed(2);
  if(!units) {
    $("#change").empty().html("Wrong Input");
    return;
  }
  $("#change").empty().html("₹"+bill+" (incl. taxes)");
  var scrollPos =  $("#box").offset().top;
 $(window).scrollTop(scrollPos);

}

Leave a Reply