-
Notifications
You must be signed in to change notification settings - Fork 0
/
main.js
121 lines (93 loc) · 3.74 KB
/
main.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
/* input-fields */
const billInputField = document.getElementById("bill-input-field")
const numberOfPeopleInputField = document.getElementById("number-of-ppl-input-field")
const billInputFieldBorder = document.querySelector(".bill")
const numberOfPeopleInputFieldBorder = document.querySelector(".number-of-people")
/* buttons */
const fivePercent = document.getElementById("five-percent")
const tenPercent = document.getElementById("ten-percent")
const fifteenPercent = document.getElementById("fifteen-percent")
const twentyfivePercent = document.getElementById("twenty-five-percent")
const fiftyPercent = document.getElementById("fifty-percent")
const custom = document.getElementById("custom")
const reset = document.getElementById("reset")
/* displays */
const tipAmountPerPerson = document.getElementById("tip-amount")
const totalPerPerson = document.getElementById("total")
const displayTipAmount = document.getElementById("display-tip-amount")
const displayTotal = document.getElementById("display-total")
const errorMessage = document.querySelector(".error-message")
function calculateTip(tipPercentage) {
let billPerPerson
let tipAmountPerPerson
let totalPerPerson
let billValue = Number(billInputField.value)
let numberOfPeopleValue = Number(numberOfPeopleInputField.value)
if(Boolean(numberOfPeopleValue) === false ) {
numberOfPeopleValue = 1
numberOfPeopleInputField.value = 1
}
billPerPerson = billValue / numberOfPeopleValue
tipAmountPerPerson = (billPerPerson / 100) * tipPercentage
if(tipPercentage === "custom") {
tipPercentage = Number(custom.value)
}
totalPerPerson = billPerPerson + tipAmountPerPerson
tipAmountPerPerson = tipAmountPerPerson.toFixed(2)
totalPerPerson = totalPerPerson.toFixed(2)
displayTipAmount.textContent = `$${tipAmountPerPerson}`
displayTotal.textContent = `$${totalPerPerson}`
reset.style.backgroundColor = `hsl(172, 67%, 45%)`
}
fivePercent.addEventListener("click", function () {
calculateTip(5)
resetTipButtons()
selectTipBtnActive(fivePercent)
})
tenPercent.addEventListener("click", function () {
calculateTip(10)
resetTipButtons()
selectTipBtnActive(tenPercent)
})
fifteenPercent.addEventListener("click", function () {
calculateTip(15)
resetTipButtons()
selectTipBtnActive(fifteenPercent)
})
twentyfivePercent.addEventListener("click", function () {
calculateTip(25)
resetTipButtons()
selectTipBtnActive(twentyfivePercent)
})
fiftyPercent.addEventListener("click", function () {
calculateTip(50)
resetTipButtons()
selectTipBtnActive(fiftyPercent)
})
custom.addEventListener("input", function () {
const customTipPercentage = Number(custom.value);
custom.style.color = `hsl(183, 100%, 15%)`
calculateTip(customTipPercentage);
resetTipButtons();
});
reset.addEventListener("click", function () {
billInputField.value = ""
numberOfPeopleInputField.value = ""
displayTipAmount.textContent = `$0.00`
displayTotal.textContent = `$0.00`
reset.style.backgroundColor = `hsl(183, 98%, 20%)`
custom.value = ""
resetTipButtons()
})
function selectTipBtnActive(tipPercentage) {
tipPercentage.style.backgroundColor = `hsl(172, 67%, 45%)`
tipPercentage.style.color = `hsl(183, 100%, 15%)`
}
function selectTipBtnInactive(tipPercentage) {
tipPercentage.style.backgroundColor = `hsl(183, 100%, 15%)`
tipPercentage.style.color = `#fff`
}
function resetTipButtons() {
const tipButtons = [fivePercent, tenPercent, fifteenPercent, twentyfivePercent, fiftyPercent];
tipButtons.forEach(button => selectTipBtnInactive(button));
}