Skip to content

Commit ac3d61f

Browse files
Ayushparikh-codeAyushparikh-code
authored
Merge pull request #172 from mrkc2303/CI
Added Project : Compound Interest Calculator
2 parents b32a552 + 658acc5 commit ac3d61f

File tree

5 files changed

+160
-1
lines changed

5 files changed

+160
-1
lines changed

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

‎Index.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,4 +61,4 @@
6161
| [Color Guessing Game](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/color-guessor) |It is a basic color guessing game where the player is given a rgb value and he has to guess the color from that.|
6262
| [Double Vertical Slider](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Double-Vertical-Slider) | This App helps to Slide the two different parts of the webpage content at the same time . |
6363
| [Basic Contact Form](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Basic-Contact-Form) | A basic contact form having send and reset button. |
64-
64+
| [Compound Interest Calculator](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Compound%20Interest%20Calculator) | A basic gradient Background Generator which allows you to create a background by selecting your required colors. This will make up a gradient mix and provide you the code line so that you can use it in your Website |

0 commit comments

Comments
 (0)