Hello Friends Today, through this tutorial, I will tell you How to Write Program Kilowatts to Kilowatt-hours (kWh) calculator using JavaScript with HTML? To create a Kilowatts to Kilowatt-hours (kWh) calculator using JavaScript with HTML, you can use the following example. This calculator will allow users to input power in kilowatts (kW) and time in hours to calculate the energy consumption in kilowatt-hours.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kilowatts to Kilowatt-hours 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>Kilowatts to Kilowatt-hours Calculator</h2>
<label for="power">Enter Power (kW):</label>
<input type="number" id="power" placeholder="Enter power in kW">
<label for="time">Enter Time (hours):</label>
<input type="number" id="time" placeholder="Enter time in hours">
<button onclick="calculateKWH()">Calculate kWh</button>
<p id="result"></p>
<script>
function calculateKWH() {
// Get the power input value
const power = parseFloat(document.getElementById('power').value);
// Get the time input value
const time = parseFloat(document.getElementById('time').value);
// Calculate energy consumption (kWh)
const energy = power * time;
// Display the result
document.getElementById('result').innerHTML = `Energy Consumption (kWh): ${energy.toFixed(2)} kWh`;
}
</script>
</body>
</html>
This HTML file includes two input fields for entering power in kilowatts (kW) and time in hours, a button to trigger the calculation, and a result paragraph to display the calculated energy consumption in kilowatt-hours (kWh). When the button is clicked, the `calculateKWH` function is called, which performs the calculation and updates the result on the page.