Skip to content

Commit 0714f92

Browse files
mrkc2303mrkc2303
authored
Merge branch 'Ayushparikh-code:main' into youtube
2 parents b33dad6 + ac3d61f commit 0714f92

File tree

23 files changed

+801
-60
lines changed

23 files changed

+801
-60
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.)

‎Compound Interest Calculator/README.md

Lines changed: 39 additions & 0 deletions
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

Lines changed: 61 additions & 0 deletions
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>

‎Compound Interest Calculator/script.js

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
var btn = document.getElementById("btn");
2+
var body = document.querySelector("body");
3+
4+
function calculate() {
5+
6+
var CI = 0;
7+
var principal = document.getElementById("principal").value;
8+
var interest = document.getElementById("annual-interest-rate").value;
9+
var nyear = document.getElementById("number-of-year").value;
10+
var ntime = document.getElementById("number-of-times-in-year").value;
11+
12+
if(principal > 0 && interest > 0 && nyear > 0 && ntime > 0) {
13+
CI = (principal* Math.pow((1 + (interest/(ntime*100))), (ntime*nyear)));
14+
CI = CI.toFixed(2);
15+
document.getElementById("res").innerHTML = CI;
16+
}
17+
else{
18+
alert("Please Enter Valid Values!!")
19+
}
20+
21+
}
22+
23+
btn.addEventListener("click", calculate);
24+
body.addEventListener("keypress", function check(event) {
25+
if(event.keyCode === 13){
26+
calculate();
27+
}
28+
});

‎Compound Interest Calculator/style.css

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
.body{
2+
background-color: rgb(6, 177, 207);
3+
}
4+
5+
h1{
6+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
7+
text-align: center;
8+
}
9+
10+
h5{
11+
text-align: center;
12+
}
13+
14+
.card{
15+
padding-top: 30px;
16+
margin-top: 50px;
17+
padding-bottom: 35px;
18+
margin-bottom: 90px;
19+
}
20+
21+
#res{
22+
color: rgb(85, 82, 82);
23+
}
24+
25+
.name{
26+
color: white;
27+
}
28+
29+
#title{
30+
color: teal;
31+
}

‎Double Vertical Slider/Double-Vertical-Slider.png

538 KB
Loading

‎Double Vertical Slider/README.md

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<h1>Double Vertical Slider App</h1>
2+
3+
<p>A Simple Double Vertical Slider App written in HTML, CSS and JavaScript .</p>
4+
5+
### Use of the Project:
6+
7+
<p>This App helps to Slide the two different parts of the webpage content at the same time </p>
8+
9+
<h3>Used Technologies</h3>
10+
<ul>
11+
<li>HTML5</li>
12+
<li>CSS3</li>
13+
<li>JavaScript</li>
14+
</ul>
15+
16+
#### Steps to Use:
17+
18+
---
19+
20+
- Download or clone the repository
21+
22+
```
23+
git clone https://github.com/Ayushparikh-code/Web-dev-mini-projects.git
24+
```
25+
26+
- Go to the directory
27+
- Run the index.html file
28+
- Start Scrolling!!!
29+
30+
<h3> ScreenShots </h3>
31+
32+
<img width="960" alt="Double-Vertical-Slider" src="https://user-images.githubusercontent.com/64218887/124983592-c660b280-e055-11eb-8569-21918d77552e.png">
33+
34+
<br>
35+

‎Double Vertical Slider/index.html

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
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/5.15.1/css/all.min.css"
9+
/>
10+
<link rel="stylesheet" href="./style.css" />
11+
<title>Vertical Slider</title>
12+
</head>
13+
<body>
14+
<div class="slider-container">
15+
<div class="left-slide">
16+
<div style="background-color: #fd3555">
17+
<h1>Nature flower</h1>
18+
<p>all in pink</p>
19+
</div>
20+
<div style="background-color: #2a86ba">
21+
<h1>Bluuue Sky</h1>
22+
<p>with it's mountains</p>
23+
</div>
24+
<div style="background-color: #252e33">
25+
<h1>Lonely castle</h1>
26+
<p>in the wilderness</p>
27+
</div>
28+
<div style="background-color: #ffb866">
29+
<h1>Flying eagle</h1>
30+
<p>in the sunset</p>
31+
</div>
32+
</div>
33+
<div class="right-slide">
34+
<div
35+
style="
36+
background-image: url('https://images.unsplash.com/photo-1508768787810-6adc1f613514?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e27f6661df21ed17ab5355b28af8df4e&auto=format&fit=crop&w=1350&q=80');
37+
"
38+
></div>
39+
<div
40+
style="
41+
background-image: url('https://images.unsplash.com/photo-1519981593452-666cf05569a9?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=90ed8055f06493290dad8da9584a13f7&auto=format&fit=crop&w=715&q=80');
42+
"
43+
></div>
44+
<div
45+
style="
46+
background-image: url('https://images.unsplash.com/photo-1486899430790-61dbf6f6d98b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=8ecdee5d1b3ed78ff16053b0227874a2&auto=format&fit=crop&w=1002&q=80');
47+
"
48+
></div>
49+
<div
50+
style="
51+
background-image: url('https://images.unsplash.com/photo-1510942201312-84e7962f6dbb?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=da4ca7a78004349f1b63f257e50e4360&auto=format&fit=crop&w=1050&q=80');
52+
"
53+
></div>
54+
</div>
55+
<div class="action-buttons">
56+
<button class="down-button">
57+
<i class="fas fa-arrow-down"></i>
58+
</button>
59+
<button class="up-button">
60+
<i class="fas fa-arrow-up"></i>
61+
</button>
62+
</div>
63+
</div>
64+
65+
<script src="./script.js"></script>
66+
</body>
67+
</html>

‎Double Vertical Slider/script.js

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
const sliderContainer = document.querySelector('.slider-container');
2+
const slideRight = document.querySelector('.right-slide');
3+
const slideLeft = document.querySelector('.left-slide');
4+
const upButton = document.querySelector('.up-button');
5+
const downButton = document.querySelector('.down-button');
6+
const slidesLength = slideRight.querySelectorAll('div').length;
7+
8+
let activeSlideIndex = 0;
9+
10+
slideLeft.style.top = `-${(slidesLength - 1) * 100}vh`;
11+
12+
upButton.addEventListener('click', () => changeSlide('up'));
13+
downButton.addEventListener('click', () => changeSlide('down'));
14+
15+
const changeSlide = (direction) => {
16+
const sliderHeight = sliderContainer.clientHeight;
17+
if (direction === 'up') {
18+
activeSlideIndex++;
19+
if (activeSlideIndex > slidesLength - 1) {
20+
activeSlideIndex = 0;
21+
}
22+
} else if (direction === 'down') {
23+
activeSlideIndex--;
24+
if (activeSlideIndex < 0) {
25+
activeSlideIndex = slidesLength - 1;
26+
}
27+
}
28+
29+
slideRight.style.transform = `translateY(-${
30+
activeSlideIndex * sliderHeight
31+
}px)`;
32+
slideLeft.style.transform = `translateY(${
33+
activeSlideIndex * sliderHeight
34+
}px)`;
35+
};

0 commit comments

Comments
 (0)