-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
123 lines (107 loc) · 3.93 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Contingency Funds</title>
<link rel="stylesheet" href="style.css" />
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<script src="script.js"></script>
<header>
<h1 id="headerTitle">Contingency Funds</h1>
</header>
<div class="container">
<!-- First Page -->
<section id="firstPage" class="fadeIn">
<h2 id="whatAreFundsTitle">What are Contingency Funds?</h2>
<p id="whatAreFundsText">
A Contingency fund is a crucial financial safety net designed to cover
unexpected expenses such as medical emergencies, car repairs, or job
loss. It helps ensure financial stability during uncertain times.
</p>
<h2 id="whyNeedTitle">Why Do You Need a Contingency Fund?</h2>
<p id="whyNeedText">
Life is unpredictable, and emergencies can arise at any moment. An
emergency fund provides peace of mind.
</p>
<div class="divider"></div>
<button class="next-button" id="nextButton1">Next</button>
</section>
<!-- Second Page -->
<section id="secondPage" class="fadeIn" style="display: none">
<h2>The 70-20-10 Rule</h2>
<p>
The 70-20-10 rule is a simple financial strategy that helps with
saving and investment. According to this rule:
</p>
<ul>
<li>
70% of your Contingency fund should be invested in Fixed Deposits
(FD), which must be easily withdrawable.
</li>
<li>20% should go into your bank savings account.</li>
<li>10% should be kept in hand as cash for immediate needs.</li>
</ul>
<h3>Contingency Funds Calculation</h3>
<p>
Your Contingency fund must be 6 times your monthly income. The rule of
70-20-10 will help you distribute your funds accordingly.
</p>
<div class="divider"></div>
<button class="next-button" id="nextButton2">Next</button>
</section>
<!-- Calculator Page -->
<section
id="calculatorPage"
class="calculator-container"
style="display: none"
>
<h2>Let's Calculate Your Contingency Fund!</h2>
<label for="monthlyIncome">Enter your monthly income:</label>
<input
type="number"
id="monthlyIncome"
class="input-field"
placeholder="Enter your amount in rupees"
/>
<button class="calculate-button" id="calculateButton">Calculate</button>
<!-- Graph animation -->
<div id="graphContainer" class="graph-container" style="display: none">
<div class="graph-bar"></div>
<div class="graph-bar"></div>
<div class="graph-bar"></div>
<div class="graph-bar"></div>
<div class="graph-bar"></div>
</div>
<!-- Chart for displaying data -->
<div
id="chartContainer"
style="display: none; width: 100%; max-width: 600px"
>
<canvas id="fundChart"></canvas>
</div>
<div id="result" class="result" style="display: none"></div>
</section>
</div>
<!-- Footer Section -->
<div class="footer">
<p>
Developed by
<a
href="https://www.linkedin.com/in/vedant200704prasad/"
target="_blank"
>Vedant</a
>
and
<a href="https://www.linkedin.com/in/5h1vm/" target="_blank">Shivam</a>
<span class="icons">
<span class="heart">❤</span>
<span class="currency">💰</span>
<span class="market">📈</span>
</span>
</p>
</div>
</body>
</html>