-
Notifications
You must be signed in to change notification settings - Fork 0
/
main.js
92 lines (67 loc) · 2.17 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
let bill = document.querySelector('.inputs-section__bill-input');
let billNumber = parseInt(bill.value);
let people = document.querySelector('.inputs-section__people-input');
let peopleNumber = parseInt(people.value);
let tipResult = document.querySelector('.results__tip-value');
let totalResuslt = document.querySelector('.results__total-value')
let buttons = document.querySelectorAll('.btns__button');
let alert = document.querySelector('#alert');
let tipValue = 5;
buttons.forEach(Element =>{
Element.addEventListener('click', event=>{
//Cambiar estilos
removeActive()
Element.classList.add('btns__button--selected');
tipValue = parseInt(event.target.innerText.slice(0,-1));
calculateTip()
});
})
function removeActive(){
buttons.forEach(Element =>{
Element.classList.remove('btns__button--selected');
});
}
// Actualizando el bill
bill.addEventListener('input', ()=>{
billNumber = parseFloat(bill.value);
})
// Actualizando Custom
let custom = document.querySelector('.btns__custom');
custom.addEventListener('click', ()=>{
removeActive()
});
custom.addEventListener('input', ()=>{
tipValue = parseInt(custom.value);
if (isNaN(tipValue)){
}else{
calculateTip();
}
})
// Actualizando Personas
people.addEventListener('input', ()=>{
peopleNumber = parseFloat(people.value);
if (peopleNumber == 0 || isNaN(peopleNumber)){
people.style.borderColor = 'red';
alert.classList.add('error');
}else{
alert.classList.remove('error');
people.style.borderColor = 'hsl(189, 41%, 97%)';
calculateTip()
}
})
// Reset
let resetBtn = document.querySelector('.result-section__reset');
resetBtn.addEventListener('click', ()=>{
bill.value = 0;
billNumber = 0;
people.value = 5;
peopleNumber = 5;
custom.value = 'Custom';
calculateTip();
});
function calculateTip(){
//Calculo de Tip Amount
tipResult.innerText = ((billNumber * tipValue / 100) / peopleNumber).toFixed(2);
//Calculo del total
totalResuslt.innerText = (((billNumber * tipValue / 100) + billNumber)/peopleNumber).toFixed(2);
}