-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·84 lines (76 loc) · 3.33 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<link rel="stylesheet" href="./assets/index.css">
<title>Calculator</title>
</head>
<body>
<div id="app">
<div id="Cal_Main_container">
<div id="intro">
<h1>Calculate Your Savings Goal</h1>
<p>This will help you to determine the amount you need to save per month and week to reach your goal. No need to worry
just put the data on all fields bellow.
We will provide you the result.</p>
</div>
<div id="calculationArea">
<div id="upperButton">
<div id="menuButton"></div>
<hr style="display:none;" id="firstHr">
<div id="menuButton2"></div>
</div>
<div id="innerCalculationArea">
<div class="form-group">
<label for="savingsGoal">your savings goal amount:</label>
<input type="number" min="0" v-model="savingsGoalVal" class="form-control" id="savingsGoal"
placeholder="$0.00">
</div>
<div class="form-group">
<label for="savingsBalance">current savings amount:</label>
<input type="number" min="0" v-model="savingsBalanceVal" class="form-control" id="savingsBalance"
placeholder="$0.00">
</div>
<div class="form-group">
<label for="savingsInterest">Your annual interest rate:</label>
<input type="number" min="0" v-model="savingsInterestVal" class="form-control" id="savingsInterest"
placeholder="0%">
</div>
<div class="form-group">
<label for="savingsTax">The tax withheld:</label>
<input type="number" min="0" v-model="savingsTaxVal" class="form-control" id="savingsTax"
placeholder="0%">
</div>
<div class="form-group">
<label for="savingsYears">Time period to reach goal:</label>
<input type="number" min="0" v-model="savingsYearsVal" class="form-control" id="savingsYears"
placeholder="0 Years">
</div>
<div>
<hr class="Cal_inner_border">
</div>
</div>
<div id="calculationResults">
<div id="resultWeekly">
<h2>Weekly Saving Need</h2>
<br>
<h1 v-if="!numberCheck">${{cal_sav_goal_week}}</h1>
<h1 v-else>$0</h1>
</div>
<hr>
<div id="resultMonthly">
<h2>Monthly Saving Need</h2>
<br>
<h1 v-if="!numberCheck">${{cal_sav_goal_month}}</h1>
<h1 v-else>$0</h1>
</div>
</div>
<button @click="resetValues" @mouseover="borderChange" id="resetButton">Reset Values</button>
</div>
</div>
<script src="./assets/index.js"></script>
</div>
<div id="copyright"> <a href="mailto:hasanuzzamanbe@gmail.com">copyright by Hasanuzzaman</a></div>
</body>
</html>