Skip to content

Commit d26b330

Browse files
harshita2216harshita2216
authored
Merge branch 'main' into supzi
2 parents 92dc5af + 7d89505 commit d26b330

File tree

121 files changed

+5434
-112
lines changed

Some content is hidden

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

121 files changed

+5434
-112
lines changed

‎.github/pull_request_template.md

+15
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

+30
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

+32
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

+13
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

+187
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+
}

‎Compound Interest Calculator/README.md

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<h1 id="conpound-interest-calculator">Compound Interest Calculato</h1>
2+
3+
<p>A mini project that aims to calculate the Compound Interest by just adding the values to the webpage. This Project does complex calculations within few seconds, making user's work easier.</p>
4+
<br>
5+
6+
<h2 id="tech-stack-used">Tech Stack Used</h2>
7+
<br>
8+
9+
<p><img src="https://img.shields.io/badge/html5%20-%23E34F26.svg?&style=for-the-badge&logo=html5&logoColor=white" alt="HTML">
10+
<img src="https://img.shields.io/badge/css3%20-%231572B6.svg?&style=for-the-badge&logo=css3&logoColor=white" alt="CSS">
11+
<img src="https://img.shields.io/badge/javascript%20-%23323330.svg?&style=for-the-badge&logo=javascript&logoColor=%23F7DF1E" alt="JS"></p>
12+
13+
<h2 id="how-to-use">How to use:</h2>
14+
<br>
15+
16+
<ul>
17+
<li>Download or clone the repository</li>
18+
<pre><code>
19+
git clone https://github.com/Ayushparikh-code/Web-dev-mini-projects.git
20+
</code></pre>
21+
22+
<li>Go to the directory compound-interest-calculator</li>
23+
<li>Run the index.html file in your browser</li>
24+
<li>Get your calculations done within seconds<br></li>
25+
</ul>
26+
27+
<h2 id="use-of-the-project">Use of the Project</h2>
28+
29+
<p>
30+
This mini project helps you to calculate Compound Interest by just giving the values of Principal Amount, Interest Percentage (%), Duration & Number of times Interest is given in a particular year.
31+
Without even knowing the formula and doing math, you can now calculate Compound Interest
32+
</p>
33+
<br><br>
34+
35+
<p>
36+
<img src="https://user-images.githubusercontent.com/67221487/125161239-d20bc080-e19e-11eb-9892-a6073354a29f.png" alt="image">
37+
<br><br>
38+
<img src="https://user-images.githubusercontent.com/67221487/125161252-de901900-e19e-11eb-8ed3-32032b93b56d.png" alt="image">
39+
</p>

‎Compound Interest Calculator/index.html

+61
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<html>
2+
<head>
3+
4+
<link rel="stylesheet" type="text/css" href="style.css" >
5+
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
6+
</head>
7+
8+
<body class="body">
9+
<br>
10+
<div class="container">
11+
<div class="card text-black bg-light mb-9" style="max-width: 200rem;">
12+
13+
<div class="container">
14+
<div class="row">
15+
<div class="col-md-12">
16+
<h1 id="title">Compound Interest Calculator</h1>
17+
</div>
18+
</div>
19+
<br>
20+
21+
<div class="row">
22+
<div class="col-md-12">
23+
<form>
24+
<div class="form-group">
25+
<label class="form-group">Principal</label>
26+
<input class="form-control" type="text" id="principal" placeholder="Amount">
27+
</div>
28+
<div class="form-group">
29+
<label class="form-group">Interest rate (%)</label>
30+
<input class="form-control" type="text" id="annual-interest-rate"
31+
placeholder="Rate in %">
32+
</div>
33+
<div class="form-group">
34+
<label class="form-group">Number of Years</label>
35+
<input class="form-control" type="text" id="number-of-year"
36+
placeholder="Years">
37+
</div>
38+
<div class="form-group">
39+
<label class="form-group">Number of Times in a Single Year </label>
40+
<input class="form-control" type="text" id="number-of-times-in-year"
41+
placeholder="Times in Year">
42+
</div>
43+
44+
<button id = "btn" class="btn btn-block btn-info" type="button">Calculate</button>
45+
</form>
46+
</div>
47+
</div>
48+
<br>
49+
<h5 class="total">Result</h5>
50+
51+
<div class="row">
52+
<div class="col-md-12">
53+
<h1 id="res">0</h1>
54+
</div>
55+
</div>
56+
</div>
57+
</div>
58+
</div>
59+
</body>
60+
<script type="text/javascript" src = "script.js"></script>
61+
</html>

0 commit comments

Comments
 (0)