1- function calculateTip ( ) {
21
3- resetTip ( ) ;
42
5- var billAmount = document . getElementById ( "amount" ) . value ;
6- var tipPercentage = document . getElementById ( "tip" ) . value ;
7- var numberOfPeople = document . getElementById ( "numberPeople" ) . value ;
3+ window . addEventListener ( "load" , ( ) => {
4+ init ( )
5+ } )
86
9- // Validate the bill amount field.
10- if ( billAmount === "" ) {
11- alert ( "Please enter bill amount." ) ;
12- return ;
13- }
14- if ( billAmount < 0 )
15- {
16- alert ( "Please enter positive bill amount" ) ;
17- return ;
7+ const $ = ( elm ) => document . querySelector ( elm ) ;
8+ const $all = ( elm ) => document . querySelectorAll ( elm ) ;
9+ const log = ( val ) => console . log ( val ) ;
10+
11+
12+ // global variables
13+ let billTipPerPerson = $ ( ".bill-tip-amt" ) ;
14+ let tipTotalPerPerson = $ ( ".total-per-person" ) ;
15+ let tipCurrency = $all ( ".tip-curr" ) ;
16+ let billTotal = $ ( ".bill-total" ) ;
17+
18+
19+ let billInput = $ ( "#bill-input" ) ;
20+ let allTipBtn = $all ( ".tip-btn" ) ;
21+ const customTipBtn = $ ( ".custom-tip-btn" ) ;
22+ const customTipSelect = $ ( ".custom-tip-percentage" )
23+ const incBtn = $ ( ".inc" ) ;
24+ const decBtn = $ ( ".dec" ) ;
25+ const peopleOup = $ ( ".people-oup" ) ;
26+
27+
28+ const resetBtn = $ ( ".reset-btn" ) ;
29+ const calcBtn = $ ( ".calc-btn" ) ;
30+
31+
32+
33+ function init ( ) {
34+ let numOfPeople = 1 ;
35+ let tipPercentage = 0 ;
36+ let billAmt = 0 ;
37+
38+
39+ // handle bill amount
40+ billInput . onkeyup = ( e ) => {
41+ const amt = e . target . value ;
42+ const reg = / ^ \d + $ /
43+ if ( reg . test ( + amt ) ) {
44+ billAmt = + amt ;
45+ }
1846 }
1947
20- // Calculate the total tip.
21- function tipCalc ( ) {
22- let tipTotal = ( ( billAmount * 100 ) * tipPercentage ) / 100 ;
23- tipTotal = tipTotal . toFixed ( 2 ) ;
24- return tipTotal ;
48+ // handle bill splitting
49+ incBtn . onclick = ( ) => {
50+ numOfPeople ++
51+ peopleOup . innerHTML = numOfPeople ;
52+ } ;
53+ decBtn . onclick = ( ) => {
54+ if ( numOfPeople <= 1 ) {
55+ numOfPeople = 1 ;
56+ return ;
57+ }
58+ numOfPeople --
59+ peopleOup . innerHTML = numOfPeople ;
2560 }
2661
27- // Call tipCalc() function.
28- var totalTip = tipCalc ( ) ;
62+ calcBtn . onclick = ( ) => calculateTip ( + billAmt , + numOfPeople , + tipPercentage )
63+
64+
65+ // handle tip percentage
66+ allTipBtn . forEach ( ( button ) => {
67+ if ( button . classList . contains ( "active" ) ) {
68+ tipPercentage = + button . value
69+ }
70+ button . addEventListener ( "click" , handleTipButtonClick ) ;
71+ } ) ;
2972
30- if ( numberOfPeople > 1 ) {
31- document . getElementById ( "multiple" ) . style . display = "block" ;
32- let bill = ( billAmount / numberOfPeople ) ;
33- let tip = ( totalTip / numberOfPeople ) ;
34- document . getElementById ( "totalTipMultiple" ) . innerHTML = tip . toFixed ( 2 ) ;
73+ // Function to handle the click event on the tip buttons
74+ function handleTipButtonClick ( event ) {
75+ // Remove the "active" class from all buttons
76+ allTipBtn . forEach ( ( button ) => {
77+ button . classList . remove ( "active" ) ;
78+ } ) ;
3579
36- let amountEach = parseFloat ( bill ) + parseFloat ( tip ) ;
37- document . getElementById ( "totalAmountEach" ) . innerHTML = amountEach . toFixed ( 2 ) ;
80+ // Add the "active" class to the clicked button
81+ event . target . classList . add ( "active" ) ;
82+ tipPercentage = + event . target . value ;
3883
39- let multipleTotal = parseFloat ( billAmount ) + parseFloat ( totalTip ) ;
40- document . getElementById ( "billTotalmultiple" ) . innerHTML = multipleTotal . toFixed ( 2 ) ;
84+ // show the custom tip percentage button back
85+ customTipBtn . classList . remove ( "hidden" )
86+ customTipBtn . classList . add ( "visible" )
87+ customTipSelect . classList . add ( "hidden" )
88+ }
89+
90+ // handle custom tip selection
91+ customTipBtn . onclick = ( ) => {
92+ customTipBtn . classList . remove ( "visible" )
93+ customTipBtn . classList . add ( "hidden" )
94+ customTipSelect . classList . remove ( "hidden" )
95+ }
4196
42- } else {
43- document . getElementById ( "single" ) . style . display = "block" ;
44- let singleTotal = ( parseFloat ( billAmount ) + parseFloat ( totalTip ) ) ;
45- document . getElementById ( "tipAmount" ) . innerHTML = totalTip ;
46- document . getElementById ( "billTotal" ) . innerHTML = singleTotal . toFixed ( 2 ) ;
97+ // handle custom tip selection
98+ customTipSelect . onchange = ( e ) => {
99+ tipPercentage = e . target . value
47100 }
101+
48102}
49103
50- resetTip ( ) ;
51104
52- // Hide the single and multiple blocks
53- function resetTip ( ) {
54- document . getElementById ( "single" ) . style . display = "none" ;
55- document . getElementById ( "multiple" ) . style . display = "none" ;
105+ // reset current state
106+ resetBtn . onclick = ( ) => {
107+ numOfPeople = 1 ;
108+ tipPercentage = 0 ;
109+ billAmt = 0 ;
110+ billTotal . innerHTML = `$ 0.00`
111+ tipTotalPerPerson . innerHTML = `$ 0.00`
112+ billTipPerPerson . innerHTML = `$ 0.00`
113+ }
114+
115+ function calculateTip ( billAmt , numberOfPeople , tipPercentage ) {
116+ const tipAmt = ( billAmt * ( tipPercentage / 100 ) )
117+ const tipAmtPerPeron = ( tipAmt / numberOfPeople )
118+ const totalPerPerson = ( ( billAmt / 4 ) + tipAmtPerPeron )
119+ const billTotalAmt = ( billAmt + tipAmt ) ;
120+
121+ billTotal . innerHTML = `$ ${ billTotalAmt . toFixed ( 2 ) }
122+ tipTotalPerPerson . innerHTML = `$ ${ totalPerPerson . toFixed ( 2 ) }
123+ billTipPerPerson . innerHTML = `$ ${ tipAmtPerPeron . toFixed ( 2 ) }
124+
125+ console . log ( { tip : tipAmt . toFixed ( 2 ) , perP : tipAmtPerPeron . toFixed ( 2 ) , total : totalPerPerson . toFixed ( 2 ) , billTotalAmt } )
56126}
0 commit comments