Embeddable Electricity Calculator for Your Site

Add a professional Electricity Usage & Cost Calculator to your website. You can easily customize the style to match your design while keeping the functionality intact. Simply copy the code below and paste it into your site's HTML.

Calculator Preview

Power Usage (Watts)

Hours Used Per Day

Electricity Rate (cents per kWh)

Installation Instructions

1.Copy the code in the text box below
2.Paste it into your HTML page
3.You may edit the CSS or HTML layout, but do not modify the JavaScript
4.Keep the attribution link "powered by Ultimate Calc Hub"

<!--BEGIN OF ELECTRICITY CALCULATOR CODE-->
<!-- Terms of Use (see below) -->
<div id="uch-embed-calc">
  <h2 style="margin-bottom: 1rem;">Electricity Usage & Cost Calculator</h2>
  
  <div style="margin-bottom: 1rem;">
    <label for="watts">Power Usage (Watts):</label>
    <input type="number" id="watts" min="0" step="1" style="width: 100%; padding: 8px; margin-top: 4px; border: 1px solid #ccc; border-radius: 4px;">
  </div>
  
  <div style="margin-bottom: 1rem;">
    <label for="hours">Hours Used Per Day:</label>
    <input type="number" id="hours" min="0" max="24" step="0.5" style="width: 100%; padding: 8px; margin-top: 4px; border: 1px solid #ccc; border-radius: 4px;">
  </div>
  
  <div style="margin-bottom: 1rem;">
    <label for="rate">Electricity Rate (cents per kWh):</label>
    <input type="number" id="rate" min="0" step="0.01" style="width: 100%; padding: 8px; margin-top: 4px; border: 1px solid #ccc; border-radius: 4px;">
  </div>
  
  <button onclick="calculateElectricity()" style="background: var(--uch-accent); color: white; padding: 8px 16px; border: none; border-radius: 4px; cursor: pointer; width: 100%;">
    Calculate Usage & Cost
  </button>
  
  <div id="result" style="margin-top: 1rem; text-align: center; font-weight: bold;"></div>
  
  <center id="uch-credit" style="margin-top: 1rem; font-size: 0.875rem;">
    powered by <a href="https://ultimatecalchub.com" target="_blank" rel="dofollow" style="color: var(--uch-accent); text-decoration: none;">Ultimate Calc Hub</a>
  </center>
</div>

<script>
function calculateElectricity() {
  const watts = parseFloat(document.getElementById('watts').value);
  const hours = parseFloat(document.getElementById('hours').value);
  const rate = parseFloat(document.getElementById('rate').value);
  
  if (!watts || !hours || !rate) {
    document.getElementById('result').innerHTML = 'Please enter all values';
    return;
  }

  const kwhPerDay = (watts * hours) / 1000;
  const costPerDay = kwhPerDay * (rate / 100); // rate is in cents
  
  document.getElementById('result').innerHTML = `
    Daily Usage: ${kwhPerDay.toFixed(2)} kWh<br>
    Daily Cost: $${costPerDay.toFixed(2)}
  `;
}
</script>

<style>
:root {
  --uch-accent: #0066ff;
  --uch-bg: #f9f9f9;
  --uch-text: #333;
}

#uch-embed-calc {
  font-family: system-ui, -apple-system, sans-serif;
  background: var(--uch-bg);
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  max-width: 500px;
  margin: 0 auto;
}

#uch-embed-calc input:focus {
  outline-color: var(--uch-accent);
}

#uch-embed-calc button:hover {
  opacity: 0.9;
}
</style>
<!--
TERMS OF USE
By embedding this calculator, you agree:
1. The materials are provided "as is" and without warranties.
2. You may customize HTML/CSS but not modify JavaScript.
3. Keep "powered by Ultimate Calc Hub" with its link.
4. Copyright belongs to Ultimate Calc Hub (https://ultimatecalchub.com).
5. Do not remove or alter these terms.
-->
<!--END OF ELECTRICITY CALCULATOR CODE-->

Terms of Use

By embedding this calculator, you agree to the following:

1.The materials are provided "as is" without warranties of any kind
2.You may customize the HTML and CSS, but not the JavaScript code
3.You must keep the "powered by Ultimate Calc Hub" text and link
4.The copyright belongs to Ultimate Calc Hub
5.You must not remove or alter these terms

About Electricity Usage Calculation

The Electricity Calculator helps users estimate their daily power consumption and associated costs by considering the power rating of electrical devices, usage duration, and electricity rates.

•How It Works

The calculator uses these formulas:

–Daily kWh = (Watts × Hours) ÷ 1000
–Daily Cost = kWh × Rate per kWh
–Results are rounded to 2 decimal places for clarity

•Customization Options

The calculator's appearance can be customized using CSS variables:

–--uch-accent: Main accent color
–--uch-bg: Background color
–--uch-text: Text color