-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
executable file
·519 lines (459 loc) · 25.2 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
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
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Don't Spend That Money - The Opportunity Cost Calculator</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Don't Spend That Money: Find the opportunity cost of of spending vs investing.">
<link rel="stylesheet" href="theme/bootstrap.css" media="screen">
<link rel="stylesheet" href="theme/usebootstrap.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.1.1/gh-fork-ribbon.min.css"/>
<!--[if lt IE 9]>
<link rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.1.1/gh-fork-ribbon.ie.min.css"/>
<![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="bootstrap/html5shiv.js"></script>
<script src="bootstrap/respond.min.js"></script>
<![endif]-->
<script src="js/scripts/cost_functions.js"></script>
<script>
function validateVar(variable) {
if (variable == "" || typeof variable === 'undefined') {
// your code here.
document.getElementById("horrible_error").style.display = "block";
return false;
}
;
return true;
}
</script>
<script language="JavaScript" type="text/javascript">
function scrollToCalc() {
$("calc")[0].scrollIntoView(true);
}
</script>
<script langauage="JavaScript" type="text/javascript">
function formatReturns(returns) {
return String(returns.realReturn.toFixed(2)) + " (real), " + String(returns.nominalReturn.toFixed(2) + " (nominal)");
}
</script>
<script language="javascript" type="text/javascript">
function calcFunct() {
var income = document.getElementById('income').value;
var itax = document.getElementById('itax').value;
var stax = document.getElementById('stax').value;
var weeksoff = document.getElementById('weeksoff').value;
var price = document.getElementById('price').value;
if (validateVar(income) &&
validateVar(itax) &&
validateVar(stax) &&
validateVar(weeksoff) &&
validateVar(price)) {
var priceindays = priceInDays(parseFloat(income), parseFloat(price), parseFloat(stax), parseFloat(itax), parseFloat(weeksoff));
var priceinhours = priceInHours(parseFloat(priceindays));
var realPrice = priceWithSalesTax(price, stax);
var valueIfInvestedStock5 = averageReturnsIfInvestedSP500(parseFloat(realPrice), 5);
var valueIfInvestedStock10 = averageReturnsIfInvestedSP500(parseFloat(realPrice), 10);
var valueIfInvestedStock20 = averageReturnsIfInvestedSP500(parseFloat(realPrice), 20);
var valueIfInvestedStock30 = averageReturnsIfInvestedSP500(parseFloat(realPrice), 30);
document.getElementById("origresults").innerHTML = "For an item with original cost of "
+ String(realPrice.toFixed(2)) + " it has the following impact on your financial future:";
var valueIfInvestedST5 = averageReturnsIfInvestedSTT(parseFloat(realPrice), 5);
var valueIfInvestedST10 = averageReturnsIfInvestedSTT(parseFloat(realPrice), 10);
var valueIfInvestedST20 = averageReturnsIfInvestedSTT(parseFloat(realPrice), 20);
var valueIfInvestedST30 = averageReturnsIfInvestedSTT(parseFloat(realPrice), 30);
var valueIfInvestedIT5 = averageReturnsIfInvestedITT(parseFloat(realPrice), 5);
var valueIfInvestedIT10 = averageReturnsIfInvestedITT(parseFloat(realPrice), 10);
var valueIfInvestedIT20 = averageReturnsIfInvestedITT(parseFloat(realPrice), 20);
var valueIfInvestedIT30 = averageReturnsIfInvestedITT(parseFloat(realPrice), 30);
//Time Prices
document.getElementById("result-cost-months").innerHTML = String((priceindays / 20).toFixed(2));
document.getElementById("result-cost-weeks").innerHTML = String((priceindays / 5).toFixed(2));
document.getElementById("result-cost-days").innerHTML = String(priceindays.toFixed(2));
document.getElementById("result-cost-hours").innerHTML = String(priceinhours.toFixed(2));
//Stock Investment Returns
document.getElementById("value-inv-sp5").innerHTML = formatReturns(valueIfInvestedStock5);
document.getElementById("value-inv-sp10").innerHTML = formatReturns(valueIfInvestedStock10);
document.getElementById("value-inv-sp20").innerHTML = formatReturns(valueIfInvestedStock20);
document.getElementById("value-inv-sp30").innerHTML = formatReturns(valueIfInvestedStock30);
//ST Bond Investment Returns
document.getElementById("value-inv-st5").innerHTML = formatReturns(valueIfInvestedST5);
document.getElementById("value-inv-st10").innerHTML = formatReturns(valueIfInvestedST10);
document.getElementById("value-inv-st20").innerHTML = formatReturns(valueIfInvestedST20);
document.getElementById("value-inv-st30").innerHTML = formatReturns(valueIfInvestedST30);
//IT Bond Investment Returns
document.getElementById("value-inv-it5").innerHTML = formatReturns(valueIfInvestedIT5);
document.getElementById("value-inv-it10").innerHTML = formatReturns(valueIfInvestedIT10);
document.getElementById("value-inv-it20").innerHTML = formatReturns(valueIfInvestedIT20);
document.getElementById("value-inv-it30").innerHTML = formatReturns(valueIfInvestedIT30);
document.getElementById("tempresults").style.display = "none";
document.getElementById("allresults").style.display = "block";
}
}
</script>
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a href="http://dontspendthatmoney.com/" class="navbar-brand">Don't Spend That Money</a>
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse" id="navbar-main">
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" id="menu">Menu <span
class="caret"></span></a>
<ul class="dropdown-menu" aria-labelledby="menu">
<li><a href="#about">What Is This?</a></li>
<li class="divider"></li>
<li><a href="#calc">The Calculator</a></li>
<li class="divider"></li>
<li><a href="#results">Results</a></li>
<li class="divider"></li>
<li><a href="#contact">Contact Me</a></li>
<li class="divider"></li>
<li><a href="#disclaimer">Disclaimer</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
</ul>
</div>
</div>
</div>
<div class="container">
<div class="page-header" id="banner">
<!-- Containers
================================================== -->
<div class="bs-docs-section">
<div class="row">
<div class="jumbotron">
<h1>What is this?</h1>
<p>Ever wonder how much time you <i>actually</i> spend working for that latest gadget?
Now you can know for sure.</p>
<div class="bs-component">
<p>
<button type="button" class="btn btn-info btn-lg" data-container="body"
data-toggle="popover" data-placement="bottom"
data-content="Before your next purchase run your info through this calculator to
figure out what it really costs once you consider the amount of time you spent
working including income and sales tax.">Learn more
</button>
</p>
</div>
</div>
</div>
<div class="row" id="calc">
<div class="jumbotron">
<h2>True Cost Calculator</h2>
<div id="horrible_error" class="alert alert-dismissable alert-danger" style="display: none;">
<button type="button" class="close" data-dismiss="alert">×</button>
<h4>Oh No!</h4>
<p>Looks like all the form values were not given, please fill them out to continue.</p>
</div>
<div id="amazing_success" class="alert alert-dismissable alert-success" style="display: none;">
<button type="button" class="close" data-dismiss="alert">×</button>
<h4>Success!</h4>
<p>Looks like you're on your way to a better financial future!</p>
</div>
<form class="form-horizontal">
<fieldset>
<div class="form-group">
<label for="income" class="col-lg-2 control-label">Annual Salary</label>
<div class="col-lg-10">
<input type="number" min="0" max="100" class="form-control" id="income"
placeholder="Income" title="Annual Salary" required>
</div>
<label for="itax" class="col-lg-2 control-label">Income Tax</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="itax"
placeholder="Effective Income Tax (as a percentage)"
title="Effective Income Tax (%)" required>
</div>
<label for="stax" class="col-lg-2 control-label">Sales Tax</label>
<div class="col-lg-10">
<input type="number" min="0" max="200" class="form-control" id="stax"
placeholder="Sales Tax (as a percentage)" title="Sales Tax (%)" required>
</div>
<label for="weeksoff" class="col-lg-2 control-label">Weeks Off</label>
<div class="col-lg-10">
<input type="number" min="0" max="52" class="form-control" id="weeksoff"
title="Weeks off per year"
placeholder="Weeks off per year" required>
</div>
<label for="price" class="col-lg-2 control-label">Price of Item</label>
<div class="col-lg-10">
<input type="number" type="number" min="1" class="form-control" id="price"
placeholder="Price of Item"
required>
</div>
</div>
<div class="form-group">
<div class="col-lg-10 col-lg-offset-2">
<button type="button" onclick="location.reload();" class="btn btn-info btn-lg">
Cancel
</button>
<button type="button" onclick="calcFunct();" class="btn btn-success btn-lg">Submit
</button>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
<!-- Results -->
<div class="page-header" id="results">
<div class="row">
<div class="col-lg-12">
<h1 id="results">Results</h1>
</div>
</div>
</div>
<div id="tempresults" style="display: block;">
<h5>Nothing to report so far...</h5>
</div>
<div id="allresults" style="display: none;">
<div class="row">
<div class="col-lg-12">
<h3 id="origresults"></h3>
</div>
</div>
<div class="col-lg-3">
<div class="panel panel-warning">
<div class="panel-heading">
<h3 class="panel-title">Cost in months of working</h3>
</div>
<div class="panel-body" id="result-cost-months">
</div>
</div>
<div class="panel panel-warning">
<div class="panel-heading">
<h3 class="panel-title">Cost in weeks of working</h3>
</div>
<div class="panel-body" id="result-cost-weeks">
</div>
</div>
<div class="panel panel-warning">
<div class="panel-heading">
<h3 class="panel-title">Cost in days of working</h3>
</div>
<div class="panel-body" id="result-cost-days">
</div>
</div>
<div class="panel panel-warning">
<div class="panel-heading">
<h3 class="panel-title">Cost in hours* of working</h3>
</div>
<div class="panel-body" id="result-cost-hours">
</div>
</div>
</div>
<div class="col-lg-3">
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title">Value if invested in S&P500* 5 Years</h3>
</div>
<div class="panel-body" id="value-inv-sp5">
</div>
</div>
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title">Value if invested in S&P500* 10 Years</h3>
</div>
<div class="panel-body" id="value-inv-sp10">
</div>
</div>
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title">Value if invested in S&P500* 20 Years</h3>
</div>
<div class="panel-body" id="value-inv-sp20">
</div>
</div>
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title">Value if invested in S&P500* 30 Years</h3>
</div>
<div class="panel-body" id="value-inv-sp30">
</div>
</div>
</div>
<div class="col-lg-3">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">5 Years Invested Short Term Bonds / Cash*</h3>
</div>
<div class="panel-body" id="value-inv-st5">
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">10 Years Invested Short Term Bonds / Cash*</h3>
</div>
<div class="panel-body" id="value-inv-st10">
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">20 Years Invested Short Term Bonds / Cash*</h3>
</div>
<div class="panel-body" id="value-inv-st20">
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">30 Years Invested Short Term Bonds / Cash*</h3>
</div>
<div class="panel-body" id="value-inv-st30">
</div>
</div>
</div>
<div class="col-lg-3">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">5 Years Invested Intermediate Term Bonds*</h3>
</div>
<div class="panel-body" id="value-inv-it5">
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">10 Years Invested Intermediate Term Bonds*</h3>
</div>
<div class="panel-body" id="value-inv-it10">
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">20 Years Invested Intermediate Term Bonds*</h3>
</div>
<div class="panel-body" id="value-inv-it20">
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">30 Years Invested Intermediate Term Bonds*</h3>
</div>
<div class="panel-body" id="value-inv-it30">
</div>
</div>
</div>
</div>
<!-- End Results -->
<!-- About
================================================== -->
<div class="row" id="about">
<div class="col-lg-12">
<div class="page-header">
<h1 id="type">About</h1>
</div>
</div>
</div>
<!-- Headings -->
<div class="row">
<div class="col-lg-4">
<h2>Why do this?</h2>
<p>Economists often discuss things (wages, gdp, interest rates) in
<b><a href="https://en.wikipedia.org/wiki/Real_versus_nominal_value_(economics)">real</a></b>
terms. This is where the thing being discussed is adjusted to inflation, but people usually don't
think in terms of <b><a href="https://en.wikipedia.org/wiki/Opportunity_cost">opportunity costs</a></b>.
Now you can!</p>
<p>What is opportunity cost? The textbook definition from Google is: "the loss of
potential gain from other alternatives when one alternative is chosen".</p>
</div>
<div class="col-lg-4">
<h2>Opportunity Cost: Investing</h2>
<p>Every dollar you spend today is a dollar less you have to spend tomorrow. In the context of
investments every dollar you spend is a dollar you cannot spent or invest tomorrow.</p>
<p>This site
will show you what a purchase historically* would have been worth if invested over certain time
frames in different assets. The point of this is not to recommend one or any investment, just to
illustrate the possible opportunity costs of spending today.</p>
</div>
<div class="col-lg-4">
<h2>Opportunity Cost: Working</h2>
<p>Additionally if you work for a living every dollar you spend has a different type of <b>real</b>
cost: your time.</p>
<p>Assuming all your financial wealth comes from working it is possible to calculate exactly
how much time it takes for you to earn enough to buy something. The results may surprise you!</p>
</div>
</div>
<!-- Contact
================================================== -->
<div class="row" id="contact">
<div class="col-lg-12">
<div class="page-header">
<h1 id="type">Contact</h1>
</div>
</div>
</div>
<!-- Headings -->
<div class="row">
<div class="col-lg-12">
<h2>Contact me</h2>
<p>
<a href="http://www.google.com/recaptcha/mailhide/d?k=01hZ4NWACjyWHwaZE5Sokv1g==&c=1R97QbiCO_lJ93EBMK8Tr75eIaTbVB2_S30nY6uj1oQ=">Click
here</a> to reveal the original author's / website maintainer's email address.</p>
</div>
</div>
<!-- Disclaimer
================================================== -->
<div class="row" id="disclaimer">
<div class="col-lg-12">
<div class="page-header">
<h1 id="type">Disclaimer</h1>
</div>
</div>
</div>
<!-- Headings -->
<div class="row">
<div class="col-lg-12">
<h2>Obligatory Disclaimer</h2>
<p>By accessing this website you agree to all of the following:</p>
<p>DontSpendThatMoney.com is not a Registered Investment Advisor, Broker/Dealer, Financial Analyst,
Financial Bank, Securities Broker or Financial Planner. The Information on the Site is provided for
information purposes only. The Information is not intended to be and does not constitute financial
advice or any other advice, is general in nature and not specific to you. Before using
DontSpendThatMoney.com’s information to make an investment decision, you should seek the advice of a
qualified and registered securities professional and undertake your own due diligence. None of the
information on our Site is intended as investment advice, as an offer or solicitation of an offer to
buy or sell, or as a recommendation, endorsement, or sponsorship of any security, Company, or fund.
DontSpendThatMoney.com, it's owners, and contributors are not responsible for any investment
decision made by you. You are responsible for your own investment research and investment decisions.
</p>
<p>This website is free open source software. By accessing this website you agree with the <a
href="https://raw.githubusercontent.com/briwilcox/dontspendthatmoney/master/LICENSE">license
found here.</a></p>
<h2>Source of historical geometric returns</h2>
<p>Data used for return assumptions can be <a
href="http://pages.stern.nyu.edu/~adamodar/New_Home_Page/datafile/histretSP.html">found
here.</a></p>
</div>
</div>
</div>
<div class="github-fork-ribbon-wrapper right-bottom">
<div class="github-fork-ribbon">
<a href="https://github.com/briwilcox/dontspendthatmoney">Fork me on GitHub</a>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="bootstrap/bootstrap.min.js"></script>
<script src="bootstrap/usebootstrap.js"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-9503588-24', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>