Skip to content

Commit

Permalink
Merge pull request #2 from ayush-that/manyaigdtuw-patch-3
Browse files Browse the repository at this point in the history 
Add files via upload
  • Loading branch information
@ayush-that
ayush-that authored Jan 25, 2024
2 parents cc41cd1 + 994cc2f commit 81febd7
Show file tree
Hide file tree
Showing 3 changed files with 251 additions and 0 deletions.
126 changes: 126 additions & 0 deletions tools/cal.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,126 @@
body {
font-family: 'Roboto', sans-serif;
background-color: #f4f8ff; /* very light blue */
color: #333;
margin: 0;
padding: 0;
border: 10px solid #e6e6e6; /* light gray border */
opacity: 0;
animation: fadeIn 1s ease-out forwards;
text-align: center;
}

.calculator-section {
max-width: 600px;
margin: 0 auto; /* Center align the calculator section */
}

h2 {
color: #004080;
margin-bottom: 20px;
}

h3 {
color: #0066cc;
}

/* Make specific headings bold and enlarged */
label[for="monthlyInvestment"],
label[for="annualInterestRate"],
label[for="investmentPeriod"],
label[for="principalAmount"],
label[for="annualInterestRatePPF"],
label[for="investmentPeriodPPF"] {
font-weight: bold;
font-size: 1.2em;
}

p {
line-height: 1.6;
}

ul {
list-style: none;
padding: 0;
}

li {
margin-bottom: 10px;
}

form {
display: grid;
gap: 10px;
margin-top: 15px;
}

label {
color: #333;
}

input {
width: 100%;
padding: 10px;
box-sizing: border-box;
border: 1px solid #ddd;
border-radius: 4px;
}

button {
background-color: #004080;
color: #fff;
padding: 12px;
border: none;
border-radius: 4px;
cursor: pointer;
opacity: 0;
animation: fadeIn 1s ease-out forwards;
}

button:hover {
background-color: #00264d;
}

#sipResult,
#ppfResult {
font-weight: bold;
color: #333;
margin-top: 15px;
opacity: 0;
animation: fadeIn 1s ease-out forwards;
}

/* Star pop-up animation for SIP result */
#sipResult::after {
content: '\2605'; /* Unicode character for a star */
display: block;
font-size: 2em;
color: gold;
animation: popUp 0.5s ease-out 1s forwards;
}

/* Rs pop-up animation for PPF result */
#ppfResult::after {
content: '₹'; /* Unicode character for Rupee symbol */
display: block;
font-size: 1.5em;
color: #004080;
animation: popUp 0.5s ease-out 1s forwards;
}

@keyframes fadeIn {
to {
opacity: 1;
}
}

@keyframes popUp {
from {
transform: scale(0);
}
to {
transform: scale(1);
}
}


34 changes: 34 additions & 0 deletions tools/cal.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
function calculateSIP() {
const monthlyInvestment = parseFloat(document.getElementById('monthlyInvestment').value);
const annualInterestRate = parseFloat(document.getElementById('annualInterestRate').value);
const investmentPeriod = parseFloat(document.getElementById('investmentPeriod').value);

const monthlyInterestRate = (annualInterestRate / 100) / 12;
const totalMonths = investmentPeriod * 12;

const futureValue = monthlyInvestment * (((Math.pow(1 + monthlyInterestRate, totalMonths) - 1) / monthlyInterestRate) + 1);

const sipResultElement = document.getElementById('sipResult');
sipResultElement.innerHTML = `<h3>Potential Returns:</h3>
<p>If you invest INR ${monthlyInvestment} every month at an annual interest rate of ${annualInterestRate}%,</p>
<p>your potential returns after ${investmentPeriod} years could be approximately INR ${futureValue.toFixed(2)}.</p>`;
}

function calculatePPF() {
const principalAmount = parseFloat(document.getElementById('principalAmount').value);
const annualInterestRatePPF = parseFloat(document.getElementById('annualInterestRatePPF').value);
const investmentPeriodPPF = parseFloat(document.getElementById('investmentPeriodPPF').value);

const monthlyInterestRatePPF = (annualInterestRatePPF / 100) / 12;
const totalMonthsPPF = investmentPeriodPPF * 12;

const futureValuePPF = principalAmount * Math.pow(1 + monthlyInterestRatePPF, totalMonthsPPF);

const ppfResultElement = document.getElementById('ppfResult');
ppfResultElement.innerHTML = `<h3>Potential Returns:</h3>
<p>If you invest INR ${principalAmount} at an annual interest rate of ${annualInterestRatePPF}%,</p>
<p>your maturity amount after ${investmentPeriodPPF} years could be approximately INR ${futureValuePPF.toFixed(2)}.</p>`;
}



91 changes: 91 additions & 0 deletions tools/sip_PPF_cAL.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>fin veda</title>
<link rel="stylesheet" type="text/css" href="cal.css">


</head>

<body>

<!-- SIP Calculator Section -->
<section>
<h2>SIP Calculator</h2>

<!-- SIP Calculator Content -->
<div>
<h3>What is SIP (Systematic Investment Plan)?</h3>
<p>SIP, or Systematic Investment Plan, is a disciplined way of investing in mutual funds. It allows you to invest a fixed amount regularly, typically monthly, in a mutual fund scheme of your choice.</p>

<h3>Benefits of SIP:</h3>
<ul>
<li> SIP encourages regular and disciplined investing, helping you avoid the temptation of timing the market.</li>
<li> SIP allows you to buy more units when prices are low and fewer units when prices are high, resulting in better average costs over time.</li>
<li>The longer you stay invested, the greater the power of compounding. SIP enables you to benefit from the compounding effect over the long term.</li>
<li> SIP allows you to start with a small amount and increase your investment gradually as your financial situation improves.</li>
</ul>

<!-- SIP Calculator Form -->
<form id="sipCalculatorForm">
<label for="monthlyInvestment">Monthly Investment Amount (INR):</label>
<input type="number" id="monthlyInvestment" name="monthlyInvestment" required>

<label for="annualInterestRate">Annual Interest Rate (%):</label>
<input type="number" id="annualInterestRate" name="annualInterestRate" required>

<label for="investmentPeriod">Investment Period (Years):</label>
<input type="number" id="investmentPeriod" name="investmentPeriod" required>

<button type="button" onclick="calculateSIP()">Calculate Returns</button>

<!-- Display result here -->
<div id="sipResult"></div>
</form>
</div>
</section>

<!-- PPF Calculator Section -->
<section>
<h2>PPF Calculator</h2>

<!-- PPF Content -->
<div>
<h3>What is PPF (Public Provident Fund)?</h3>
<p>PPF, or Public Provident Fund, is a popular long-term savings scheme backed by the Government of India. It allows individuals to invest a fixed amount annually for a specified period, offering attractive interest rates and tax benefits.</p>

<h3>Benefits of PPF:</h3>
<ul>
<li> PPF is a government-backed investment, ensuring the safety and security of your savings.</li>
<li> PPF provides competitive interest rates that are compounded annually, contributing to your wealth over time.</li>
<li>Contributions to PPF are eligible for tax deductions under Section 80C of the Income Tax Act.</li>
<li>PPF has a lock-in period, promoting long-term savings habits and financial discipline.</li>
</ul>

<!-- PPF Calculator Form -->
<form id="ppfCalculatorForm">
<label for="principalAmount">Principal Amount (INR):</label>
<input type="number" id="principalAmount" name="principalAmount" required>

<label for="annualInterestRate">Annual Interest Rate (%):</label>
<input type="number" id="annualInterestRatePPF" name="annualInterestRatePPF" required>

<label for="investmentPeriod">Investment Period (Years):</label>
<input type="number" id="investmentPeriodPPF" name="investmentPeriodPPF" required>

<button type="button" onclick="calculatePPF()">Calculate Returns</button>

<!-- Display result here -->
<div id="ppfResult"></div>
</form>
</section>



<script src="cal.js"></script>
</body>
</html>


0 comments on commit 81febd7

Please sign in to comment.