Javascript Battery Percentage | How To Show Battery Percentage In Html
Javascript Battery Percentage | How To Show Battery Percentage In 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>Javascript Battery Percentage </title>
</head>
<body>
<main>
<h1>Your battery Perctenage is</h1>
<div class="battry"></div>
<p>I am Daily Make new content For You ,hope you like this post</p>
</main>
</body>
</html>
There is all the HTML code for the Javascript Battery Percentage. Now, you can see an output with CSS, then we write javascript for the Javascript Battery Percentage.
<style>
body {
margin: 1rem;
padding: 2rem;
background-color: #eee;
}
.battry {
font-size: 2rem;
color: cornflowerblue;
}
</style>
Css Updated output
Javascript code
<script>
const BattryLevel = document.querySelector(".battry");
navigator.getBattery().then(function (battery) {
const level = battery.level;
const status = level * 100 + "%";
BattryLevel.innerHTML = status;
});
</script>
Final output
In this post, we learn how to create Javascript Battery Percentage using simple HTML & CSS, and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.