Project

General

Profile

Project progress work #247 » index.html

Kamol Anekchatnuntakool, 01 Dec 2023 16:46

 
1
<html>
2

    
3
<head>
4
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
5
</head>
6

    
7
<body>
8

    
9

    
10

    
11
    <div class="top px-4" style="background-color: cornflowerblue; font-size: 21px; font-weight: bold; text-align: left;
12
         color:white; width: 280px;">
13
        <label class="table-bordered" style="font-size: 21px; text-align: left; margin-left:66px;">Drink Order</label>
14

    
15
    </div>
16

    
17

    
18
    <p>
19
        <label style="font-size: 19px; text-align: left; margin-left:0px;">Cold Water</label>
20
        <button onclick="ReduceCountColdWater()" style="background-color: lightgreen; color: black
21
        ; padding: 4px 19px 6px 19px; margin-left:23px;">-</button>
22
        <input id="currentCountColdWater" value="0" readonly style="background-color: white; color: black; border:solid 1px #333; 
23
        border-collapse: collapse; width: 48px; height: 29px; padding: 4px 15px 6px 15px; 
24
        text-align: center; font-size: 14px;">
25
        <button onclick="IncrementCountColdWater()" style="background-color: lightgreen; color: black
26
        ; padding: 4px 19px 6px 19px; ">+</button>
27
    </p>
28

    
29
    <p>
30
        <label style="font-size: 19px; text-align: left; margin-left:0px;">Hot Water</label>
31
        <button onclick="ReduceCountHotWater()" style="background-color: lightgreen; color: black
32
        ; padding: 4px 19px 6px 19px; margin-left:32px;">-</button>
33
        <input id="currentCountHotWater" value="0" readonly style="background-color: white; color: black; border:solid 1px #333; 
34
        border-collapse: collapse; width: 48px; height: 29px; padding: 4px 15px 6px 15px; 
35
        text-align: center; font-size: 14px;">
36
        <button onclick="IncrementCountHotWater()" style="background-color: lightgreen; color: black
37
        ; padding: 4px 19px 6px 19px; ">+</button>
38
    </p>
39

    
40
    <p>
41
        <label style="font-size: 19px; text-align: left; margin-left:0px;">Hot Tea</label>
42
        <button onclick="ReduceCountHotTea()" style="background-color: lightgreen; color: black
43
        ; padding: 4px 19px 6px 19px; margin-left:55px;">-</button>
44
        <input id="currentCountHotTea" value="0" readonly style="background-color: white; color: black; border:solid 1px #333; 
45
        border-collapse: collapse; width: 48px; height: 29px; padding: 4px 15px 6px 15px; 
46
        text-align: center; font-size: 14px;">
47
        <button onclick="IncrementCountHotTea()" style="background-color: lightgreen; color: black
48
        ; padding: 4px 19px 6px 19px; ">+</button>
49
    </p>
50

    
51
    <p>
52
        <label style="font-size: 19px; text-align: left; margin-left:0px;">Hot Coffee</label>
53
        <button onclick="ReduceCountHotCoffee()" style="background-color: lightgreen; color: black
54
        ; padding: 4px 19px 6px 19px; margin-left:30px;">-</button>
55
        <input id="currentCountHotCoffee" value="0" readonly style="background-color: white; color: black; border:solid 1px #333; 
56
        border-collapse: collapse; width: 48px; height: 29px; padding: 4px 15px 6px 15px; 
57
        text-align: center; font-size: 14px;">
58
        <button onclick="IncrementCountHotCoffee()" style="background-color: lightgreen; color: black
59
        ; padding: 4px 19px 6px 19px; ">+</button>
60
    </p>
61

    
62

    
63
    <form action="sendline.php" method="post">
64
        <p>            
65
            <input id="name" value="" type="hidden" name="name"/>
66
            <input id="phpColdWater" value="" type="hidden" name="phpColdWater"/>
67
            <input id="phpHotWater" value="" type="hidden" name="phpHotWater"/>
68
            <input id="phpHotTea" value="" type="hidden" name="phpHotTea"/>
69
            <input id="phpHotCoffee" value="" type="hidden" name="phpHotCoffee"/>
70
        </p>
71

    
72
        <p>
73

    
74
            <button onclick="ClearCount()" formaction="" style="background-color: lightseagreen; color: white
75
        ; padding: 4px 37px 6px 37px; margin-left:0px; margin-top:40px;">Clear</button>
76
           
77
            <button onclick="OrderSendLine()" formaction="/drink-order/sendline.php" style="background-color: lightseagreen; color: white
78
        ; padding: 4px 37px 6px 37px; margin-left:60px; margin-top:40px;">Order</button>
79

    
80

    
81
        </p>
82
    </form>
83

    
84
    <script language="javascript">
85

    
86
        function ReduceCountColdWater() {
87

    
88
            var current = parseInt(document.getElementById('currentCountColdWater').value);
89
            var currentCount = current;
90
            if (current > 0) {
91
                currentCount = current - 1;
92
            }
93
            else {
94
                currentCount = current;
95
            }
96

    
97
            document.getElementById('currentCountColdWater').value = currentCount;
98
            
99

    
100
        }
101
        function IncrementCountColdWater() {
102
            var current = parseInt(document.getElementById('currentCountColdWater').value);
103
            var currentCount = current;
104
            if (current < 99) {
105
                currentCount = current + 1;
106
            }
107
            else {
108
                currentCount = current;
109
            }
110
            document.getElementById('currentCountColdWater').value = currentCount;
111

    
112
        }
113
        function ReduceCountHotWater() {
114
            var current = parseInt(document.getElementById('currentCountHotWater').value);
115
            var currentCount = current;
116
            if (current > 0) {
117
                currentCount = current - 1;
118
            }
119
            else {
120
                currentCount = current;
121
            }
122

    
123
            document.getElementById('currentCountHotWater').value = currentCount;
124

    
125
        }
126
        function IncrementCountHotWater() {
127
            var current = parseInt(document.getElementById('currentCountHotWater').value);
128
            var currentCount = current;
129
            if (current < 99) {
130
                currentCount = current + 1;
131
            }
132
            else {
133
                currentCount = current;
134
            }
135
            document.getElementById('currentCountHotWater').value = currentCount;
136

    
137
        }
138

    
139
        function ReduceCountHotTea() {
140
            var current = parseInt(document.getElementById('currentCountHotTea').value);
141
            var currentCount = current;
142
            if (current > 0) {
143
                currentCount = current - 1;
144
            }
145
            else {
146
                currentCount = current;
147
            }
148

    
149
            document.getElementById('currentCountHotTea').value = currentCount;
150

    
151
        }
152
        function IncrementCountHotTea() {
153
            var current = parseInt(document.getElementById('currentCountHotTea').value);
154
            var currentCount = current;
155
            if (current < 99) {
156
                currentCount = current + 1;
157
            }
158
            else {
159
                currentCount = current;
160
            }
161
            document.getElementById('currentCountHotTea').value = currentCount;
162

    
163
        }
164

    
165
        function ReduceCountHotCoffee() {
166
            var current = parseInt(document.getElementById('currentCountHotCoffee').value);
167
            var currentCount = current;
168
            if (current > 0) {
169
                currentCount = current - 1;
170
            }
171
            else {
172
                currentCount = current;
173
            }
174

    
175
            document.getElementById('currentCountHotCoffee').value = currentCount;
176

    
177
        }
178
        function IncrementCountHotCoffee() {
179
            var current = parseInt(document.getElementById('currentCountHotCoffee').value);
180
            var currentCount = current;
181
            if (current < 99) {
182
                currentCount = current + 1;
183
            }
184
            else {
185
                currentCount = current;
186
            }
187
            document.getElementById('currentCountHotCoffee').value = currentCount;
188

    
189
        }
190

    
191
        function ClearCount() {
192
            document.getElementById('currentCountColdWater').value = "0";
193
            document.getElementById('currentCountHotWater').value = "0";
194
            document.getElementById('currentCountHotTea').value = "0";
195
            document.getElementById('currentCountHotCoffee').value = "0";
196

    
197
        }
198

    
199
        async function OrderSendLine() {
200
            
201
            var strMSG = "";           
202

    
203
            strMSG = "Drink order";      
204
           
205
            document.getElementById('name').value = strMSG
206
            document.getElementById('phpColdWater').value = document.getElementById('currentCountColdWater').value;
207
            document.getElementById('phpHotWater').value = document.getElementById('currentCountHotWater').value;
208
            document.getElementById('phpHotTea').value = document.getElementById('currentCountHotTea').value;
209
            document.getElementById('phpHotCoffee').value = document.getElementById('currentCountHotCoffee').value;
210
                        
211
        }
212

    
213
    </script>
214

    
215
</body>
216

    
217
</html>
(3-3/3)