Hello Friends Today, through this tutorial, I will tell you How to simple energy cost calculator tool created using JavaScript with HTML? Below is a simple energy cost calculator tool created using JavaScript with HTML. This calculator allows users to input the power consumption in watts and the usage time in hours, then calculates the total energy consumption in kilowatt-hours (kWh) and the corresponding cost based on the electricity rate per kWh.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Energy Cost 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>Energy Cost Calculator</h2>
<label for="power">Power Consumption (Watts):</label>
<input type="number" id="power" placeholder="Enter power consumption (W)">
<label for="usage">Usage Time (Hours):</label>
<input type="number" id="usage" placeholder="Enter usage time (hours)">
<label for="rate">Electricity Rate (per kWh):</label>
<input type="number" id="rate" placeholder="Enter electricity rate (per kWh)">
<button onclick="calculateCost()">Calculate Cost</button>
<p id="result"></p>
<script>
function calculateCost() {
// Get input values
const power = parseFloat(document.getElementById('power').value);
const usage = parseFloat(document.getElementById('usage').value);
const rate = parseFloat(document.getElementById('rate').value);
// Calculate total energy consumption in kWh
const energyConsumption = (power * usage) / 1000;
// Calculate cost
const cost = energyConsumption * rate;
// Display the result
document.getElementById('result').innerHTML = `
Energy Consumption: ${energyConsumption.toFixed(3)} kWh<br>
Cost: $${cost.toFixed(2)}
`;
}
</script>
</body>
</html>
This HTML file creates a simple form with input fields for power consumption in watts, usage time in hours, and electricity rate per kWh. When the user clicks the “Calculate Cost” button, the `calculateCost` function is called. This function calculates the total energy consumption in kWh and the corresponding cost based on the input values and displays the result on the page.