A Pen by Cezar Luiz.

Battery-API.markdown

Battery API

Works on Firefox only

A Pen by Cezar Luiz on CodePen.

License.

index.html

<div class="container">
		<div class="battery is-charging">
			<div class="battery-status"></div>
			<p class="battery-level">0%</p>
		</div>

		<!-- Battery Status -->
		<ul class="battery-values">
			<li class="if-charging"></li>
			<li class="charging-time"></li>
			<li class="discharging-time"></li>
		</ul>
	</div>

script.js

var bat = navigator.battery,
	batContainer = document.querySelector('.battery'),
	batStatus = document.querySelector('.battery-status'),
	batLevel = document.querySelector('.battery-level'),
	ifCharging = document.querySelector('.if-charging'),
	chargingTime = document.querySelector('.charging-time'),
	dischargingTime = document.querySelector('.discharging-time'),
	critical = 0.2; // 20%

if (bat) {

	// Check when the battery level change and when is in critical condition
	var changeBatteryStatus = function() {
		batStatus.style.width = (bat.level * 100) + '%';

		if (bat.level <= critical) {
			batContainer.classList.add('is-critical');
		} else if (bat.level == 1) {
			batContainer.classList.add('is-complete');
		} else {
			batContainer.classList.remove('is-critical');
			batContainer.classList.remove('is-complete');
		}
	};

	// Change the percentual text in DOM
	var changeBatteryLevelText = function() {
		batLevel.textContent = parseInt(bat.level * 100) + '%';
	};

	// Check if the battery is charging
	var checkBatteryCharging = function () {
		var charging = '';

		if (bat.charging) {
			batContainer.classList.add('is-charging');
			batContainer.classList.remove('is-critical');
			batContainer.classList.remove('is-complete');
			charging = 'Yes';
		} else {
			batContainer.classList.remove('is-charging');
			// Check is battery is critical
			changeBatteryStatus();

			charging = 'No';
		}

		ifCharging.textContent = 'Is charging? ' + charging;
	};

	// Check the battery is not charging and the time to the end
	var dischargingTimeString = function () {
		var discharging = '';
		if (bat.dischargingTime != 'Infinity') {
			discharging = 'Time to end in ~ ' + window.moment().seconds(bat.dischargingTime).format('HH:mm:ss');
		}

		dischargingTime.textContent = discharging;
	};

	// Check if battery is charging and its time to complete the charge
	var chargingTimeString = function () {
		var charging = '';

		if (bat.chargingTime != 'Infinity') {
			charging = 'Time to complete the charge in ~ ' + window.moment().seconds(bat.chargingTime).format('HH:mm:ss');
		}

		chargingTime.textContent = charging;
	};

	// When the battery level down
	bat.addEventListener('levelchange', function() {
		changeBatteryLevelText();
		changeBatteryStatus();
	}, false);

	// When the battery is charging
	bat.addEventListener('chargingchange', function() {
		checkBatteryCharging();
	}, false);

	// When the battery is discharging
	bat.addEventListener('dischargingtimechange', function() {
		dischargingTimeString();
	});

	// When the battery is charging
	bat.addEventListener('chargingtimechange', function() {
		chargingTimeString();
	});

	// Set battery level status
	changeBatteryStatus();
	changeBatteryLevelText();
	checkBatteryCharging();
	dischargingTimeString();
	chargingTimeString();

} else {
	document.querySelector('.container').innerHTML = '<p class="no-support">Sorry, your browser does not support the Battery API :/ <br> Test in Firefox only devices with a battery as notebooks or Firefox OS :)</p>';
}

style.css

* {
	-moz-box-sizing: border-box;
}

body {
	font-size: 16px;
	font-family: 'Raleway', sans-serif;
	color: #000;
	font-weight: 300;
	background: #f0f0f2;
}

.battery {
	width: 50%;
	margin: 0 auto;
	border: 15px solid #99ca3b;
	height: 100px;
	position: relative;
	border-radius: 10px;
	margin-top: 100px;
	transition: .5s;
}

.battery::after {
	content: ' ';
	width: 15px;
	height: 40px;
	background: #99ca3b;
	top: 50%;
	margin-top: -20px;
	right: -25px;
	position: absolute;
}

.battery-status {
	width: 0%;
	height: 100%;
	background: #99ca3b;
	transition: .5s;
}

.battery-level {
	color: #333;
	font-size: 36px;
	position: absolute;
	top: 15px;
	left: 20px;
}

.is-charging {
	animation: isCharging 1s infinite alternate;
}

.is-critical {
	border-color: #ca3b3b;
}

.is-critical .battery-status, .is-critical::after {
	background: #ca3b3b;
}

.is-critical .battery-level {
	color: #FFF;
}

.is-complete {
	box-shadow: #99ca3b 0 0 30px 10px;
}

@keyframes isCharging {
	to {
		box-shadow: #99ca3b 0 0 30px 10px;
	}
}

/* Battery values */
.battery-values {
	text-align: center;
	padding: 30px 10px;
}

.battery-values li {
	margin: 10px 0;
	font-size: 24px;
}

/* Not support */
.no-support {
	font-size: 36px;
	text-align: center;
	padding: 40px 10px;
	line-height: 70px;
}