Electricity Bill Unit Rate Calculator
This calculator helps you understand the cost of your electricity consumption based on the unit rate you are charged by your electricity provider. By inputting your meter readings or the total units consumed and the price per unit, you can quickly estimate the cost of a specific period or appliance.
function calculateElectricityCost() {
var unitsConsumedInput = document.getElementById("unitsConsumed");
var pricePerUnitInput = document.getElementById("pricePerUnit");
var resultDiv = document.getElementById("result");
var unitsConsumed = parseFloat(unitsConsumedInput.value);
var pricePerUnit = parseFloat(pricePerUnitInput.value);
if (isNaN(unitsConsumed) || isNaN(pricePerUnit) || unitsConsumed < 0 || pricePerUnit < 0) {
resultDiv.innerHTML = "Please enter valid positive numbers for units consumed and price per unit.";
return;
}
var totalCost = unitsConsumed * pricePerUnit;
resultDiv.innerHTML = "
Estimated Electricity Cost:
£" + totalCost.toFixed(2) + "";
}
#electricity-bill-calculator {
font-family: Arial, sans-serif;
border: 1px solid #ccc;
padding: 20px;
border-radius: 8px;
max-width: 400px;
margin: 20px auto;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
#electricity-bill-calculator h2 {
text-align: center;
margin-bottom: 20px;
color: #333;
}
#electricity-bill-calculator p {
line-height: 1.6;
color: #555;
text-align: justify;
}
.calculator-inputs {
margin-top: 25px;
}
.input-group {
margin-bottom: 15px;
}
.input-group label {
display: block;
margin-bottom: 5px;
font-weight: bold;
color: #444;
}
.input-group input[type="number"] {
width: calc(100% – 12px);
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box; /* Include padding and border in the element's total width and height */
}
#electricity-bill-calculator button {
width: 100%;
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
margin-top: 10px;
transition: background-color 0.3s ease;
}
#electricity-bill-calculator button:hover {
background-color: #45a049;
}
.calculator-result {
margin-top: 25px;
padding: 15px;
background-color: #f0f0f0;
border: 1px solid #ddd;
border-radius: 4px;
text-align: center;
}
.calculator-result h3 {
margin-top: 0;
color: #333;
}
.calculator-result p {
font-size: 18px;
color: #333;
margin-bottom: 0;
}
.calculator-result strong {
color: #d9534f;
}