-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
376 lines (355 loc) · 15.7 KB
/
index.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
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
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<script type="text/javascript">
let cartOpen = false;
let loginOpen = false;
let itemsInCart = [];
let currentTotal = 0;
let users = [];
let itemPrice = [
{
"Name":"Lion King 2",
"Price":5.99
},
{
"Name":"Lion King 2(French)",
"Price":5.99
},
{
"Name":"Lion King 2(Portugese)",
"Price":5.99
},
{
"Name":"Lion King 2(VHS)",
"Price":2.99
},
{
"Name":"Hercules",
"Price":9.99
},
{
"Name":"Lion King 1 1/2",
"Price":4.99
},
{
"Name":"Lion King(Live Action)",
"Price":7.99
},
{
"Name":"Lion King 2(Blue Ray)",
"Price":6.99
},
{
"Name":"Lion King(Video Game)",
"Price":49.99
},
{
"Name":"Lion King(Sold Out)",
"Price":19.99
},
{
"Name":"Lion King 2(Blue Ray - Spanish)",
"Price":6.99
},
{
"Name":"Lion King 2(Blue Ray - Russian)",
"Price":6.99
},
{
"Name":"Lion King 2(Blue Ray - Korean)",
"Price":6.99
},
{
"Name":"Lion King 1 1/2 (Spanish)",
"Price":4.99
},
{
"Name":"Lion King 1 1/2 (Russian)",
"Price":4.99
},
{
"Name":"Lion King 1 1/2 (Korean)",
"Price":4.99
}
];
function addtoCart(value){
itemsInCart.push(value);
openCheckout();
openCheckout();
}
function blueRaytoCart(){
let blue = document.getElementById('blueray')
itemsInCart.push( itemPrice[parseInt(blue.options[blue.selectedIndex].value)]);
openCheckout();
openCheckout();
}
function oneHalftoCart(){
let half = document.getElementById('oneAndHalf')
itemsInCart.push( itemPrice[parseInt(half.options[half.selectedIndex].value)]);
openCheckout();
openCheckout();
}
function openCheckout(){
if (cartOpen){
cartOpen=false
document.getElementById('checkoutTable').innerHTML = ""
document.getElementById('checkoutButton').innerHTML = ""
}
else {
cartOpen = true
let tr = ""
let totalCost = 0
for (item in itemsInCart){
tr += "<tr><td>"+ itemsInCart[item].Name +"</td><td>" + itemsInCart[item].Price +"</td></tr>"
totalCost+=itemsInCart[item].Price;
}
currentTotal = totalCost.toPrecision(4)
document.getElementById('checkoutTable').innerHTML = "<thead><tr><th>Item</th><th>Price</th></tr></thead><tbody>" + tr +"</tbody><thead><tr><th>Total</th><th>"+currentTotal+"</th></tr></thead>"
document.getElementById('checkoutButton').innerHTML = "<button class=\"col-md-1\" style='background-color: blue; color: white' onclick='completeCheckout()'><b>Purchase</b></button>"
}
}
function completeCheckout() {
cartOpen=false
document.getElementById('checkoutTable').innerHTML = ""
document.getElementById('checkoutButton').innerHTML = ""
alert("Your payment of $" + currentTotal + " has been processed.")
itemsInCart=[]
}
function openLogin(){
if (loginOpen) {
loginOpen = false
document.getElementById('loginWindow').innerHTML = ""
}
else {
loginOpen = true
document.getElementById('loginWindow').innerHTML = "<label for=\"usr\" >Username:</label><br>\n" +
" <input id=\"usr\" name=\"usr\"><br>\n" +
" <label for=\"pwd\" >Password:</label><br>\n" +
" <input type=\"password\" id=\"pwd\" name=\"pwd\"><br><br>\n" +
" <div className=\"form-check\">\n" +
" <input className=\"form-check-input\" type=\"checkbox\" name=\"robotCheck\" id=\"robotCheck\" >\n" +
" <label className=\"form-check-label\" htmlFor=\"robotCheck\">Not a Robot</label>\n" +
" </div>" +
" <button onclick='validateLogin()'>\n" +
" Login\n" +
" </button>\n" +
" <button onclick='validateNewAccount()'>\n" +
" Create Account\n" +
" </button>"
}
}
function validateLogin(){
let newName = document.forms["loginWindow"]["usr"].value
let newPass = document.forms["loginWindow"]["pwd"].value
if (newName == "" || newPass == ""){
alert("Please enter both username and password")
}
else {
if (document.forms["loginWindow"]["robotCheck"].checked) {
console.log(users[0][0])
} else {
alert("Please check that you are not a robot")
}
}
}
function validateNewAccount(){
let newName = document.forms["loginWindow"]["usr"].value
let newPass = document.forms["loginWindow"]["pwd"].value
if (newName == "" || newPass == ""){
alert("Please enter both username and password")
}
else {
users.push(newName, newPass)
console.log(users[0][0])
}
console.log(users[0][0])
}
</script>
<div class="container-fluid" style="position: fixed">
<div class="row">
<button class="col-md-1" onclick="openLogin()" >
<i class="fa fa-sign-in fa-2x"> Login</i>
</button>
</div>
<div class="row" >
<form class="col-md-2" name="loginWindow" id="loginWindow" style="background-color: whitesmoke">
</form>
</div>
<div class="row">
<button class="col-md-1" onclick="openCheckout()">
<i class="fa fa-shopping-cart fa-2x"> Cart</i>
</button>
</div>
<div class="row">
<table class="col-md-2" id="checkoutTable" style="border: 1px solid black;background-color: whitesmoke">
</table>
</div>
<form method="post">
<div class="row" id="checkoutButton">
</div>
</form>
</div>
<div class="container-fluid">
<div class="row">
<section class="col-md-4"></section>
<section class="col-md-4 title">
<div>
<h1><b>Bootleg Lion King DVDs</b></h1>
</div>
<div>
<h2><em>We're Making a Comeback!</em></h2>
</div>
</section>
<section class="col-md-1">
</section>
<section class="itemCard col-md-2">
<img src="images/logofinal.png" >
</section>
</div>
</div>
<br>
<br>
<br>
<br>
<div class="row">
<section class="col-md-1"></section>
<section class="itemCard col-md-3">
<img src="images/lionking2.jpg">
<div class="container">
<h4><b>Lion King 2</b></h4>
<h5>$5.99</h5>
<button onclick="addtoCart(itemPrice[0])">Add to Cart</button>
<p>The Lion King II: Simba's Pride is a 1998 American animated direct-to-video musical romantic drama film. It is the sequel to Disney's 1994 animated feature film, The Lion King, with its plot influenced by William Shakespeare's Romeo and Juliet, and the second installment in The Lion King trilogy.</p>
</div>
</section>
<section class="col-md-1"></section>
<section class="itemCard col-md-3">
<img src="images/lk2french.jpg">
<div class="container">
<h4><b>Lion King 2(French)</b></h4>
<h5>$5.99</h5>
<button onclick="addtoCart(itemPrice[1])">Add to Cart</button>
<p>Le Roi Lion II : La Fierté de Simba (The Lion King II: Simba's Pride) est un film d'animation américain réalisé par 1998. C'est la suite du long métrage d'animation de Disney de 1994, Le Roi Lion, avec son intrigue influencée par Roméo et Juliette de William Shakespeare, et le deuxième volet de la trilogie Le Roi Lion.</p>
</div>
</section>
<section class="col-md-1"></section>
<section class="itemCard col-md-3">
<img src="images/lk2portugese.jpg">
<div class="container">
<h4><b>Lion King 2(Portugese)</b></h4>
<h5>$5.99</h5>
<button onclick="addtoCart(itemPrice[2])">Add to Cart</button>
<p>O Rei Leão II: O Orgulho de Simba é um filme estadião de 1998. É a sequência do longa-metragem animado da Disney de 1994, O Rei Leão, com sua trama influenciada por Romeu e Julieta, de William Shakespeare, e a segunda parte da trilogia O Rei Leão.</p>
</div>
</section>
</div>
<br>
<br>
<br>
<br>
<div class="row">
<section class="col-md-1"></section>
<section class="itemCard col-md-3">
<img src="images/vhs.jpg">
<div class="container">
<h4><b>Lion King 2(VHS)</b></h4>
<h5>$2.99</h5>
<button onclick="addtoCart(itemPrice[3])">Add to Cart</button>
<p>The Lion King II: Simba's Pride is a 1998 American animated direct-to-video musical romantic drama film. It is the sequel to Disney's 1994 animated feature film, The Lion King, with its plot influenced by William Shakespeare's Romeo and Juliet, and the second installment in The Lion King trilogy.</p>
</div>
</section>
<section class="col-md-1"></section>
<section class="itemCard col-md-3">
<img src="images/hercules.jpg">
<div class="container">
<h4><b>Hercules</b></h4>
<h5>$9.99</h5>
<button onclick="addtoCart(itemPrice[4])">Add to Cart</button>
<p>Hercules is a 1997 American animated musical fantasy comedy film produced by Walt Disney Feature Animation for Walt Disney Pictures. The 35th Disney animated feature film and the eighth animated film produced during the Disney Renaissance, the film was directed by Ron Clements and John Musker.</p>
</div>
</section>
<section class="col-md-1"></section>
<section class="itemCard col-md-3">
<img src="images/lionkinghalf.jpg">
<div class="container">
<h4><b>Lion King 1 1/2</b></h4>
<h5>$4.99</h5>
<button onclick="oneHalftoCart()">Add to Cart</button>
<select class="form-select" id="oneAndHalf">
<option selected value=5>English</option>
<option value=13>Spanish</option>
<option value=14>Russian</option>
<option value=15>Korean</option>
</select>
<p>The Lion King 1½ is a 2004 American animated direct-to-video musical comedy film produced by the Australian branch of DisneyToon Studios and released direct to video on February 10, 2004.</p>
</div>
</section>
</div>
<br>
<br>
<br>
<br>
<div class="row">
<section class="col-md-1"></section>
<section class="itemCard col-md-3">
<img src="images/newlion.jpg">
<div class="container">
<h4><b>Lion King(Live Action)</b></h4>
<h5>$7.99</h5>
<button onclick="addtoCart(itemPrice[6])">Add to Cart</button>
<p>The Lion King is a 2019 American computer-animated musical drama film directed and produced by Jon Favreau, written by Jeff Nathanson, and produced by Walt Disney Pictures and Fairview Entertainment. It is a photorealistic remake of Disney's traditionally animated 1994 film of the same name.</p>
</div>
</section>
<section class="col-md-1"></section>
<section class="itemCard col-md-3">
<img src="images/lionking2blue.jpg">
<div class="container">
<h4><b>Lion King 2(Blue Ray)</b></h4>
<h5>$6.99</h5>
<button onclick="blueRaytoCart()">Add to Cart</button>
<select class="form-select" id="blueray">
<option selected value=7>English</option>
<option value=10>Spanish</option>
<option value=11>Russian</option>
<option value=12>Korean</option>
</select>
<p>The Lion King II: Simba's Pride is a 1998 American animated direct-to-video musical romantic drama film. It is the sequel to Disney's 1994 animated feature film, The Lion King, with its plot influenced by William Shakespeare's Romeo and Juliet, and the second installment in The Lion King trilogy.</p>
</div>
</section>
<section class="col-md-1"></section>
<section class="itemCard col-md-3">
<img src="images/game.jpg">
<div class="container">
<h4><b>Lion King (Video Game)</b></h4>
<h5>$49.99</h5>
<button onclick="addtoCart(itemPrice[8])">Add to Cart</button>
<p>The Lion King is a platform game based on Disney's animated film of the same name. The game was developed by Westwood Studios and published by Virgin Interactive Entertainment for the Super NES and Genesis in 1994, and was also ported to MS-DOS, Amiga, Game Gear, Master System, and Nintendo Entertainment System</p>
</div>
</section>
</div>
<br>
<br>
<br>
<br>
<div class="row">
<section class="col-md-1"></section>
<section class="itemCard col-md-3">
<img src="images/original.jpg">
<div class="container">
<h4><b>Lion King</b></h4><h4 style="color: red"><b>(Sold Out)</b></h4>
<h5>$19.99</h5>
<button onclick="addtoCart(itemPrice[9])" disabled>Add to Cart</button>
<p>The Lion King is a 1994 American animated musical drama film produced by Walt Disney Feature Animation and released by Walt Disney Pictures. It is the 32nd Disney animated feature film and the fifth animated film produced during a period known as the Disney Renaissance.</p>
</div>
</section>
</div>
</body>
</html>