<!-- حاسبة فاتورة الكهرباء ثنائية اللغة (عربي / إنجليزي) -->
<button id="toggleLang" class="btn switch">English</button>
Electricity bill calculator
Calculate your monthly consumption and its approximate cost
<button id="addDevice" class="btn primary" data-ar="إضافة" data-en="Add">addition</button>
Monthly results
| The device | Inputs | Monthly consumption (kWh) | Monthly cost (riyals) | |
|---|
| Monthly total | 0 | 0 | |
The bill is calculated based on a tariff of 0.18 riyals up to 6000 kWh, then 0.30 riyals for anything exceeding that.
<style>
.bill-calc{max-width:850px;margin:20px auto;padding:20px;background:#fff;border:1px solid #ddd;border-radius:12px;
box-shadow:0 2px 8px rgba(0,0,0,.05);font-family:"Noto Kufi Arabic","Segoe UI",sans-serif;transition:all .3s ease}
.lang-toggle{text-align:left;margin-bottom:10px}
.btn.switch{background:#444;color:#fff;padding:6px 12px;font-size:0.9rem;border-radius:6px}
.title{text-align:center;font-size:1.8rem;margin-bottom:8px;color:#111}
.subtitle{text-align:center;color:#555;margin-bottom:18px}
.calc-card{border:1px solid #eee;border-radius:10px;padding:15px;margin-bottom:20px;background:#fafafa}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:end}
label{flex:1;display:flex;flex-direction:column;font-weight:500;color:#222}
select,input{padding:10px;border:1px solid #ccc;border-radius:8px;font-size:1rem;width:100%}
.btn{padding:10px 20px;border:none;border-radius:8px;cursor:pointer;font-weight:600}
.btn.primary{background:#007bff;color:#fff}
.btn.primary:hover{background:#0069d9}
table{width:100%;border-collapse:collapse;margin-top:12px}
th,td{border-bottom:1px solid #e5e5e5;padding:10px;text-align:center;font-size:0.95rem}
td.right{text-align:right}
#resultTable tfoot td{font-weight:700}
.hint{color:#666;font-size:0.9rem;margin-top:8px;text-align:center}
@media(max-width:600px){.row{flex-direction:column}.btn{width:100%}}
</style>{
const tariff={r1:0.18,r2:0.30,limit:6000};
const devices=[];
const deviceType=document.getElementById("deviceType");
const deviceFields=document.getElementById("deviceFields");
const tbody=document.querySelector("#resultTable tbody");
const sumKwh=document.getElementById("sumKwh");
const sumCost=document.getElementById("sumCost");
const toggleLang=document.getElementById("toggleLang");
let currentLang='ar';
// ----- LANGUAGE SWITCH -----
toggleLang.onclick=()=>{
currentLang=currentLang==='ar'?'en':'ar';
document.documentElement.lang=currentLang;
const container=document.querySelector('.bill-calc');
container.dir=currentLang==='ar'?'rtl':'ltr';
toggleLang.textContent=currentLang==='ar'?'English':'العربية';
document.querySelectorAll('[data-ar]').forEach(el=>{
el.textContent=el.getAttribute(currentLang==='ar'?'data-ar':'data-en');
});
};
// ----- DEVICE TEMPLATES -----
const templates={
ac:{name:{ar:"مكيف",en:"Air Conditioner"},fields:{
ar:`
`,
en:`
`},
watt:p=>({18000:1440,24000:1920,30000:2400}[p.btu]||1440),hours:p=>p.hpd*30,duty:1},
water_heater:{name:{ar:"سخان ماء",en:"Water Heater"},fields:{
ar:`
`,
en:`
`},
watt:p=>p.liters>150?3000:2000,hours:p=>p.hpd*30,duty:0.4},
fridge:{name:{ar:"ثلاجة",en:"Refrigerator"},fields:{
ar:`
`,
en:`
`},
watt:p=>p.w||120,hours:()=>24*30,duty:0.4},
oven:{name:{ar:"فرن كهربائي",en:"Electric Oven"},fields:{
ar:`
`,
en:`
`},
watt:p=>p.w||2500,hours:p=>p.hpd*30,duty:0.8},
washer:{name:{ar:"غسالة",en:"Washing Machine"},fields:{
ar:`
`,
en:`
`}},
dryer:{name:{ar:"نشّافة",en:"Clothes Dryer"},fields:{
ar:`
`,
en:`
`}},
pump:{name:{ar:"مضخة ماء",en:"Water Pump"},fields:{
ar:`
`,
en:`
`},
watt:p=>p.hp*746/0.75,hours:p=>p.hpd*30,duty:1},
lighting:{name:{ar:"إنارة",en:"Lighting"},fields:{
ar:`
`,
en:`
`},
watt:p=>p.w||200,hours:p=>p.hpd*30,duty:1}
};
function showFields(){
const t=templates[deviceType.value];
deviceFields=t.fields[currentLang];
}
showFields();
deviceType.onchange=showFields;
document.getElementById("addDevice").onclick=()=>{
const t=templates[deviceType.value];
const params={};
deviceFields.querySelectorAll("[data-key]").forEach(i=>params[i.dataset.key]=parseFloat(i.value)||0);
devices.push({type:deviceType.value,params});
render();
};
function render(){
tbody="";
let totalKwh=0;
devices.forEach((d,idx)=>{
const t=templates[d.type];
let kwh=0;
if(t.watt) kwh=(t.watt(d.params)*t.hours(d.params)*t.duty)/1000;
else kwh=(d.params.kwh*d.params.cpw*4.3)||0;
totalKwh+=kwh;
const cost=calcCost(kwh);
const inputs=Object.entries(d.params).map(([k,v])=>`${k}:${v}`).join(currentLang==='ar'?'، ':', ');
tbody+=`
| ${t.name[currentLang]} |
${inputs} |
${kwh.toFixed(2)} |
${cost.toFixed(2)} |
<button class='btn danger' data-i='${idx}'>×</button> |
`;
});
sumKwh.textContent=totalKwh.toFixed(2);
sumCost.textContent=calcCost(totalKwh).toFixed(2);
tbody.querySelectorAll(".danger").forEach(b=>b.onclick=()=>{devices.splice(b.dataset.i,1);render();});
}
function calcCost(kwh){
if(kwh<=tariff.limit) return kwh*tariff.r1;
return tariff.limit*tariff.r1+(kwh-tariff.limit)*tariff.r2;
}
});
