html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
<head>
<title>Battery</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="main">
<h4 id="text">YOUR MOBILE BATTERY PERCENTAGE</h4>
<center>
<div class="mobile">
<div class="mike">
<div class="mi"></div>
<div class="cam"></div>
</div>
<div id="battery"></div>
<div class="span"></div>
<div id="charger"></div>
<div class="vol" onclick="alert('Volume up/down button')"></div>
<div class="switch" onclick="alert('Screen on/off button \n but now its do not work');"></div>
</div>
<br />
<div class="like" onclick="jassu()" > </div></center>
<div class="i" onclick="me()"></div>
<div class="ii" onclick="mee()"> </div>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
body{
background-color: #0b1925;
margin:0;
padding:0;
box-sizing:border-box;
}
h4 {
color: #acacac;
text-align: center;
padding: 18px 0 10px 0;
margin: 0 0 10px 0;
border-bottom:3px solid #5d4a59;
border-radius:30px;
}
.main{
background-color:;
height:100%;
width:100%;
}
#charger{
position:absolute ;
font-size:12px;
top:180px;
left:3px;
Enter to Rename, Shift+Enter to Preview
js
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
function jassu(){
alert ("Hey this is Jashwan Mathur \n Please upvote me 👍👍✔️")
}
navigator.getBattery().then(function(battery){
function updateAllBatteryInfo(){
updateLevelInfo();
}
updateAllBatteryInfo();
battery.addEventListener('levelchange', updateLevelInfo);
function updateLevelInfo(){
document.getElementById("battery").innerHTML = Math.round(battery.level*100) + '%';
if(battery.level <= 0.2){
document.getElementById("battery").style.color = "red";
}else{
document.getElementById("battery").style.color = "#999" ;
}
{}
};
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run