EV Efficiency Converter Widget ⚡

Electric vehicle efficiency is measured differently around the world, making it confusing to compare vehicles or understand real-world performance. European manufacturers quote kWh/100km, Americans use MPGe and kWh/100mi, while some prefer the inverse: km/kWh or mi/kWh. This widget instantly converts between all these formats, helping EV owners, reviewers, and enthusiasts make sense of efficiency data regardless of its source.

A beautiful, embeddable widget that converts between EV efficiency formats:

• kWh per 100 km/miles (Energy Consumption)
• km/miles per kWh (Distance per Energy)
• MPGe (Miles Per Gallon equivalent - US EPA standard, shown in Imperial mode)

Features

• 🔄 Bidirectional Conversion - Enter a value in either field for instant conversion
• 🌍 Metric/Imperial Toggle - Switch between kilometers and miles with automatic value conversion
• 🇺🇸 MPGe Support - Shows EPA-standard Miles Per Gallon equivalent when in Imperial mode
• 🌲 Eco-Friendly Design - Forest green theme reflecting EV sustainability
• 🎨 Fully Themeable - CSS custom properties for easy customization
• 📱 Responsive - Works on all screen sizes
• 🎯 Zero Dependencies - Pure vanilla JavaScript and CSS
• 🔌 Easy Embedding - Drop into any webpage

Quick Start

Option 1: Direct Embed

Add the following to your HTML:

<!-- Widget Container -->
<div id="kwh-efficiency-widget"></div>

<!-- Widget CSS -->
<link rel="stylesheet" href="widget.css">

<!-- Widget JavaScript -->
<script src="widget.js"></script>

Option 2: CDN (if hosted)

<div id="kwh-efficiency-widget"></div>
<link rel="stylesheet" href="https://your-cdn.com/kwh-efficiency-converter/widget.css">
<script src="https://your-cdn.com/kwh-efficiency-converter/widget.js"></script>

Local Development

To preview the widget locally:

# Using Python
python3 -m http.server 8080

# Or using Node.js (npx)
npx serve .

# Or using PHP
php -S localhost:8080

Then open http://localhost:8080 in your browser.

How It Works

The conversion formula is simple:

Distance per kWh = 100 ÷ (kWh per 100 distance)
kWh per 100 distance = 100 ÷ (Distance per kWh)

Unit Conversion

When switching between metric and imperial:

• km to miles: multiply by 0.621371
• miles to km: multiply by 1.60934

Customization

Custom Container ID

You can use a custom container ID by initializing the widget manually:

<div id="my-custom-widget"></div>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        new KWhEfficiencyWidget('my-custom-widget');
    });
</script>

Theming

The widget uses CSS custom properties (variables) that can be easily overridden to match your site's branding. Add your custom styles after the widget CSS:

Available CSS Variables

.kwh-widget {
    /* Colors */
    --accent-primary: #228B22;      /* Primary accent (toggle, buttons, highlights) */
    --accent-secondary: #20B2AA;    /* Secondary accent (formula box) */
    --text-primary: #1e293b;        /* Main text color */
    --text-secondary: #475569;      /* Secondary text color */
    --text-muted: #94a3b8;          /* Muted/label text color */
    
    /* Backgrounds */
    --widget-bg: #ffffff;           /* Widget background */
    --input-bg: rgba(0, 0, 0, 0.03);  /* Input section background */
    --toggle-inactive: rgba(0, 0, 0, 0.06);  /* Inactive toggle background */
    --toggle-active: #228B22;       /* Active toggle slider color */
    
    /* Borders & Shadows */
    --widget-border: rgba(34, 139, 34, 0.3);  /* Widget border */
    --widget-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);  /* Widget shadow */
    --input-border: rgba(0, 0, 0, 0.08);  /* Input section border */
    --input-focus: rgba(34, 139, 34, 0.3);  /* Input focus color */
}

Example: Blue Theme

.kwh-widget {
    --accent-primary: #2563eb;
    --accent-secondary: #06b6d4;
    --widget-border: rgba(37, 99, 235, 0.3);
    --toggle-active: #2563eb;
    --input-focus: rgba(37, 99, 235, 0.3);
}

Example: Dark Theme

.kwh-widget {
    --widget-bg: #1e1e2e;
    --text-primary: #ffffff;
    --text-secondary: #a0a0c0;
    --text-muted: #6b6b8f;
    --input-bg: rgba(255, 255, 255, 0.08);
    --input-border: rgba(255, 255, 255, 0.15);
    --accent-primary: #a855f7;
    --accent-secondary: #22d3ee;
    --widget-border: rgba(168, 85, 247, 0.3);
    --toggle-inactive: rgba(255, 255, 255, 0.1);
    --toggle-active: #a855f7;
}

Example: Orange/Warm Theme

.kwh-widget {
    --accent-primary: #ea580c;
    --accent-secondary: #fbbf24;
    --widget-border: rgba(234, 88, 12, 0.3);
    --toggle-active: #ea580c;
    --input-focus: rgba(234, 88, 12, 0.3);
}

Overriding Styles

For more advanced customization, you can override any CSS class. Key classes include:

Class	Description
.kwh-widget	Main widget container
.kwh-widget__header	Header section with title
.kwh-widget__toggle	Unit toggle (metric/imperial)
.kwh-widget__section	Input sections
.kwh-widget__input	Input fields
.kwh-widget__swap-btn	Swap button
.kwh-widget__formula	Formula display box

Browser Support

• Chrome 60+
• Firefox 55+
• Safari 12+
• Edge 79+

License

MIT License - Feel free to use in personal and commercial projects.

Contributing

Contributions are welcome! Feel free to open issues or submit pull requests.