Skip to content

Commit 658acc5

Browse files
mrkc2303mrkc2303
authored
Merge branch 'main' into CI
2 parents 35a66fc + b32a552 commit 658acc5

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

42 files changed

+1879
-114
lines changed

‎.github/pull_request_template.md

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
### Description
2+
3+
(Describe your project over here.)
4+
5+
### Checklist
6+
7+
- [ ] I've been assigned an issue related to this PR.
8+
- [ ] I've used beautifiers.
9+
- [ ] I've added my Project's name and description to `Index.md`
10+
- [ ] I've made a README.md file for my Project.
11+
- [ ] The README.md file of my projrct contains Project title, Description, Use of project, Set up, Stack used and Output (Screenshots).
12+
13+
## Related Issues or Pull Requests number
14+
15+
(Write your answer here.)

‎Battery Indicator/README.md

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
# Battery Indicator App
2+
3+
This is a battery indicator app which is used to know battery percentage of the system.
4+
5+
**Technologies used:**
6+
7+
- HTML
8+
- CSS
9+
- JAVASCRIPT
10+
11+
#### Steps to Use:
12+
13+
---
14+
15+
- Download or clone the repository
16+
17+
```
18+
git clone https://github.com/Ayushparikh-code/Web-dev-mini-projects.git
19+
```
20+
21+
- Go to the directory
22+
- Run the index.html file
23+
- Start Scrolling!!
24+
25+
#### Output/Screenshots
26+
27+
![battery-indicator](https://github.com/Jagannath8/Web-dev-mini-projects/blob/battery/Battery%20Indicator/light.jpg)
28+
![battery-indicator](https://github.com/Jagannath8/Web-dev-mini-projects/blob/battery/Battery%20Indicator/dark.jpg)
29+
30+
Developed by: <a href="https://github.com/Jagannath8">Jagannath Pal</a>

‎Battery Indicator/dark.jpg

47.9 KB
Loading

‎Battery Indicator/index.html

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<link
7+
rel="stylesheet"
8+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"
9+
integrity="sha512-5A8nwdMOWrSz20fDsjczgUidUBR8liPYU+WymTZP1lmY9G6Oc7HlZv156XqnsgNUzTyMefFTcsFH/tnJE/+xBg=="
10+
crossorigin="anonymous"
11+
/>
12+
<title>Battery Indicator</title>
13+
<link rel="stylesheet" href="style.css" />
14+
</head>
15+
<body>
16+
<section class="sec">
17+
<div class="toggle"></div>
18+
<div class="box">
19+
<div class="content">
20+
<h3>Battery</h3>
21+
<div class="batteryShape">
22+
<div class="level">
23+
<div class="percentage"></div>
24+
</div>
25+
</div>
26+
<div class="percent">50%</div>
27+
</div>
28+
</div>
29+
</section>
30+
<script src="script.js"></script>
31+
</body>
32+
</html>

‎Battery Indicator/light.jpg

47.8 KB
Loading

‎Battery Indicator/script.js

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
let percentage = document.querySelector(".percentage");
2+
let percent = document.querySelector(".percent");
3+
4+
navigator.getBattery().then(function (battery) {
5+
percentage.style.width = battery.level * 100 + "%";
6+
percent.innerHTML = Math.floor(battery.level * 100) + "%";
7+
});
8+
9+
let sec = document.querySelector(".sec");
10+
let toggle = document.querySelector(".toggle");
11+
toggle.addEventListener("click", function () {
12+
sec.classList.toggle("dark");
13+
});

‎Battery Indicator/style.css

Lines changed: 187 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,187 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
2+
3+
* {
4+
margin: 0;
5+
padding: 0;
6+
box-sizing: border-box;
7+
font-family: "Poppins", sans-serif;
8+
}
9+
10+
section {
11+
position: relative;
12+
display: flex;
13+
justify-content: center;
14+
align-items: center;
15+
min-height: 100vh;
16+
}
17+
18+
section.dark {
19+
background: #161623;
20+
}
21+
22+
section::before {
23+
content: "";
24+
position: absolute;
25+
width: 240px;
26+
height: 240px;
27+
background: linear-gradient(#6cff47, #3d1046);
28+
border-radius: 50%;
29+
transform: translate(-150px, -100px);
30+
}
31+
32+
section.dark::before {
33+
background: linear-gradient(#ffc107, #e91e63);
34+
}
35+
36+
37+
section::after {
38+
content: "";
39+
position: absolute;
40+
width: 250px;
41+
height: 250px;
42+
background: linear-gradient(#f10050, rgb(8, 216, 253));
43+
border-radius: 50%;
44+
transform: translate(150px, 100px);
45+
}
46+
47+
section.dark::after {
48+
background: linear-gradient(#2196f3, #31ff38);
49+
}
50+
51+
.box {
52+
position: relative;
53+
width: 240px;
54+
height: 300px;
55+
background: rgba(255, 255, 255, 0.1);
56+
z-index: 1;
57+
box-shadow: 0 25px 45px rgba(0, 0, 0, 0.25);
58+
border: 1px solid rgba(255, 255, 255, 0.25);
59+
border-right: 1px solid rgba(255, 255, 255, 0.1);
60+
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
61+
backdrop-filter: blur(25px);
62+
border-radius: 10px;
63+
display: flex;
64+
justify-content: center;
65+
align-items: center;
66+
}
67+
68+
.content {
69+
display: flex;
70+
justify-content: center;
71+
align-items: center;
72+
flex-direction: column;
73+
}
74+
75+
.box h3 {
76+
color: #000000;
77+
font-weight: 500;
78+
font-size: 1.2rem;
79+
letter-spacing: 1px;
80+
}
81+
82+
section.dark .box h3 {
83+
color: #fff;
84+
}
85+
86+
.batteryShape {
87+
position: relative;
88+
width: 140px;
89+
height: 65px;
90+
margin: 20px 0;
91+
border: 3px solid #333;
92+
border-radius: 10px;
93+
}
94+
95+
section.dark .batteryShape {
96+
border: 3px solid #fff;
97+
}
98+
99+
.batteryShape::before {
100+
content: "";
101+
position: absolute;
102+
top: 50%;
103+
right: -12px;
104+
transform: translateY(-50%);
105+
width: 7px;
106+
height: 16px;
107+
background: #333;
108+
border-top-right-radius: 4px;
109+
border-bottom-right-radius: 4px;
110+
}
111+
112+
section.dark .batteryShape::before {
113+
background: #fff;
114+
}
115+
116+
.batteryShape::after {
117+
content: "";
118+
position: absolute;
119+
top: 0;
120+
left: 0;
121+
width: 100%;
122+
height: 50%;
123+
background: rgba(255, 255, 255, 0.1);
124+
}
125+
126+
.level {
127+
position: absolute;
128+
top: 4px;
129+
left: 4px;
130+
right: 4px;
131+
bottom: 4px;
132+
/* background: #333; */
133+
overflow: hidden;
134+
}
135+
136+
.percentage {
137+
position: absolute;
138+
top: 0;
139+
left: 0;
140+
height: 100%;
141+
width: 50%;
142+
background: linear-gradient(90deg, #ffeb3b, #27ff00);
143+
border-radius: 4px;
144+
}
145+
146+
section.dark .percentage {
147+
background: linear-gradient(90deg, #ffeb3b, #27ff00);
148+
}
149+
150+
.percent {
151+
color: #000000;
152+
font-size: 2em;
153+
font-weight: 700;
154+
}
155+
156+
section.dark .percent {
157+
color: #fff;
158+
}
159+
160+
.toggle {
161+
position: absolute;
162+
top: 20px;
163+
right: 20px;
164+
background: #070716;
165+
width: 30px;
166+
height: 30px;
167+
cursor: pointer;
168+
border-radius: 50%;
169+
display: flex;
170+
justify-content: center;
171+
align-items: center;
172+
}
173+
174+
.dark .toggle {
175+
background: #fff;
176+
}
177+
178+
.toggle::before {
179+
content: "\f186";
180+
font-family: fontAwesome;
181+
color: #fff;
182+
}
183+
184+
.dark .toggle::before {
185+
content: "\f185";
186+
color: #161623;
187+
}

‎ConnectFour/Part3_FrontEndProject.css

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
.board button {
2+
width: 100px;
3+
height: 100px;
4+
background-color: gray;
5+
border-radius: 50%;
6+
border: 4px solid black; /*this gets rid of bootstrap shadow*/
7+
margin: 1px;
8+
}

‎ConnectFour/Part3_FrontEndProject.html

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Connect Four</title>
6+
7+
8+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
9+
<link rel="stylesheet" href="Part3_FrontEndProject.css">
10+
11+
</head>
12+
<body>
13+
<div class="container" align='center'>
14+
<h1>Welcome to Connect Four!</h1>
15+
<h2>The object of this game is to connect four of your chips in a row!</h2>
16+
<h3>Let's get started!</h3>
17+
<table class="board">
18+
<tr>
19+
<td><button type="button"></button></td>
20+
<td><button type="button"></button></td>
21+
<td><button type="button"></button></td>
22+
<td><button type="button"></button></td>
23+
<td><button type="button"></button></td>
24+
<td><button type="button"></button></td>
25+
<td><button type="button"></button></td>
26+
</tr>
27+
<tr>
28+
<td><button type="button"></button></td>
29+
<td><button type="button"></button></td>
30+
<td><button type="button"></button></td>
31+
<td><button type="button"></button></td>
32+
<td><button type="button"></button></td>
33+
<td><button type="button"></button></td>
34+
<td><button type="button"></button></td>
35+
</tr>
36+
<tr>
37+
<td><button type="button"></button></td>
38+
<td><button type="button"></button></td>
39+
<td><button type="button"></button></td>
40+
<td><button type="button"></button></td>
41+
<td><button type="button"></button></td>
42+
<td><button type="button"></button></td>
43+
<td><button type="button"></button></td>
44+
</tr>
45+
<tr>
46+
<td><button type="button"></button></td>
47+
<td><button type="button"></button></td>
48+
<td><button type="button"></button></td>
49+
<td><button type="button"></button></td>
50+
<td><button type="button"></button></td>
51+
<td><button type="button"></button></td>
52+
<td><button type="button"></button></td>
53+
</tr>
54+
<tr>
55+
<td><button type="button"></button></td>
56+
<td><button type="button"></button></td>
57+
<td><button type="button"></button></td>
58+
<td><button type="button"></button></td>
59+
<td><button type="button"></button></td>
60+
<td><button type="button"></button></td>
61+
<td><button type="button"></button></td>
62+
</tr>
63+
<tr>
64+
<td><button type="button"></button></td>
65+
<td><button type="button"></button></td>
66+
<td><button type="button"></button></td>
67+
<td><button type="button"></button></td>
68+
<td><button type="button"></button></td>
69+
<td><button type="button"></button></td>
70+
<td><button type="button"></button></td>
71+
</tr>
72+
</table>
73+
74+
</div>
75+
76+
</script>
77+
<script
78+
src="https://code.jquery.com/jquery-3.1.1.min.js"
79+
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
80+
crossorigin="anonymous">
81+
</script>
82+
<script src='Part3_FrontEndProject.js'>
83+
84+
</script>
85+
</body>
86+
</html>

0 commit comments

Comments
 (0)