Skip to content

Commit 0c0144f

Browse files
TheArushiSinghTheArushiSingh
authored
Merge branch 'Ayushparikh-code:main' into main
2 parents 11b4868 + f8d0edb commit 0c0144f

Some content is hidden

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

82 files changed

+3593
-63
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.)

‎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>

‎Compound Interest Calculator/script.js

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

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

‎DRUM/README.md

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<h1>DRUM KIT</h1>
2+
3+
<p>Basic Drum Kit made using HTML, CSS, and JavaScript .</p>
4+
5+
### DRUM :
6+
7+
<p>This web app allows you to make your own music with all the beats that are present in the app. You can click on the alphabets or the images that are present on the screen and enjoy the beats. You can also use your keyboard keys to make the music.</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 Using The DRUM
29+
30+
<h3>ScreenShots</h3>
31+
<br>
32+
33+
![drum](images/drumkit.PNG)

‎DRUM/app.js

+56
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
window.addEventListener('load', () => {
2+
const sounds = document.querySelectorAll('.sound');
3+
const pads = document.querySelectorAll('.pads div');
4+
const kit = document.querySelector('.kit');
5+
6+
pads.forEach((pad, index) => {
7+
pad.addEventListener('click', function() {
8+
sounds[index].currentTime = 0;
9+
sounds[index].play();
10+
});
11+
});
12+
13+
//the drum can be played with the keys A.S,D,J,K,L
14+
document.addEventListener("keydown", function(event) {
15+
makeSound(event.key);
16+
buttonAnimation(event.key);
17+
});
18+
19+
function makeSound(key) {
20+
switch (key) {
21+
case 'a':
22+
var closed_hithat = new Audio('sounds/sound1.mp3');
23+
closed_hithat.play();
24+
break;
25+
case 's':
26+
var kick = new Audio('sounds/sound3.mp3');
27+
kick.play();
28+
break;
29+
case 'd':
30+
var clap = new Audio('sounds/sound4.mp3');
31+
clap.play();
32+
break;
33+
case 'j':
34+
var open_hithat = new Audio('sounds/sound5.mp3');
35+
open_hithat.play();
36+
break;
37+
case 'k':
38+
var snare = new Audio('sounds/sound6.mp3');
39+
snare.play();
40+
break;
41+
case 'l':
42+
var crash = new Audio('sounds/sound2.mp3');
43+
crash.play();
44+
break;
45+
}
46+
}
47+
48+
49+
function buttonAnimation(currentKey) {
50+
var activeButton = document.querySelector("." + currentKey);
51+
activeButton.classList.add("pressed");
52+
setTimeout(function() {
53+
activeButton.classList.remove("pressed");
54+
}, 100);
55+
};
56+
});

‎DRUM/images/band.jpg

5.46 MB
Loading

‎DRUM/images/clap.png

3.12 KB
Loading

‎DRUM/images/closed-hihat.png

853 Bytes
Loading

‎DRUM/images/crash.png

1.11 KB
Loading

‎DRUM/images/drumkit.PNG

97.9 KB
Loading

‎DRUM/images/kick.png

3.16 KB
Loading

‎DRUM/images/open-hihat.png

864 Bytes
Loading

‎DRUM/images/snare.png

2.9 KB
Loading

‎DRUM/index.html

+68
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
<html lang="en">
2+
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width">
6+
<title></title>
7+
<link rel="stylesheet" href="style.css">
8+
<!---Fontawsome link-->
9+
<link href="https://fonts.googleapis.com/css2?family=Otomanopee+One&display=swap" rel="stylesheet">
10+
</head>
11+
<body>
12+
<div class="app">
13+
<div class="header">
14+
<h1>DRUM KIT</h1>
15+
<p class="band-tagline">Drummig is my therapy!</p>
16+
</div>
17+
18+
<div class="kit"></div>
19+
<div class="pads">
20+
<div class="pad-1 a">
21+
<center>
22+
<img src="images\closed-hihat.png">
23+
<p class="keyboard-keys">A</p>
24+
</center>
25+
26+
<audio class="sound" src="sounds\sound1.mp3"></audio>
27+
</div>
28+
<div class="pad-3 s">
29+
<center>
30+
<img src="images\kick.png">
31+
<p class="keyboard-keys">S</p>
32+
</center>
33+
<audio class="sound" src="sounds\sound3.mp3"></audio>
34+
</div>
35+
<div class="pad-4 d">
36+
<center>
37+
<img src="images\clap.png">
38+
<p class="keyboard-keys">D</p>
39+
</center>
40+
<audio class="sound" src="sounds\sound4.mp3"></audio>
41+
</div>
42+
<div class="pad-5 j">
43+
<center>
44+
<img src="images\open-hihat.png">
45+
<p class="keyboard-keys">J</p>
46+
</center>
47+
<audio class="sound" src="sounds\sound5.mp3"></audio>
48+
</div>
49+
<div class="pad-6 k">
50+
<center>
51+
<img src="images\snare.png">
52+
<p class="keyboard-keys">K</p>
53+
</center>
54+
<audio class="sound" src="sounds\sound6.mp3"></audio>
55+
</div>
56+
<div class="pad-2 l">
57+
<center>
58+
<img src="images\crash.png">
59+
<p class="keyboard-keys">L</p>
60+
</center>
61+
<audio class="sound" src="sounds\sound2.mp3"></audio>
62+
</div>
63+
</div>
64+
</div>
65+
66+
<script src="app.js"></script>
67+
</body>
68+
</html>

‎DRUM/sounds/sound1.mp3

27.4 KB
Binary file not shown.

‎DRUM/sounds/sound2.mp3

37.2 KB
Binary file not shown.

‎DRUM/sounds/sound3.mp3

27.8 KB
Binary file not shown.

‎DRUM/sounds/sound4.mp3

26.6 KB
Binary file not shown.

‎DRUM/sounds/sound5.mp3

29.8 KB
Binary file not shown.

‎DRUM/sounds/sound6.mp3

32.7 KB
Binary file not shown.

0 commit comments

Comments
 (0)