-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
146 lines (111 loc) · 4.21 KB
/
script.js
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
const tipButtons = document.querySelectorAll('.amount')
const billInput = document.getElementById('bill-input')
const tipAmountInput = document.getElementById('custom-input')
const peopleNumberInput = document.getElementById('people-number-input')
const tipPerPerson = document.getElementById('tip-amount-text')
const totalPerPerson = document.getElementById('total-text')
const percIcon = document.getElementById('percentage-icon')
const selectedTipAmountText = document.getElementById('selectedTipAmount')
const resetBtn = document.getElementById('reset-btn')
var selectedTipAmount = 0
var bill = 0
var tipAmountPerPerson = 0
var totalMoneyPerPerson = 0
// Calculate on input change
billInput.addEventListener('input', calculateCost)
peopleNumberInput.addEventListener('input', calculateCost)
// Bill funcs.
billInput.addEventListener('keyup', () => { // Update bill
updateBill(billInput.value);
})
function updateBill(value){
if(value == ''){
bill = 0
}else if(value.endsWith('.')){ // Fix here
value = value.slice(0, -1);
}
bill = parseFloat(value)
}
// Tip funcs.
tipButtons.forEach(btn => {
btn.addEventListener('click', () => {
tipAmountInput.value = "" // Make custom input empty
checkInput(tipAmountInput.value)
if(btn instanceof HTMLInputElement){ // If clicked custom input, make value 0
btn.setAttribute('data-amount', 0)
}
removeAllSelections() // Make all buttons unselected
btn.classList.add('selected')
btn.id = 'selected'
const selectedTipBtn = document.getElementById('selected')
selectedTipAmount = parseInt(selectedTipBtn.getAttribute('data-amount'))
selectedTipAmountText.innerText = selectedTipAmount + '%'
calculateCost()
})
btn.addEventListener('keyup', () => {
removeAllSelections() // Make all buttons unselected
btn.classList.add('selected')
btn.id = 'selected'
const selectedTipBtn = document.getElementById('selected')
selectedTipAmount = parseInt(selectedTipBtn.getAttribute('data-amount'))
selectedTipAmountText.innerText = selectedTipAmount + '%'
calculateCost()
})
})
function removeAllSelections(){
tipButtons.forEach(btn => {
btn.classList.remove('selected')
btn.id = ''
})
}
function checkInput(value) { // Custom tip input checker
if (value != ""){
percIcon.style.display = 'inline'
tipAmountInput.style.outline = '2px solid #26c2ad'
tipAmountInput.setAttribute("data-amount", value)
}
else {
tipAmountInput.setAttribute("data-amount", 0)
percIcon.style.display = 'none'
tipAmountInput.style.outline = 'none'
}
}
tipAmountInput.onkeydown = (e) => { //Prevent entering negative or float number
if(!((e.keyCode > 95 && e.keyCode < 106)
|| (e.keyCode > 47 && e.keyCode < 58)
|| e.keyCode == 8)) {
return false;
}
}
peopleNumberInput.onkeydown = (e) => { //Prevent entering negative or float number
if(!((e.keyCode > 95 && e.keyCode < 106)
|| (e.keyCode > 47 && e.keyCode < 58)
|| e.keyCode == 8)) {
return false;
}
}
// Right menu
function calculateCost(){ // Calculate costs per person and show on right menu
if(billInput.value != "" && peopleNumberInput.value != "" && peopleNumberInput.valueAsNumber !== 0){
tipAmountPerPerson = (bill*selectedTipAmount)/(100*peopleNumberInput.valueAsNumber)
totalMoneyPerPerson = (bill + ((bill*selectedTipAmount)/100))/peopleNumberInput.valueAsNumber
tipPerPerson.innerText = tipAmountPerPerson.toFixed(2) + "$"
totalPerPerson.innerText = totalMoneyPerPerson.toFixed(2) + "$"
}
}
// Reset button
resetBtn.addEventListener('click', () => {
selectedTipAmount = 0
bill = 0
tipAmountPerPerson = 0
totalMoneyPerPerson = 0
billInput.value = ""
peopleNumberInput.value = ""
tipAmountInput.value = ""
tipAmountInput.setAttribute('data-amount', 0)
tipPerPerson.innerText = 0 + "$"
totalPerPerson.innerText = 0 + "$"
selectedTipAmountText.innerText = 0 + '%'
checkInput(tipAmountInput.value)
removeAllSelections()
})