Calculator Tools Calculator Tools
Create

Battery Capacity Calculator

Oct 13, 2023

About this app

A calculator for determining needed battery capacity from a selection of appliances.

Battery Capacity Calculator 🔋 Battery Capacity Calculator 🔌 Appliance 1 Power (in watts): Hours of use: Appliance 2 Power (in watts): Hours of use: Total power needed: 0 watt hours Total hours of use: 0 hours Needed battery capacity: 0 watts

Related apps

Put this on your site

Source

                    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Battery Capacity Calculator</title>
<meta name="description" content="A calculator for determining needed battery capacity from a selection of appliances.">
<meta name="keywords" content="calculator, battery, capacity, appliances">

<style>
body {
font-family: 'Comic Sans MS', cursive, sans-serif;
background: linear-gradient(to right, #8e44ad, #3498db);
color: white;
}
#main-container {
margin-top: 50px;
}
.appliance {
margin-bottom: 20px;
}
.total {
font-size: 24px;
font-weight: bold;
}
.emoji {
font-size: 24px;
}
</style>

<script type="text/javascript">
function calculateTotalPower() {
let totalPower = 0;
let totalHours = 0;

document.querySelectorAll('.appliance').forEach(function(appliance) {
let power = appliance.querySelector('.power').value;
let hours = appliance.querySelector('.hours').value;

totalPower += power * hours;
totalHours += parseFloat(hours);
});

document.querySelector('.total-power').innerText = totalPower.toFixed(0);
document.querySelector('.total-hours').innerText = totalHours.toFixed(0);
document.querySelector('.total-capacity').innerText = (totalPower / totalHours).toFixed(0);
}
</script>
</head>
<body>
<div id="main-container" class="container">
<h1>🔋 Battery Capacity Calculator 🔌</h1>

<div class="appliance">
<h2>Appliance 1</h2>
<p>Power (in watts): <input type="number" class="power" oninput="calculateTotalPower()"></p>
<p>Hours of use: <input type="number" class="hours" oninput="calculateTotalPower()"></p>
</div>

<div class="appliance">
<h2>Appliance 2</h2>
<p>Power (in watts): <input type="number" class="power" oninput="calculateTotalPower()"></p>
<p>Hours of use: <input type="number" class="hours" oninput="calculateTotalPower()"></p>
</div>

<div class="total">
<p>Total power needed: <span class="total-power">0</span> watt hours</p>
<p>Total hours of use: <span class="total-hours">0</span> hours</p>
<p>Needed battery capacity: <span class="total-capacity">0</span> watts</p>
</div>
</div>
</body>
</html>