Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mobilerast/javascript-energy-consumption
EnergySaver.js is a lightweight, easy-to-integrate JavaScript library designed to provide real-time energy consumption estimates based on the theme (dark or light) used on a website. It visually represents the estimated energy savings of using a dark theme over a light theme, enhancing user awareness about energy-efficient practices
https://github.com/mobilerast/javascript-energy-consumption
dark-mode dark-theme energy energy-consumption energy-efficiency javascript javascript-library javascript-vanilla js js-library library light-mode
Last synced: 22 days ago
JSON representation
EnergySaver.js is a lightweight, easy-to-integrate JavaScript library designed to provide real-time energy consumption estimates based on the theme (dark or light) used on a website. It visually represents the estimated energy savings of using a dark theme over a light theme, enhancing user awareness about energy-efficient practices
- Host: GitHub
- URL: https://github.com/mobilerast/javascript-energy-consumption
- Owner: mobilerast
- License: mit
- Created: 2023-12-28T11:26:50.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2023-12-28T12:15:50.000Z (about 1 year ago)
- Last Synced: 2024-11-11T01:54:08.240Z (3 months ago)
- Topics: dark-mode, dark-theme, energy, energy-consumption, energy-efficiency, javascript, javascript-library, javascript-vanilla, js, js-library, library, light-mode
- Language: JavaScript
- Homepage: https://mobilerast.github.io/javascript-energy-consumption/
- Size: 4.88 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# EnergySaver.js Library
## Overview
EnergySaver.js is a lightweight, easy-to-integrate JavaScript library designed to provide real-time energy consumption estimates based on the theme (dark or light) used on a website. It visually represents the estimated energy savings of using a dark theme over a light theme, enhancing user awareness about energy-efficient practices in digital environments.
## Features
- **Real-Time Energy Consumption Estimates**: Continuously displays the estimated energy consumption savings when using a dark theme.
- **Automatic Theme Detection**: Adjusts calculations based on the current theme (dark or light).
- **Easy Integration**: Simple to add to any existing website with minimal setup.
- **Customizable**: Easily adjustable parameters for different power consumption values or display settings.
## How to Set Up
### Step 1: Include the Library
First, include `EnergySaver.js` in your HTML file. Place the script tag in the `` or at the end of the ``:
```html
```
### Step 2: Initialize the Library
Create an instance of the `EnergySaver` class, passing the ID of your theme toggle checkbox:
```html
const energySaver = new EnergySaver('your-checkbox-id');
```
Replace `'your-checkbox-id'` with the actual ID of your theme toggle checkbox element.
### Step 3: Add the Checkbox
Ensure you have a checkbox for theme toggling:
```html
```
### Step 4: Style as Needed
Customize the appearance of the energy consumption display using CSS.
## Benefits
- **Enhances User Engagement**: By displaying real-time data, it keeps users engaged and informed about their energy usage.
- **Promotes Energy Efficiency**: Encourages the use of dark themes, which can be more energy-efficient on certain types of screens.
- **Easy to Understand**: Provides a simple and clear visual representation of energy consumption, making it accessible to all users.
- **Customizable**: Can be easily tailored to fit the design and energy parameters of any website.
## License
This project is licensed under the MIT License - see the LICENSE file for details.
## Author and Contact
- **GitHub**: [mobilerast](https://github.com/mobilerast)
- **Email**: [[email protected]](mailto:[email protected]), [[email protected]](mailto:[email protected])