Tip_Calculator/script.js at main · fastwithkamran/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
// File for backend calculation
// Declaring and Initializing variables using DOM
// Using constants variables so I accidentally not change it later
const bill_amount = document.getElementById("bill_amount");
const currency = document.getElementById("currency");
const tip_percent = document.getElementById("tip_percent");
const tip_button_1 = document.getElementById("tip_button_1");
const tip_button_2 = document.getElementById("tip_button_2");
const tip_button_3 = document.getElementById("tip_button_3");
const number_of_people = document.getElementById("number_of_people");
const result_total_tip = document.getElementById("result_total_tip");
const result_total_amount = document.getElementById("result_total_amount");
const result_pay_per_person = document.getElementById("result_pay_per_person");
const error_bill_amount = document.getElementById("error_bill_amount");
const error_tip_percent = document.getElementById("error_tip_percent");
const error_number_of_people = document.getElementById("error_number_of_people");

// Implementing a function to calculate
function calculate() {

    const get_bill_amount = parseFloat(bill_amount.value) || 0; // adding || (OR operator) to make sure that if user enters any string or invalid integer, the program will raise the error
    if (get_bill_amount <= 0) { // conditional statements to show error display tag; upon checking conditions givien in instructions
        error_bill_amount.classList.add("show");
        return;
    }
    else {
        error_bill_amount.classList.remove("show");
    }

    const get_tip_percent = parseFloat(tip_percent.value) / 100.0 || 0;
    if (get_tip_percent < 0) {
        error_tip_percent.classList.add("show");
        return;
    }
    else {
        error_tip_percent.classList.remove("show");
    }

    const get_number_of_people = parseInt(number_of_people.value) || 1;
    if (get_number_of_people < 0) {
        error_number_of_people.classList.add("show");
        return;
    }
    else {
        error_number_of_people.classList.remove("show");
    }

    const get_currency_value = currency.value;

    //calculation steps
    const total_tip = get_bill_amount * get_tip_percent;
    const total_amount = get_bill_amount + total_tip;
    //Using Math.ceil for the rounding policy; this ensures the amount get fairly distributed among people; and the shop not receives less amount
    const pay_per_person = Math.ceil((total_amount / get_number_of_people) * 100) / 100;

    result_total_tip.textContent = (get_bill_amount <= 0) ? 0 : total_tip.toFixed(2)+get_currency_value;
    result_total_amount.textContent = (get_tip_percent < 0) ? 0 : total_amount.toFixed(2)+get_currency_value;
    result_pay_per_person.textContent = (get_number_of_people <= 0) ? 0 : pay_per_person.toFixed(2)+get_currency_value;
}

//Function to change preset of tip_percent button
function change_tip_percent_button_preset(tip_value) {

    if (tip_value != 10) {
        document.getElementById("tip_button_1").style.backgroundColor = "";
    }
    if (tip_value != 15) {
        document.getElementById("tip_button_2").style.backgroundColor = "";
    }
    if (tip_value != 20) {
        document.getElementById("tip_button_3").style.backgroundColor = "";
    }

    this.style.backgroundColor = "green";
    tip_percent.value = tip_value;
    calculate();
}

// Adding event listeners to call the calculate function
bill_amount.addEventListener("input", calculate);

document.getElementById("tip_button_1").addEventListener("click", function () {
    change_tip_percent_button_preset.call(this, 10);
});

document.getElementById("tip_button_2").addEventListener("click", function () {
    change_tip_percent_button_preset.call(this, 15);
});

document.getElementById("tip_button_3").addEventListener("click", function () {
    change_tip_percent_button_preset.call(this, 20);
});

tip_percent.addEventListener("input", calculate);

number_of_people.addEventListener("input", calculate);
// Event listener for reset_button
document.getElementById("reset_button").addEventListener("click", function () {
    bill_amount.value = ""; //to reset the input field
    tip_percent.value = "";
    number_of_people.value = "";
    document.getElementById("tip_button_1").style.backgroundColor = ""; //to remove the preset tip_percent buttons
    document.getElementById("tip_button_2").style.backgroundColor = "";
    document.getElementById("tip_button_3").style.backgroundColor = "";
    error_bill_amount.classList.remove("show"); //to remove the errors
    error_tip_percent.classList.remove("show");
    error_number_of_people.classList.remove("show");
    result_total_tip.textContent = 0.00; //to reset the results
    result_total_amount.textContent = 0.00;
    result_pay_per_person.textContent = 0.00;
});