Merge pull request #1960 from SaiTejaswaniBikkasani/add-compound-inte…

…rest-calculator Added Compound Interest Calculator
Sulagna-Dutta-Roy · Jun 27, 2024 · bde5297 · bde5297
2 parents e8282da + 20f0a66
commit bde5297
Show file tree

Hide file tree

Showing 4 changed files with 117 additions and 0 deletions.
diff --git a/Compound Interest Calculator/index.html b/Compound Interest Calculator/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Compound interest calculator</title>
+    <link rel="stylesheet" href="style.css">
+    <link rel="manifest" href="manifest.json">
+  </head>
+  <body>
+    <div class="container">
+      <h1>Compound Interest Calculator</h1>
+      <div class="input-values">
+        <div class="elements">
+          <label>Principal Amount:</label>
+          <input type="number" min="0" class="js-principal"><br>
+        </div>
+        <div class="elements">
+          <label>Annual Interest Rate (%):</label>
+          <input type="number" min="0" class="js-interest-rate"><br>
+        </div>
+        <div class="elements">
+          <label>Number of Years:</label>
+          <input type="number" min="0" class="js-years"><br>
+        </div>
+        <button type="submit" class="js-submit">Calculate</button>
+        <div class="js-result result" style="display: none"></div>
+      </div>
+    </div>
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/Compound Interest Calculator/manifest.json b/Compound Interest Calculator/manifest.json
@@ -0,0 +1,9 @@
+{
+  "name": "Compound Interest Calculator",
+  "short_name": "InterestCalc",
+  "description": "A simple compound interest calculator.",
+  "start_url": "index.html",
+  "display": "standalone",
+  "background_color": "#ffffff",
+  "theme_color": "#4CAF50"
+}
diff --git a/Compound Interest Calculator/script.js b/Compound Interest Calculator/script.js
@@ -0,0 +1,24 @@
+function compoundInterest() {
+  const principalAmount = document.querySelector('.js-principal').value;
+  const interestRate = document.querySelector('.js-interest-rate').value;
+  const years = document.querySelector('.js-years').value;
+
+  document.querySelector('.js-result').style.display = 'block';
+
+  let calculatedValue;
+
+  console.log(principalAmount);
+
+  if(principalAmount !== '' && interestRate !== '' && years !== ''){
+    calculatedValue = principalAmount * Math.pow((1 + interestRate / 100), years) - principalAmount;
+
+    document.querySelector('.js-result').innerHTML = `Compound Interest: ₹${calculatedValue.toFixed(2)}`;
+  }else {
+    document.querySelector('.js-result').innerHTML = 'Please enter valid input values';
+  }
+}
+
+document.querySelector('.js-submit')
+  .addEventListener('click', () => {
+    compoundInterest();
+  });
diff --git a/Compound Interest Calculator/style.css b/Compound Interest Calculator/style.css
@@ -0,0 +1,52 @@
+.container{
+  width: 600px;
+  height: 300px;
+  background-color: #f9f9f9;
+  margin: 0 auto;
+}
+input{
+  border-radius: 5px;
+  border: 1.5px solid black;
+  width: 200px;;
+  padding: 6px;
+  margin-left: 10px;
+
+}
+.elements{
+  margin-top: 15px;
+}
+label{
+  font-family: Arial;
+  font-size: 15px;
+  font-weight: bold;
+}
+button{
+  padding: 7px 30px;
+  text-align: center;
+  font-size: 15px;
+  border-radius: 5px;
+  border: none;
+  background-color: green;
+  color: white;
+  margin-top: 30px;
+  margin-left: 200px;
+  cursor: pointer;
+  font-weight: bold; 
+}
+button:hover{
+  background-color: #e6e6e6;
+  color: black
+}
+.input-values{
+  margin-left: 20px;
+}
+h1{
+  text-align: center;
+}
+.result{
+  padding-top: 10px;
+  font-size: 17px;
+  color: #8A2BE2;
+  font-weight: bold;
+  text-align: center;
+}