⚡ Electricity Bill Calculator (Servlet + JSP + Bootstrap + jQuery)

A responsive web app that calculates an electricity bill using slab-wise (tiered) pricing, built with Java Servlets (controller/logic), JSP (views), and styled with Bootstrap 5 + jQuery for client-side validation.

Tariff Slabs

Slab	Units	Rate / Unit
1	First 50 units	Rs. 3.50
2	Next 100 units (51–150)	Rs. 4.00
3	Next 100 units (151–250)	Rs. 5.20
4	Above 250 units	Rs. 6.50

Billing is tiered, meaning each slab is charged only for the units that fall inside it — e.g. for 300 units:

50  units × Rs. 3.50 = Rs. 175.00
100 units × Rs. 4.00 = Rs. 400.00
100 units × Rs. 5.20 = Rs. 520.00
50  units × Rs. 6.50 = Rs. 325.00
--------------------------------
Total                = Rs. 1420.00

Project Structure

ElectricityBillCalculator/
├── pom.xml
├── src/main/java/com/billcalc/
│   └── BillCalculatorServlet.java   # Handles form submission + slab-wise calculation
└── src/main/webapp/
    ├── index.jsp                    # Input form (Bootstrap + client-side validation)
    ├── result.jsp                   # Bill breakdown / summary page
    ├── css/style.css                # Custom styling
    ├── js/validate.js               # jQuery form validation
    └── WEB-INF/web.xml              # Deployment descriptor

Tech Stack

• Backend: Java Servlet (javax.servlet, compatible with Tomcat 8.x / 9.x)
• Views: JSP
• Frontend: Bootstrap 5 (via CDN), Bootstrap Icons, jQuery 3.7 (via CDN)
• Build: Maven (packaged as a .war)

Note on Tomcat version: This project uses the classic javax.servlet namespace, which runs on Tomcat 8/9. If you're using Tomcat 10+ (which moved to jakarta.servlet), update the imports in BillCalculatorServlet.java from javax.servlet.* to jakarta.servlet.* and swap the Maven dependency coordinates in pom.xml accordingly.

How to Build & Run

Option A — Maven + Tomcat (recommended)

1. Make sure you have JDK 8+, Maven, and Apache Tomcat 8/9 installed.
2. From the project root, build the WAR:

   mvn clean package

3. Copy the generated target/ElectricityBillCalculator.war into Tomcat's webapps/ folder.
4. Start Tomcat, then open:

   http://localhost:8080/ElectricityBillCalculator/
   

Option B — Eclipse / NetBeans / IntelliJ

1. Import the project as an existing Maven project.
2. Add a Tomcat 8/9 server runtime in your IDE.
3. Right-click the project → Run on Server.
4. The app will open at index.jsp.

How It Works

1. index.jsp — the form collects the consumer's name and units consumed. jQuery (js/validate.js) validates the inputs in the browser before submitting (non-empty name, valid non-negative number of units).
2. BillCalculatorServlet (/calculateBill) — receives the POST request, re-validates on the server side (never trust client input), applies the tiered slab calculation, and forwards the results to result.jsp using request.setAttribute(...) + RequestDispatcher.
3. result.jsp — renders a slab-wise breakdown table and the final payable amount using Bootstrap styling.

Notes

• All UI is responsive (mobile, tablet, desktop) via Bootstrap's grid and utility classes.
• Server-side validation is the source of truth; jQuery validation is purely for a smoother UX.
• Meter rent / service charge fields are included in the calculation and currently default to 0 — easy to change in BillCalculatorServlet.java if your assignment requires fixed charges.