Hello Friends Today, through this tutorial, I will tell you How to create an Electricity Bill Tool using JavaScript with HTML? To create an Electricity Bill Tool using JavaScript with HTML, you can follow this example. This tool calculates the electricity bill based on the provided units and the applicable tariff rates.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Electricity Bill Calculator</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
label {
display: block;
margin-bottom: 8px;
}
input {
width: 100%;
padding: 8px;
margin-bottom: 16px;
box-sizing: border-box;
}
button {
background-color: #4CAF50;
color: white;
padding: 10px 15px;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<h2>Electricity Bill Calculator</h2>
<label for="units">Enter Units Consumed:</label>
<input type="number" id="units" placeholder="Enter units consumed">
<button onclick="calculateBill()">Calculate Bill</button>
<p id="result"></p>
<script>
function calculateBill() {
// Get the units input value
const units = parseFloat(document.getElementById('units').value);
// Define tariff rates
const firstSlabRate = 5.0; // Rate for the first 100 units
const secondSlabRate = 7.0; // Rate for units beyond 100
let bill = 0;
// Calculate bill based on slab rates
if(units <= 100) {
bill = units * firstSlabRate;
} else {
bill = (100 * firstSlabRate) + ((units - 100) * secondSlabRate);
}
// Display the result
document.getElementById('result').innerHTML = `Your electricity bill is $${bill.toFixed(2)}`;
}
</script>
</body>
</html>
In this tool, users can input the number of units consumed, and upon clicking the “Calculate Bill” button, the total electricity bill is computed based on predefined slab rates. Adjust the slab rates as per your region’s electricity tariff structure.