Tip-calculator/script.js at main · Nilushiya/Tip-calculator · GitHub

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
const input = document.getElementById("input");
let numberOfPeople = document.querySelector(".npeople");
let tipAmount = document.querySelector(".tipAmount");
let totalAmount = document.querySelector(".totalAmount");
let box1 = document.querySelector(".box1")
let box2 = document.querySelector(".box2")
let box3 = document.querySelector(".box3")
let box4 = document.querySelector(".box4")
let box5 = document.querySelector(".box5")
let defaultBox = document.querySelector(".defaultBox");
let reset = document.querySelector(".reset")
let errormsg =document.querySelector(".errormsg")


box1.addEventListener("click",() => {
   // errormsg.innerHTML = "'sorry'"
   if(Number(input.value) === 0){
    errormsg.innerHTML = "'sorry'"
    inputValidate()
   }
   else{
    if(Number(numberOfPeople.value) === 0){
        validate()
    }
    else{
        tipAmount.innerHTML = " $ "+ ((Number(input.value)*0.05)/Number(numberOfPeople.value)).toFixed(2)
        totalAmount.innerHTML = " $ "+ ((Number(input.value)*1.05)/Number(numberOfPeople.value)).toFixed(2)
    }
   }
})

box2.addEventListener("click",() => {
    if(Number(numberOfPeople.value) === 0){
        validate()
    }
  //  else if(Number(numberOfPeople.value) === null){
  //      validatee()
  //  }
    else{
    tipAmount.innerHTML = " $ "+ ((Number(input.value)*0.1)/Number(numberOfPeople.value)).toFixed(2)
    totalAmount.innerHTML = " $ "+ ((Number(input.value)*1.1)/Number(numberOfPeople.value)).toFixed(2)
    }
})

box3.addEventListener("click",() => {
    if(Number(numberOfPeople.value) === 0){
        validate()
    }
    else{
    tipAmount.innerHTML = " $ "+ ((Number(input.value)*0.15)/Number(numberOfPeople.value)).toFixed(2)
    totalAmount.innerHTML = " $ "+ ((Number(input.value)*1.15)/Number(numberOfPeople.value)).toFixed(2)
    }
})

box4.addEventListener("click",() => {
    if(Number(numberOfPeople.value) === 0){
        validate()
    }
    else{
    tipAmount.innerHTML = " $ "+ ((Number(input.value)*0.25)/Number(numberOfPeople.value)).toFixed(2)
    totalAmount.innerHTML = " $ "+ ((Number(input.value)*1.25)/Number(numberOfPeople.value)).toFixed(2)
    }
})

box5.addEventListener("click",() => {
    if(Number(numberOfPeople.value) === 0){
        validate()
    }
    else{
    tipAmount.innerHTML = " $ "+ ((Number(input.value)*0.5)/Number(numberOfPeople.value)).toFixed(2)
    totalAmount.innerHTML = " $ "+ ((Number(input.value)*1.5)/Number(numberOfPeople.value)).toFixed(2)
    }
})
defaultBox.addEventListener('keypress',function (defaul){
    if(Number(numberOfPeople.value) === 0){
        validate()
    }
    else{
    if(defaul.key === 'Enter'){
        tipAmount.innerHTML = " $ "+ ((Number(input.value)*(Number(defaultBox.value)/100))/Number(numberOfPeople.value)).toFixed(2)
        totalAmount.innerHTML = " $ "+ ((Number(input.value)*(1+(Number(defaultBox.value)/100)))/Number(numberOfPeople.value)).toFixed(2)
    }}
})
function validate(){
    setError(numberOfPeople);
}
let can = document.querySelector(".cannot")
function setError(element){
    element.style.color="red"
    element.style.borderColor = "red"

    can.style.color = "red"

    tipAmount.innerHTML = " $ " + 0.00.toFixed(2)
    totalAmount.innerHTML = " $ "+ 0.00.toFixed(2)
}
reset.addEventListener("click",() => {
    input.value = ''
    numberOfPeople.value = ''
    defaultBox.value = ''
    tipAmount.innerHTML = ""
    totalAmount.innerHTML = ""
    numberOfPeople.style.borderColor = "black"
    can.style.color = "black"
    input.style.borderColor = 'black'
    errormsg.style.color = 'black'

})
function inputValidate(){
    errormsg.innerHTML = "can't be Zero"
    input.style.borderColor = 'red'
    //input.style.Color = 'red'
    errormsg.style.color = 'red'
}

/*function validatee(){
    setErrorr(numberOfPeople);
}
function setErrorr(element){
    element.style.color="green"
    element.style.borderColor = "green"

    can.style.color = "green"

    tipAmount.innerHTML = " $ " + 0.00.toFixed(2)
    totalAmount.innerHTML = " $ "+ 0.00.toFixed(2)
}*/