diff --git a/Fintech Projects/11-FD-CALCULATOR/README.md b/Fintech Projects/11-FD-CALCULATOR/README.md new file mode 100644 index 0000000..43be043 --- /dev/null +++ b/Fintech Projects/11-FD-CALCULATOR/README.md @@ -0,0 +1,19 @@ +# FD Calculator 💰 + +A simple Fixed Deposit (FD) calculator that helps users calculate the maturity amount of their investment. + +## 🚀 Features +- Input principal amount, interest rate, and tenure. +- Calculates maturity amount based on compound interest. +- Simple and user-friendly UI. + + +## 🛠️ Technologies Used +- HTML +- CSS +- JavaScript + +## 📌 How to Use +1. Clone this repository: + ```bash + git clone https://github.com/your-username/FD-Calculator.git diff --git a/Fintech Projects/11-FD-CALCULATOR/index.html b/Fintech Projects/11-FD-CALCULATOR/index.html new file mode 100644 index 0000000..6ff2172 --- /dev/null +++ b/Fintech Projects/11-FD-CALCULATOR/index.html @@ -0,0 +1,30 @@ + + + + + + FD Calculator + + + +
+

FD Calculator

+
+ + +
+
+ + +
+
+ + +
+ +

Maturity Amount

+
+ + + + \ No newline at end of file diff --git a/Fintech Projects/11-FD-CALCULATOR/script.js b/Fintech Projects/11-FD-CALCULATOR/script.js new file mode 100644 index 0000000..6a6c8bf --- /dev/null +++ b/Fintech Projects/11-FD-CALCULATOR/script.js @@ -0,0 +1,18 @@ +function calculateMaturityAmount(){ + // Get input values from the form elements + + const principle = parseFloat(document.getElementById('principle').value); + const interestRate = parseFloat(document.getElementById('interestRate').value); + const tenure = parseFloat(document.getElementById('tenure').value); + + // Perform the calculation + + const maturityAmount = principle + (principle * interestRate * tenure)/100; + + // Display tehe result + document.getElementById('result').innerText = `Maturity Amount: ${maturityAmount.toFixed(2)}`; +} + +// Attach the event listener to the calculate Button + +document.getElementById('calculateBtn').addEventListener('click', calculateMaturityAmount); \ No newline at end of file diff --git a/Fintech Projects/11-FD-CALCULATOR/style.css b/Fintech Projects/11-FD-CALCULATOR/style.css new file mode 100644 index 0000000..5f6cefd --- /dev/null +++ b/Fintech Projects/11-FD-CALCULATOR/style.css @@ -0,0 +1,65 @@ +body{ + font-family: Arial, sans-serif; + background-color: #f2f2f2; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; +} + +.container{ + background-color: #ffffffff; + border-radius: 5px; + padding: 20px; + box-shadow: 0px 0px 2px rgba(198, 193, 193, 0.1); + max-width: 400px; +} +.container:hover{ + box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1); +} + +h1{ + font-size: 24px; + text-align: center; + text-decoration: underline; + margin-bottom: 20px; +} + +.form-group{ + margin-bottom: 10px; +} + +.form-group label{ + display: block; + font-weight: bold; + margin-bottom: 5px; +} + +.form-group input{ + width:96%; + padding: 10px; + font-size: 16px; + border: 1px solid #ccc; + border-radius: 5px; +} + +.result{ + font-size: 18px; + text-align:center; + margin-top: 10px; +} + +.calculate-btn{ + padding: 10px 20px; + background-color: #2979FF; + color: #fff; + font-weight: bolder; + border-radius: 5px; + cursor: pointer; + display: flex; + /* justify-content: center; */ + margin: 0 auto; +} +.calculate-btn:hover{ + background-color: #448AFF; +} \ No newline at end of file