-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathvueExample.html
129 lines (124 loc) · 4.57 KB
/
vueExample.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
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link rel="stylesheet" href="./CSS/style.css" />
<div id="title">
<title>{{title}}</title>
</div>
</head>
<body>
<div id="app">
<h1>{{websiteName}}</h1>
<div v-if="showProducts">
<div class="sortBy">
<label for="category">Choose a category to sort with:</label>
<select
name="category"
id="category"
@change="onChangeCategory($event);"
>
<option value="subject">Subject</option>
<option value="location">Location</option>
<option value="price">Price</option>
<option value="spaces">Spaces</option>
</select>
<br /><br />
<label for="order">Choose an ascending or descending order:</label>
<select name="order" id="order" @change="onChangeOrder($event);">
<option value="asc">Ascending</option>
<option value="desc">Descending</option>
</select>
<br /><br />
</div>
<div class="productList">
<div v-for="product in courses" class="product">
<div class="productTop">
<img class="image" v-bind:src="product.link" />
<div class="productText">
<h3 v-text="product.subject"></h3>
<p v-text="product.location"></p>
<p>price:{{product.price}}</p>
<p>spaces:{{product.spaces}}</p>
</div>
</div>
<button
v-on:click="addToCart(product.id);checkCheckoutButton();hideButton(product.id);"
v-bind:value="product.id" v-bind:id="product.id" class="button" >
Add to Cart
</button>
</div>
</div>
<div v-if="showCheckoutButton">
<button type="button" class="checkoutButton" v-on:click="displayCheckout()">Checkout</button>
</div>
</div>
<div v-if="showCheckout">
<div class="productList">
<div v-for="index, key in checkoutItems" :key="index">
<div v-for="prod in courses" >
<div v-if="prod.id==checkoutItems[key]"class="productBought">
<div class="productTop">
<img class="image" v-bind:src="prod.link" />
<div class="productText">
<h3 v-text="prod.subject"></h3>
<p v-text="prod.location"></p>
<p>price:{{prod.price}}</p>
<p>Quantity: {{quantityItems[key]}}</p>
</div>
</div>
<button
v-on:click="deleteItem(prod.id)"
class="button"
>
Cancel item
</button>
</div>
</div>
</div>
</div>
<button type="button" v-on:click="displayProducts()">Go back</button>
<h3>Please specify your name:</h3><input type="text" name="name" v-model="name" id="name" v-on:keypress="isLetter();checkForm();" v-on:keyup="checkForm()">
<h3>Please specify your number:</h3> <input type="text" name="number" id="number" v-model="number" v-on:keypress="isNumber();checkForm();"v-on:keyup="checkForm()" maxlength="11">
<p v-if="showError" style="color:red">Incomplete form or invalid characters entered!</p>
<div v-if="showSubmitButton">
<button type="button" v-on:click="checkout()">Submit Order</button>
</div>
<h1 v-if="showSuccess" style="color:green">Thank you for buying these products! Have a nice day</h1>
</div>
</div>
<script src="./JavaScript/test.js"></script>
</body>
<div>
Icons made by
<a href="https://www.flaticon.com/authors/smalllikeart" title="smalllikeart"
>smalllikeart</a
>
from
<a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a>
</div>
<div>
Icons made by
<a href="https://www.flaticon.com/authors/nhor-phai" title="Nhor Phai"
>Nhor Phai</a
>
from
<a href="https://www.flaticon.com/" title="Flaticon"> www.flaticon.com</a>
</div>
<div>
Icons made by
<a href="https://www.flaticon.com/authors/eucalyp" title="Eucalyp"
>Eucalyp</a
>
from
<a href="https://www.flaticon.com/" title="Flaticon"> www.flaticon.com</a>
</div>
<div>
Icons made by
<a href="https://www.flaticon.com/authors/freepik" title="Freepik"
>Freepik</a
>
from
<a href="https://www.flaticon.com/" title="Flaticon"> www.flaticon.com</a>
</div>
</html>