Hey everyone. Welcome to yet another amazing tutorial from Coding Artist. In today’s tutorial, we will learn how to detect the battery status. To build this project, we need HTML, CSS and Javascript.Â
We would be making use of Battery Status API in this project. You can read more about the Battery Status API here. Also, read about browser compatibility before you implement it in real-world projects.
In this project, we will detect:
- What is the battery charge level?
- Is the battery charging?
- If No, how much time until the battery discharges completely.
Let us begin the tutorial.
Video Tutorial:
If you prefer watching a video tutorial rather than reading this blog post, you can check out the video down below. I post new tutorials and resources related to web development on my youtube channel regularly. Don’t forget to subscribe to my youtube channel so you don’t miss out on any of these amazing resources.
Project Folder Structure:
Before we start coding, let us create the project folder structure. We begin by creating a project folder called – ‘Detect Battery Status’. Inside this folder, we have three files. These files are – index.html, style.css and script.js. The first file is the HTML document. Next, we have the stylesheet. And the final file is the script file.
HTML:
We begin with the HTML code. First, copy the code below and paste it into your HTML document. The HTML code creates elements for the built layout of our project.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Detect Battery Status</title>
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500&display=swap"
rel="stylesheet"
/>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div id="battery">
<div id="charge"></div>
<div id="charge-level"></div>
</div>
<div id="charging-time"></div>
</div>
<script src="script.js"></script>
</body>
</html>
CSS:
Next, we need to style and position these elements. To do this, we use CSS. Now copy the code provided to you below and paste it into your stylesheet.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Roboto Mono", monospace;
}
.container {
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
#battery {
box-sizing: content-box;
height: 7.8em;
width: 17.5em;
border: 0.6em solid #246aed;
margin: auto;
border-radius: 0.6em;
position: relative;
display: grid;
place-items: center;
}
#battery:before {
position: absolute;
content: "";
height: 5em;
width: 1.1em;
background-color: #246aed;
margin: auto;
top: 0;
bottom: 0;
right: -1.6em;
border-radius: 0 0.3em 0.3em 0;
}
#charge {
position: absolute;
height: 6.5em;
width: 16.25em;
background-color: #246aed;
top: 0.6em;
left: 0.6em;
}
#charge-level {
position: absolute;
font-size: 3em;
font-weight: 500;
}
#charging-time {
text-align: center;
font-size: 1.7em;
margin-top: 1.4em;
}
.active {
animation: charge-animation 3s infinite linear;
}
@keyframes charge-animation {
0% {
width: 0;
}
100% {
width: 16.25em;
}
}
Javascript:
We finally add functionality to this code. To add logic, we use Javascript. Once again, copy the code provided to you below and paste it into your script file.
const chargeLevel = document.getElementById("charge-level");
const charge = document.getElementById("charge");
const chargingTimeRef = document.getElementById("charging-time");
window.onload = () => {
//For browsers that don't support the battery status API
if (!navigator.getBattery) {
alert("Battery Status Api Is Not Supported In Your Browser");
return false;
}
};
navigator.getBattery().then((battery) => {
function updateAllBatteryInfo() {
updateChargingInfo();
updateLevelInfo();
}
updateAllBatteryInfo();
//When the charging status changes
battery.addEventListener("chargingchange", () => {
updateAllBatteryInfo();
});
//When the Battery Levvel Changes
battery.addEventListener("levelchange", () => {
updateAllBatteryInfo();
});
function updateChargingInfo() {
if (battery.charging) {
charge.classList.add("active");
chargingTimeRef.innerText = "";
} else {
charge.classList.remove("active");
//Display time left to discharge only when it is a integer value i.e not infinity
if (parseInt(battery.dischargingTime)) {
let hr = parseInt(battery.dischargingTime / 3600);
let min = parseInt(battery.dischargingTime / 60 - hr * 60);
chargingTimeRef.innerText = `${hr}hr ${min}mins remaining`;
}
}
}
//Updating battery level
function updateLevelInfo() {
let batteryLevel = `${parseInt(battery.level * 100)}%`;
charge.style.width = batteryLevel;
chargeLevel.textContent = batteryLevel;
}
});
That’s it for this tutorial. If you have any issues while creating this code you can download the source code by clicking on the ‘Download Code’ button below. Also, I would love to hear from you, so feel free to drop your queries and suggestions in the comments below.
Happy Coding!!
Can I detect the sound status and change the level? using the same principle? Thx for your coding website !