generated from Newton-School/html-css-js-project-boilerplate
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathCheckout.html
102 lines (97 loc) · 4.5 KB
/
Checkout.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Checkout</title>
<link rel="stylesheet" href="checkout.css">
<script src="checkout.js" defer></script>
<link rel="icon" type="image/x-icon" href="/fevicon.png">
</head>
<body>
<div class="back-button">
<a href="index.html"><button id="back">Back</button></a>
</div>
<h2>Checkout</h2>
<main class="main">
<div class="summary">
<h3>Summary</h3>
<div class="movie-name" id="movie-name"></div>
<div class="price">
<div>Classic Ticket </div>
<div id="ticket-price">₹250</div>
</div>
<div class="ticketCount">
<label for="number-of-ticket">Number of Tickets</label>
<input type="number" value="1" id="number-of-ticket" min="1" max="100" onkeyup="getAmount()" required>
</div>
<div class="fee">
<div>Convenience Fee</div>
<div>₹<span id="fee">0</span></div>
</div>
<div class="total">
<div>Sub total</div>
<div>₹<span id="subtotal">0</span></div>
</div>
</div>
<div class="paymentMethod">
<form action="index.html" onsubmit="alert('Booking Movies Ticket');">
<h3>Payment Info</h3>
<div id="inputItem">
<div id="item">
<label for="fname">First Name</label>
<input type="text" id="fname" placeholder="first name" required>
</div>
<div id="item">
<label for="lname">Last Name</label>
<input type="text" id="lname" placeholder="last name" required>
</div>
<div id="item">
<label for="email">Email</label>
<input type="email" id="email" placeholder="[email protected]" required>
</div>
</div>
Card Type
<input type="radio" id="credit-card" value="credit-card" name="paymethod" checked
onclick="displayPaymentMethod()">
<label for="credit-card">Credit Card</label>
<input type="radio" id="debit-card" value="debit-card" name="paymethod"
onclick="displayPaymentMethod()">
<label for="debit-card">Debit Card</label>
<input type="radio" id="upi" value="upi" name="paymethod" onclick="displayPaymentMethod()">
<label for="upi">UPI</label>
<div class="paymentDetail">
<!-- credit card -->
<label for="nameOnCard">Name on card</label><br>
<input type="text" id="nameOnCard"><br>
<label for="creditCardNumber">Credit Card Number</label><br>
<input type="number" id="creditCardNumber"><br>
<div>
<label for="expiry">Expiry</label><br>
<input type="date" id="expiry" required><br>
<label for="cvv">CVV</label><br>
<input type="password" id="cvv" required>
</div>
<!-- debit card -->
<!-- <label for="nameOnCard">Name on card</label><br>
<input type="text" id="nameOnCard"><br>
<label for="debitCardNumber">Debit Card Number</label><br>
<input type="number" id="debitCardNumber"><br>
<div>
<label for="expiry">Expiry</label><br>
<input type="date" id="expiry"><br>
<label for="cvv">CVV</label><br>
<input type="password" id="cvv">
</div> -->
<!-- upi -->
<!-- <label for="upi-id">UPI ID</label>
<input type="text" id="upi-id" placeholder="xyz@abcbank">
<button>Verify UPI ID</button> -->
</div>
<button class="submit" id="sumbit">Proceed To Pay</button>
</form>
</div>
</main>
</body>
</html>