Skip to content

Commit fc03bf4

Browse files
Jaideep25-techJaideep25-tech
authored
Merge pull request Dezenix#417 from iamrahulmahato/batt
battery shower
2 parents 1fa0851 + 307411a commit fc03bf4

File tree

7 files changed

+237
-0
lines changed

7 files changed

+237
-0
lines changed

‎Battery shower/README.md

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<p align="center">
2+
<img alt="" height="80" src="./img/256px-Icon-notepad.svg.png">
3+
</a>
4+
</p>
5+
<h1 align="center">Battry Shower</h1>
6+
7+
<div align="center">
8+
Show your battry percentage
9+
</div>
10+
11+
12+
13+
## Description:
14+
15+
This is a battery Shower app which is used to know battery percentage of the system.
16+
---
17+
18+
## Tech Stack Used:
19+
HTML5,CSS3,JavaScript
20+
21+
---
22+
23+
## It Look's Like:
24+
25+
![image](./img/Screenshot%202022-05-30%20133137.png)
26+
27+
![image2](./img/Screenshot%202022-05-30%20133137(2).png)
28+
29+
---
30+
31+
32+
## **Quick Start**
33+
- Clone this repository
34+
35+
```
36+
git clone https://github.com/Dezenix/frontend-html-css-js
37+
```
38+
- Change Directory
39+
40+
```
41+
cd Change Battry Shower
42+
```
43+
44+
```
45+
cd index.html
46+
```
47+
> open ```index.html``` file in your default Browser.
48+
---
49+
## **Installation and Dependencies**
50+
- Install any Code Editors like : VS Code, Atom, etc.
51+
- Then follow the ```Quick Start``` steps given above and open the
52+
Change Battry Shower in your Code Editor.
53+
- Then open ```index.html``` file then edit and save it .

‎Battery shower/css/style.css

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
}
5+
6+
body {
7+
background-image: linear-gradient(317.2deg, #1a0000 51%, #00ffff -48%);
8+
background-repeat: no-repeat;
9+
background-size: 120vw 120vh;
10+
}
11+
12+
progress {
13+
appearance: none;
14+
border: none;
15+
border-radius: 20px;
16+
background-color: #fff;
17+
color: rgb(20, 80, 205);
18+
/*height: 20px;
19+
width: 100%;*/
20+
}
21+
22+
progress::-webkit-progress-bar {
23+
background-color: #fff;
24+
border: 3px solid #fff;
25+
border-radius: 10px;
26+
}
27+
28+
progress::-webkit-progress-value {
29+
background-color: #000;
30+
border-radius: 5px;
31+
}
32+
33+
.batr {
34+
height: 200px;
35+
width: 360px;
36+
transform: rotate(-90deg);
37+
position: absolute;
38+
top: 50vh;
39+
left: 34vw;
40+
}
41+
42+
.after {
43+
height: 30px;
44+
width: 100px;
45+
position: relative;
46+
top: 43vh;
47+
left: 47vw;
48+
background-color: #fff;
49+
}
50+
51+
#bater {
52+
color: #fff;
53+
z-index: 2;
54+
background: transparent;
55+
border: none;
56+
position: absolute;
57+
bottom: 24vh;
58+
left: 50vw;
59+
font-size: 45px;
60+
}
61+
62+
#btn {
63+
height: 110px;
64+
width: 320px;
65+
text-decoration: none;
66+
position: absolute;
67+
bottom: 10vh;
68+
left: 36vw;
69+
background-image: linear-gradient(317.2deg, #1a0000 51%, #00ffff -48%);
70+
border-radius: 40px;
71+
border-right: 0.01px solid #fff;
72+
border-style: solid;
73+
border-width: 0.001px;
74+
}
75+
76+
a {
77+
text-decoration: none;
78+
font-size: 3rem;
79+
color: #fff;
80+
font-family: 'Modak', cursive;
81+
}
82+
83+
s {
84+
color: #000;
85+
}
86+
87+
@media(max-width:500px) {
88+
.batr {
89+
height: 100px;
90+
width: 190px;
91+
transform: rotate(-90deg);
92+
position: absolute;
93+
top: 40vh;
94+
left: 25vw;
95+
}
96+
.after {
97+
height: 15px;
98+
width: 60px;
99+
position: relative;
100+
top: 29vh;
101+
left: 42.5vw;
102+
background-color: #fff;
103+
}
104+
#bater {
105+
color: #fff;
106+
z-index: 2;
107+
background: transparent;
108+
border: none;
109+
position: absolute;
110+
bottom: 23vh;
111+
left: 46vw;
112+
font-size: 21px;
113+
}
114+
#btn {
115+
height: 60px;
116+
width: 160px;
117+
text-decoration: none;
118+
position: absolute;
119+
bottom: 7vh;
120+
left: 30vw;
121+
border-right: 0.01px solid #fff;
122+
background-image: linear-gradient(317.2deg, #1a0000 51%, #00ffff -48%);
123+
border-radius: 40px;
124+
border-style: solid;
125+
border-width: 0.001px;
126+
}
127+
a {
128+
text-decoration: none;
129+
font-size: 1.5rem;
130+
color: #fff;
131+
font-family: 'Modak', cursive;
132+
}
133+
}

‎Battery shower/img/256px-Icon-notepad.svg.png

18.6 KB
Loading

‎Battery shower/img/Screenshot 2022-05-30 133137(2).png

5.67 KB
Loading

‎Battery shower/img/Screenshot 2022-05-30 133137.png

21.3 KB
Loading

‎Battery shower/index.html

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<title>Battery Shower</title>
6+
<link rel="preconnect" href="https://fonts.googleapis.com">
7+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
8+
<link href="https://fonts.googleapis.com/css2?family=Modak&display=swap" rel="stylesheet">
9+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
10+
<link rel="stylesheet" href="./css/style.css">
11+
</head>
12+
13+
<body>
14+
<input value="" id="bater" disabled>
15+
<div class="after"></div> <progress max="100" min="0" class="batr" id="bat" value=""></progress>
16+
17+
<script src="./js/script.js"></script>
18+
</body>
19+
20+
21+
</html>

‎Battery shower/js/script.js

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
setInterval(() => {
2+
navigator.getBattery()
3+
.then(function(battery) {
4+
var bater = document.getElementById("bater").value = battery.level * 100 + "%";
5+
6+
7+
8+
9+
});
10+
11+
navigator.getBattery().then(function(battery) {
12+
var bat = document.getElementById("bat");
13+
bat.value = battery.level * 100;
14+
15+
16+
});
17+
18+
}, 1000);
19+
20+
navigator.getBattery().then(function(battery) {
21+
22+
if (battery.level < 0.20) {
23+
console.log(" keep your device for charge!");
24+
25+
26+
} else {
27+
console.log("battery percentage updating...")
28+
}
29+
30+
});

0 commit comments

Comments
 (0)