-
Notifications
You must be signed in to change notification settings - Fork 0
/
salary.html
145 lines (129 loc) · 3.82 KB
/
salary.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
<!DOCTYPE html>
<html>
<head>
<!-- Because I didn't want to write this in more than one file :) -->
<style>
body {
width: 36em;
margin: 0 auto;
padding: 3em;
font-size: 125%;
font-family: Helvetica, sans-serif;
font-weight: 200;
}
input, .total, button {
font-size: 1em;
font-family: Tahoma, sans-serif;
}
.light {
background-color: yellow;
}
label { width: 8em; display: inline-block; }
</style>
</head>
<body>
<p>Offer calculator, specialized for interns (3 months, 40 hour work-weeks)</p>
<div class="offer">
<!-- $/hr $/wk $/month $/year -->
<label for="hr">$/hr</label>
<input type="text" class="hr" placeholder="$/hr">
<br>
<label for="wk">$/wk</label>
<input type="text" class="wk" placeholder="$/wk">
<br>
<label for="summer">$/summer</label>
<input type="text" class="summer" placeholder="$/yr">
<br>
<label for="yr">$/yr</label>
<input type="text" class="yr" placeholder="$/yr">
<br>
<br>
<!-- $housing/3months -->
<label for="housing3months">$housing/3months</label>
<input type="text" class="housing3months" placeholder="$housing/3months">
<p>Total (summer + housing/3months): <span class="total"></span>
<br>
<input class="save" type="text" placeholder="company name">
<button class="save">save</button>
</p>
<p>To compare more than one offer, I recommend opening another tab :)</p>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(function() {
$('.hr, .wk, .summer, .yr').on('keyup', salaryChange)
function salaryChange(e) {
var el = $(e.target)
console.log('calcing based on', el.val())
el.siblings().removeClass('light')
el.addClass('light')
var time = el.attr('class').split(' ')[0];
var rate = text2number(el.val())
var offer = calculate({ time: time, rate: rate });
for (var time in offer) {
el.siblings('.'+time)
.first()
.val(number2text(offer[time]))
}
housingChange()
}
$('.housing3months').on('keyup', housingChange)
function housingChange(e) {
// hardcoded so can be called from salaryChange
var el = $('.housing3months')
var housing3months = text2number(el.val())
el.val(housing3months)
var summer = text2number($('.summer').val());
var total = housing3months + summer
$('.total').text(number2text(total))
}
function calculate(opts) {
opts.rate = opts.rate || 0
var multiplier = 1
// hour takes you to week, week takes you to summer,
// summer takes you to year
switch(opts.time) {
case 'hr': multiplier *= 40
case 'wk': multiplier *= 12
case 'summer': multiplier *= 4
case 'yr': multiplier *= 1
}
var offer = {}
offer.yr = multiplier * opts.rate
offer.summer = offer.yr / 4
offer.wk = offer.summer / 12
offer.hr = offer.wk / 40
return offer
}
function text2number(t) {
t = t || '0'
return parseFloat(t.split(',').join(''), 10)
}
function number2text(n) {
var chunks = []
var text = n + ''
var decimal = text.indexOf('.') > -1 && text.substring(text.indexOf('.'))
decimal = decimal || ''
if (decimal) text = text.substring(0, text.length - decimal.length)
if (text.length <= 3) return text + decimal
var count = text.length
while (count >= 0) {
chunks.unshift(text.substring(count-3, count))
count -= 3
}
return chunks.filter(function(c) { return c }).join(',') + decimal
}
salaryChange({ target: $('.hr')[0] })
$('.hr').focus();
// saving functionality
$('input.save').on('keypress', function(e) { if (e.which == 13) onSave() })
$('button.save').on('click', onSave)
function onSave(e) {
var name = $('input.save').val()
var total = $('.total').text()
$('.offer').append($('<p></p>').text(name+': '+total))
}
})
</script>
</body>
</html>