-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtoolForMegan.html
174 lines (165 loc) · 5.11 KB
/
toolForMegan.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
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
<!doctype html>
<html>
<head>
<meta charset=utf-8>
<title>Financial Stability Tool</title>
<style type="text/css">
body {
font-family:monospace;
padding:10px;
width:980px;
margin: 0px auto;
}
p {
font-size: 14px;
line-height: 1.5;
}
form#financeForm {
border:1px solid #999;
padding: 15px;
margin-top: 30px;
}
form#financeForm div {
padding: 10px;
}
form#financeForm div.buttons {
margin-left:210px;
}
form#financeForm label {
display:inline-block;
float: left;
padding-top: 3px;
padding-right: 10px;
text-align: right;
width: 200px;
}
form#financeForm .actions {
float:right;
padding:10px;
}
form#financeForm .actions a {
margin-left: 15px;
text-decoration: none;
color: #07c;
}
form#financeForm .actions a:hover {
color: #29e;
}
#results {
padding: 20px;
background-color: #EEEEEE;
margin-top: 20px;
}
#results.hidden {
display: none;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
</style>
</head>
<body>
<p>Hello Megan! Our tool is meant to help you become financially stable by setting aside some
income from each paycheck to cover future spendings. To have a peek in how your money will be
distributed using this tool, please fill in the expected financial data for the next
financial cycle (January, 2016). You can input paychecks, bills, and goals (money you wish to
spend other than bills). After you add an item, you will see a detailed statement below.
In the last column of the statement we will show you how much money you can spend/save from the
paychecks, versus how much money will be set aside by us to pay for future expenses. Thanks for
trying us out!</p>
<form id="financeForm">
<span class="actions">
<a href="./toolForMegan.html">Start Over</a>
<a href="javascript:window.print()">Print</a>
</span>
<div>
<label for="date">Select a Date</label>
<input id="date" type="date" name="date" min="2016-01-01" max="2016-01-31" required>
</div>
<div>
<label for="type">Item Type</label>
<select name="type" id="type" required>
<option value="Paycheck">Paycheck</option>
<option value="Bill">Bill</option>
<option value="Goal">Goal</option>
</select>
</div>
<div>
<label for="amount">Amount in US Dollars</label>
<input type="number" name="amount" id="amount" value="" min="0" step="0.01" placeholder="0.00" required>
</div>
<div>
<label for="details">Detail Desceiption</label>
<input id="details" type="text" name="details" maxlength="30" size="50">
</div>
<div class="buttons">
<input type="reset" value="Clear Form">
<input type="submit" value="Add Item">
</div>
</form>
<div id="results" class="hidden"></div>
<script src="megan.js"></script>
<script>
(function() {
var old = console.log;
var resultsDiv = document.getElementById('results');
console.log = function (message) {
resultsDiv.classList.remove("hidden");
resultsDiv.innerHTML += '<pre>' + message + '</pre >';
};
var FinanceTool = function() {
this.sequence = [];
};
FinanceTool.prototype.addItem = function(type, dollar, date, details) {
// Convert dollar amount to cents, since that is what is expected in the FinanceCycle class.
var amountInCents = Math.round(dollar * 100);
var dateObject = new Date(date);
if (type == "Paycheck") {
this.addToSequence(new Check(amountInCents, dateObject, details));
} else if (type == "Bill") {
this.addToSequence(new Bill(amountInCents, dateObject, details));
} else if (type == "Goal") {
this.addToSequence(new Goal(amountInCents, dateObject, details));
}
};
FinanceTool.prototype.addToSequence = function(item) {
// Find the correct place to insert the new item, so that the sequence is sorted by date.
for (var i = 0; i < this.sequence.length; i++) {
if (this.sequence[i].date > item.date) {
break;
} else if (this.sequence[i].date.getTime() == item.date.getTime() &&
item instanceof Check) {
// If a paycheck and a bill come in the same day, we always put the paycheck before bills.
break;
}
}
this.sequence.splice(i, 0, item);
};
FinanceTool.prototype.run = function() {
try {
var financeCycle = new FinanceCycle(this.sequence);
financeCycle.deductPaychecks();
financeCycle.print();
} catch (err) {
console.log("Something is wrong! " + err);
this.sequence = [];
}
};
var financeTool = new FinanceTool();
document.forms["financeForm"].onsubmit = function() {
resultsDiv.innerHTML = "";
var date = this["date"].value;
var amount = this["amount"].value;
var details = this["details"].value;
var type = this["type"].value;
financeTool.addItem(type, amount, date, details);
financeTool.run();
this.reset();
return false;
};
})();
</script>
</body>
</html>