-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.js
71 lines (67 loc) · 1.98 KB
/
index.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
let tipAmount = 0;
const billAmount = document.querySelector("#billAmount");
const tipButtons = document.querySelectorAll(".tip-percent-btn");
const numOfPeople = document.querySelector("#people");
const customTip = document.querySelector("#custom");
let totalpp = document.querySelector(".total-pp");
let tippp = document.querySelector(".tip-pp");
const resetBtn = document.querySelector(".reset-btn");
tipButtons.forEach((button) => {
button.addEventListener("click", (e) => {
tipButtons.forEach((button) => {
button.classList.remove("active");
});
button.classList.add("active");
e.preventDefault();
if (!billAmount.value || !numOfPeople.value) {
alert("Please enter a bill amount and number of people");
return;
} else {
tipAmount = e.target.value;
calculateTipPerPerson();
resetBtn.disabled = false;
}
});
});
customTip.addEventListener("keyup", (e) => {
tipButtons.forEach((button) => {
button.classList.remove("active");
});
e.preventDefault();
if (!billAmount.value || !numOfPeople.value) {
return;
} else {
tipAmount = e.target.value;
calculateTipPerPerson();
resetBtn.disabled = false;
}
});
const calculateTipPerPerson = () => {
if (numOfPeople !== 0 && billAmount !== 0 && tipAmount !== 0) {
const tipPerPerson = Math.round(
(billAmount.value * (tipAmount / 100)) / numOfPeople.value,
2
);
totalpp.textContent = `$${Math.round(
billAmount.value / numOfPeople.value + tipPerPerson,
2
)}`;
tippp.textContent = `$${Math.round(tipPerPerson, 2)}`;
console.log(tipPerPerson);
} else {
return;
}
};
resetBtn.addEventListener("click", (e) => {
tipButtons.forEach((button) => {
button.classList.remove("active");
});
e.preventDefault();
billAmount.value = undefined;
numOfPeople.value = undefined;
customTip.value = undefined;
totalpp.textContent = "$0.00";
tippp.textContent = "$0.00";
resetBtn.blur();
resetBtn.disabled = true;
});