Hello wizards, I hope you are doing great. Today in this blog you’ll learn how to create the "Battery Status Detector" project using HTML, CSS & JavaScript.
Preview
In the above video, you’ve seen the preview of the "Battery Status Detector" project and I hope now you are able to create this type of project. If not, I have provided all the HTML CSS and JavaScript code below.
Battery Status Detector [Source Code]
To get the following HTML, CSS & JS code for the Battery Status Detector project. You need to create three files one is a HTML file, second one is a CSS file and the another one is JS file. After creating these three files then you can copy-paste the given codes on your document.
Remember, you’ve to create a file with .html extension for HTML code, .css extension for CSS code and .js for JavaScript code.
You can also download all source code files from the given download button.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Battery Status Detector</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="battery">
<div class="charging"></div>
<div class="charging-percent"></div>
</div>
<div class="charging-time-remaining">
</div>
</div>
<script src="index.js"></script>
</body>
</html>
CSS
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: white;
color: black;
}
.container {
width: 400px;
height: 250px;
display: flex;
align-items: center;
justify-content: space-around;
flex-direction: column;
}
.battery {
width: 300px;
height: 150px;
border: 5px solid black;
border-radius: 10px;
background-color: white;
display: grid;
place-content: center;
position: relative;
}
.battery::after {
content: "";
position: absolute;
background-color: black;
width: 20px;
height: 50px;
top: 45px;
right: -20px;
border-radius: 0 5px 5px 0;
}
.charging {
width: 270px;
height: 120px;
position: absolute;
background-color: black;
top: 10px;
left: 10px;
border-radius: 5px;
}
.charging-percent {
color: red;
font-size: 40px;
font-weight: 600;
z-index: 100;
}
.charging-time-remaining {
font-weight: 500;
font-size: 20px;
}
.charging-time-remaining p {
text-align: center;
color: red;
}
.charging.active {
animation: percentage 1.5s infinite linear;
}
@keyframes percentage {
0% {
width: 0;
}
100% {
width: 270px;
}
}
JavaScript
const chargingEl = document.querySelector(".charging");
const chargingPercentEl = document.querySelector(".charging-percent");
const chargingTimeRemainingEl = document.querySelector(".charging-time-remaining");
//If the browsers don't support battery status API
window.onload = () => {
if (!navigator.getBattery()) {
alert("Your browser doesn't support battery status API");
return false;
}
};
//If the browsers support battery status API
navigator.getBattery().then((battery) => {
function updateAllBatteryInfo() {
updateChargingInfo();
updateLevelInfo();
}
updateAllBatteryInfo();
//If the charging status changes i.e when plugged in or plugged out
battery.addEventListener("chargingchange", () => {
updateAllBatteryInfo();
});
//If the Battery level Changes i.e when charging percentage changes
battery.addEventListener("levelchange", () => {
updateAllBatteryInfo();
});
function updateChargingInfo() {
// checks whether the battery is plugged in or plugged out
if (battery.charging) {
chargingEl.classList.add("active");
chargingTimeRemainingEl.innerText = "Charging...";
} else {
chargingEl.classList.remove("active");
// Estimated Charging time remaining
if (parseInt(battery.dischargingTime)) {
let hr = parseInt(battery.dischargingTime / 3600);
let min = parseInt(battery.dischargingTime / 60 - hr * 60);
chargingTimeRemainingEl.innerHTML = `Estimated charging time remaining :
<p>${hr}hr ${min}mins</p>`;
}
}
}
//Updating battery level
function updateLevelInfo() {
let chargingPercent = `${parseInt(battery.level * 100)}%`;
chargingEl.style.width = chargingPercent;
chargingPercentEl.textContent = chargingPercent;
}
});
Generating Download Link...