wad-lab 1.0.5 → 1.0.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bin/index.js +9 -1
- package/package.json +1 -1
- package/templates/game-memory-cards/index.html +24 -0
- package/templates/game-memory-cards/script.js +90 -0
- package/templates/game-memory-cards/style.css +74 -0
- package/templates/game-rock-paper-scissors/index.html +35 -0
- package/templates/game-rock-paper-scissors/script.js +49 -0
- package/templates/game-rock-paper-scissors/style.css +67 -0
- package/templates/game-tic-tac-toe/index.html +30 -0
- package/templates/game-tic-tac-toe/script.js +82 -0
- package/templates/game-tic-tac-toe/style.css +66 -0
- package/templates/game-whack-a-mole/index.html +34 -0
- package/templates/game-whack-a-mole/script.js +83 -0
- package/templates/game-whack-a-mole/style.css +75 -0
- package/templates/vue-cart-router-pinia/index.html +12 -0
- package/templates/vue-cart-router-pinia/package.json +20 -0
- package/templates/vue-cart-router-pinia/src/App.vue +78 -0
- package/templates/vue-cart-router-pinia/src/main.js +9 -0
- package/templates/vue-cart-router-pinia/src/router/index.js +17 -0
- package/templates/vue-cart-router-pinia/src/stores/cartStore.js +58 -0
- package/templates/vue-cart-router-pinia/src/views/CartView.vue +139 -0
- package/templates/vue-cart-router-pinia/src/views/CheckoutView.vue +144 -0
- package/templates/vue-cart-router-pinia/src/views/ProductCatalogView.vue +73 -0
- package/templates/vue-cart-router-pinia/vite.config.js +6 -0
- package/templates/vue-memory-game/index.html +12 -0
- package/templates/vue-memory-game/package.json +19 -0
- package/templates/vue-memory-game/src/App.vue +106 -0
- package/templates/vue-memory-game/src/main.js +7 -0
- package/templates/vue-memory-game/src/stores/memoryStore.js +64 -0
- package/templates/vue-memory-game/vite.config.js +6 -0
- package/templates/vue-todo-pinia/index.html +12 -0
- package/templates/vue-todo-pinia/package.json +19 -0
- package/templates/vue-todo-pinia/src/App.vue +179 -0
- package/templates/vue-todo-pinia/src/main.js +7 -0
- package/templates/vue-todo-pinia/src/stores/todoStore.js +50 -0
- package/templates/vue-todo-pinia/vite.config.js +6 -0
- package/templates/vue-todo-router/index.html +12 -0
- package/templates/vue-todo-router/package.json +19 -0
- package/templates/vue-todo-router/src/App.vue +55 -0
- package/templates/vue-todo-router/src/data/todoState.js +38 -0
- package/templates/vue-todo-router/src/main.js +7 -0
- package/templates/vue-todo-router/src/router/index.js +17 -0
- package/templates/vue-todo-router/src/views/AddTodoView.vue +85 -0
- package/templates/vue-todo-router/src/views/TodoDetailView.vue +89 -0
- package/templates/vue-todo-router/src/views/TodoListView.vue +77 -0
- package/templates/vue-todo-router/vite.config.js +6 -0
- package/templates/servlet-flow/SERVLET_EXAM_CHEATSHEET.md +0 -389
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
body {
|
|
2
|
+
font-family: Arial, sans-serif;
|
|
3
|
+
display: flex;
|
|
4
|
+
justify-content: center;
|
|
5
|
+
align-items: center;
|
|
6
|
+
min-height: 100vh;
|
|
7
|
+
margin: 0;
|
|
8
|
+
background-color: #f0f0f0;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.game-container {
|
|
12
|
+
text-align: center;
|
|
13
|
+
background: #ffffff;
|
|
14
|
+
padding: 30px;
|
|
15
|
+
border: 1px solid #ccc;
|
|
16
|
+
border-radius: 8px;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.stats-bar {
|
|
20
|
+
display: flex;
|
|
21
|
+
justify-content: space-around;
|
|
22
|
+
font-size: 18px;
|
|
23
|
+
font-weight: bold;
|
|
24
|
+
margin: 15px 0;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.btn-start {
|
|
28
|
+
padding: 10px 20px;
|
|
29
|
+
font-size: 16px;
|
|
30
|
+
background-color: #27ae60;
|
|
31
|
+
color: white;
|
|
32
|
+
border: none;
|
|
33
|
+
border-radius: 4px;
|
|
34
|
+
cursor: pointer;
|
|
35
|
+
margin-bottom: 20px;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.btn-start:hover {
|
|
39
|
+
background-color: #219150;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.grid {
|
|
43
|
+
display: grid;
|
|
44
|
+
grid-template-columns: repeat(3, 90px);
|
|
45
|
+
grid-gap: 12px;
|
|
46
|
+
margin: 0 auto;
|
|
47
|
+
width: 294px;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.hole {
|
|
51
|
+
width: 90px;
|
|
52
|
+
height: 90px;
|
|
53
|
+
background-color: #795548;
|
|
54
|
+
border-radius: 50%;
|
|
55
|
+
position: relative;
|
|
56
|
+
overflow: hidden;
|
|
57
|
+
cursor: pointer;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.mole {
|
|
61
|
+
width: 100%;
|
|
62
|
+
height: 100%;
|
|
63
|
+
position: absolute;
|
|
64
|
+
top: 100%;
|
|
65
|
+
display: flex;
|
|
66
|
+
justify-content: center;
|
|
67
|
+
align-items: center;
|
|
68
|
+
font-size: 40px;
|
|
69
|
+
user-select: none;
|
|
70
|
+
transition: top 0.2s ease-out;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.hole.up .mole {
|
|
74
|
+
top: 0;
|
|
75
|
+
}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Vue Shopping Cart</title>
|
|
7
|
+
</head>
|
|
8
|
+
<body>
|
|
9
|
+
<div id="app"></div>
|
|
10
|
+
<script type="module" src="/src/main.js"></script>
|
|
11
|
+
</body>
|
|
12
|
+
</html>
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "vue-cart-router-pinia",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"private": true,
|
|
5
|
+
"type": "module",
|
|
6
|
+
"scripts": {
|
|
7
|
+
"dev": "vite",
|
|
8
|
+
"build": "vite build",
|
|
9
|
+
"preview": "vite preview"
|
|
10
|
+
},
|
|
11
|
+
"dependencies": {
|
|
12
|
+
"pinia": "^4.1.0",
|
|
13
|
+
"vue": "^3.5.44",
|
|
14
|
+
"vue-router": "^5.4.0"
|
|
15
|
+
},
|
|
16
|
+
"devDependencies": {
|
|
17
|
+
"@vitejs/plugin-vue": "^6.0.10",
|
|
18
|
+
"vite": "^8.3.4"
|
|
19
|
+
}
|
|
20
|
+
}
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
<script setup>
|
|
2
|
+
import { useCartStore } from './stores/cartStore'
|
|
3
|
+
|
|
4
|
+
const cartStore = useCartStore()
|
|
5
|
+
</script>
|
|
6
|
+
|
|
7
|
+
<template>
|
|
8
|
+
<div class="store-app">
|
|
9
|
+
<header class="store-header">
|
|
10
|
+
<h1>Vue Pinia Shopping Cart</h1>
|
|
11
|
+
<nav class="nav">
|
|
12
|
+
<router-link to="/" class="nav-link">Products</router-link>
|
|
13
|
+
<span class="divider">|</span>
|
|
14
|
+
<router-link to="/cart" class="nav-link cart-link">
|
|
15
|
+
Cart ({{ cartStore.cartCount }})
|
|
16
|
+
</router-link>
|
|
17
|
+
</nav>
|
|
18
|
+
</header>
|
|
19
|
+
|
|
20
|
+
<main class="store-main">
|
|
21
|
+
<router-view />
|
|
22
|
+
</main>
|
|
23
|
+
</div>
|
|
24
|
+
</template>
|
|
25
|
+
|
|
26
|
+
<style scoped>
|
|
27
|
+
.store-app {
|
|
28
|
+
max-width: 650px;
|
|
29
|
+
margin: 30px auto;
|
|
30
|
+
font-family: Arial, sans-serif;
|
|
31
|
+
padding: 0 15px;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.store-header {
|
|
35
|
+
display: flex;
|
|
36
|
+
justify-content: space-between;
|
|
37
|
+
align-items: center;
|
|
38
|
+
border-bottom: 2px solid #333;
|
|
39
|
+
padding-bottom: 15px;
|
|
40
|
+
margin-bottom: 20px;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.store-header h1 {
|
|
44
|
+
font-size: 20px;
|
|
45
|
+
margin: 0;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.nav {
|
|
49
|
+
display: flex;
|
|
50
|
+
gap: 10px;
|
|
51
|
+
align-items: center;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.nav-link {
|
|
55
|
+
text-decoration: none;
|
|
56
|
+
color: #2980b9;
|
|
57
|
+
font-weight: bold;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.nav-link.router-link-exact-active {
|
|
61
|
+
color: #27ae60;
|
|
62
|
+
text-decoration: underline;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.cart-link {
|
|
66
|
+
background-color: #f1f2f6;
|
|
67
|
+
padding: 6px 12px;
|
|
68
|
+
border-radius: 20px;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.divider {
|
|
72
|
+
color: #ccc;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.store-main {
|
|
76
|
+
padding: 10px 0;
|
|
77
|
+
}
|
|
78
|
+
</style>
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { createRouter, createWebHistory } from 'vue-router'
|
|
2
|
+
import ProductCatalogView from '../views/ProductCatalogView.vue'
|
|
3
|
+
import CartView from '../views/CartView.vue'
|
|
4
|
+
import CheckoutView from '../views/CheckoutView.vue'
|
|
5
|
+
|
|
6
|
+
const routes = [
|
|
7
|
+
{ path: '/', name: 'Catalog', component: ProductCatalogView },
|
|
8
|
+
{ path: '/cart', name: 'Cart', component: CartView },
|
|
9
|
+
{ path: '/checkout', name: 'Checkout', component: CheckoutView }
|
|
10
|
+
]
|
|
11
|
+
|
|
12
|
+
const router = createRouter({
|
|
13
|
+
history: createWebHistory(),
|
|
14
|
+
routes
|
|
15
|
+
})
|
|
16
|
+
|
|
17
|
+
export default router
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
import { defineStore } from 'pinia'
|
|
2
|
+
|
|
3
|
+
export const useCartStore = defineStore('cart', {
|
|
4
|
+
state: () => ({
|
|
5
|
+
products: [
|
|
6
|
+
{ id: 1, name: 'Wireless Laptop', price: 999, category: 'Electronics' },
|
|
7
|
+
{ id: 2, name: 'Noise-Canceling Headphones', price: 149, category: 'Audio' },
|
|
8
|
+
{ id: 3, name: 'Mechanical Keyboard', price: 79, category: 'Accessories' },
|
|
9
|
+
{ id: 4, name: 'Optical Gaming Mouse', price: 39, category: 'Accessories' },
|
|
10
|
+
{ id: 5, name: 'USB-C Docking Hub', price: 49, category: 'Electronics' }
|
|
11
|
+
],
|
|
12
|
+
items: []
|
|
13
|
+
}),
|
|
14
|
+
getters: {
|
|
15
|
+
cartCount: (state) => {
|
|
16
|
+
return state.items.reduce((total, item) => total + item.quantity, 0)
|
|
17
|
+
},
|
|
18
|
+
cartTotal: (state) => {
|
|
19
|
+
return state.items.reduce((total, item) => total + item.price * item.quantity, 0)
|
|
20
|
+
}
|
|
21
|
+
},
|
|
22
|
+
actions: {
|
|
23
|
+
addToCart(product) {
|
|
24
|
+
const existing = this.items.find((item) => item.id === product.id)
|
|
25
|
+
if (existing) {
|
|
26
|
+
existing.quantity++
|
|
27
|
+
} else {
|
|
28
|
+
this.items.push({
|
|
29
|
+
id: product.id,
|
|
30
|
+
name: product.name,
|
|
31
|
+
price: product.price,
|
|
32
|
+
quantity: 1
|
|
33
|
+
})
|
|
34
|
+
}
|
|
35
|
+
},
|
|
36
|
+
incrementQuantity(id) {
|
|
37
|
+
const item = this.items.find((i) => i.id === id)
|
|
38
|
+
if (item) {
|
|
39
|
+
item.quantity++
|
|
40
|
+
}
|
|
41
|
+
},
|
|
42
|
+
decrementQuantity(id) {
|
|
43
|
+
const item = this.items.find((i) => i.id === id)
|
|
44
|
+
if (item) {
|
|
45
|
+
item.quantity--
|
|
46
|
+
if (item.quantity <= 0) {
|
|
47
|
+
this.removeFromCart(id)
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
},
|
|
51
|
+
removeFromCart(id) {
|
|
52
|
+
this.items = this.items.filter((item) => item.id !== id)
|
|
53
|
+
},
|
|
54
|
+
clearCart() {
|
|
55
|
+
this.items = []
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
})
|
|
@@ -0,0 +1,139 @@
|
|
|
1
|
+
<script setup>
|
|
2
|
+
import { useCartStore } from '../stores/cartStore'
|
|
3
|
+
|
|
4
|
+
const cartStore = useCartStore()
|
|
5
|
+
</script>
|
|
6
|
+
|
|
7
|
+
<template>
|
|
8
|
+
<div>
|
|
9
|
+
<h2>Your Shopping Cart</h2>
|
|
10
|
+
|
|
11
|
+
<div v-if="cartStore.items.length === 0" class="empty-cart">
|
|
12
|
+
<p>Your cart is empty.</p>
|
|
13
|
+
<router-link to="/">Browse Products</router-link>
|
|
14
|
+
</div>
|
|
15
|
+
|
|
16
|
+
<div v-else>
|
|
17
|
+
<table class="cart-table">
|
|
18
|
+
<thead>
|
|
19
|
+
<tr>
|
|
20
|
+
<th>Product</th>
|
|
21
|
+
<th>Price</th>
|
|
22
|
+
<th>Quantity</th>
|
|
23
|
+
<th>Subtotal</th>
|
|
24
|
+
<th>Action</th>
|
|
25
|
+
</tr>
|
|
26
|
+
</thead>
|
|
27
|
+
<tbody>
|
|
28
|
+
<tr v-for="item in cartStore.items" :key="item.id">
|
|
29
|
+
<td>{{ item.name }}</td>
|
|
30
|
+
<td>${{ item.price }}</td>
|
|
31
|
+
<td class="qty-cell">
|
|
32
|
+
<button type="button" class="btn-qty" @click="cartStore.decrementQuantity(item.id)">-</button>
|
|
33
|
+
<span>{{ item.quantity }}</span>
|
|
34
|
+
<button type="button" class="btn-qty" @click="cartStore.incrementQuantity(item.id)">+</button>
|
|
35
|
+
</td>
|
|
36
|
+
<td>${{ item.price * item.quantity }}</td>
|
|
37
|
+
<td>
|
|
38
|
+
<button type="button" class="btn-remove" @click="cartStore.removeFromCart(item.id)">Remove</button>
|
|
39
|
+
</td>
|
|
40
|
+
</tr>
|
|
41
|
+
</tbody>
|
|
42
|
+
<tfoot>
|
|
43
|
+
<tr>
|
|
44
|
+
<td colspan="3" class="total-label">Grand Total:</td>
|
|
45
|
+
<td colspan="2" class="total-value">${{ cartStore.cartTotal }}</td>
|
|
46
|
+
</tr>
|
|
47
|
+
</tfoot>
|
|
48
|
+
</table>
|
|
49
|
+
|
|
50
|
+
<div class="cart-actions">
|
|
51
|
+
<button type="button" class="btn btn-clear" @click="cartStore.clearCart()">Clear Cart</button>
|
|
52
|
+
<router-link to="/checkout" class="btn btn-checkout">Proceed to Checkout</router-link>
|
|
53
|
+
</div>
|
|
54
|
+
</div>
|
|
55
|
+
</div>
|
|
56
|
+
</template>
|
|
57
|
+
|
|
58
|
+
<style scoped>
|
|
59
|
+
.empty-cart {
|
|
60
|
+
padding: 30px;
|
|
61
|
+
text-align: center;
|
|
62
|
+
color: #777;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.cart-table {
|
|
66
|
+
width: 100%;
|
|
67
|
+
border-collapse: collapse;
|
|
68
|
+
margin: 15px 0;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.cart-table th, .cart-table td {
|
|
72
|
+
border: 1px solid #ddd;
|
|
73
|
+
padding: 10px;
|
|
74
|
+
text-align: left;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.cart-table th {
|
|
78
|
+
background-color: #f2f2f2;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.qty-cell {
|
|
82
|
+
display: flex;
|
|
83
|
+
align-items: center;
|
|
84
|
+
gap: 8px;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.btn-qty {
|
|
88
|
+
width: 24px;
|
|
89
|
+
height: 24px;
|
|
90
|
+
background-color: #eee;
|
|
91
|
+
border: 1px solid #ccc;
|
|
92
|
+
cursor: pointer;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.btn-remove {
|
|
96
|
+
background-color: #e74c3c;
|
|
97
|
+
color: white;
|
|
98
|
+
border: none;
|
|
99
|
+
padding: 4px 8px;
|
|
100
|
+
border-radius: 3px;
|
|
101
|
+
cursor: pointer;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.total-label {
|
|
105
|
+
text-align: right;
|
|
106
|
+
font-weight: bold;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
.total-value {
|
|
110
|
+
font-weight: bold;
|
|
111
|
+
color: #27ae60;
|
|
112
|
+
font-size: 16px;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
.cart-actions {
|
|
116
|
+
display: flex;
|
|
117
|
+
justify-content: space-between;
|
|
118
|
+
margin-top: 15px;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
.btn {
|
|
122
|
+
padding: 10px 18px;
|
|
123
|
+
border-radius: 4px;
|
|
124
|
+
text-decoration: none;
|
|
125
|
+
font-size: 14px;
|
|
126
|
+
cursor: pointer;
|
|
127
|
+
border: none;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
.btn-clear {
|
|
131
|
+
background-color: #95a5a6;
|
|
132
|
+
color: white;
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
.btn-checkout {
|
|
136
|
+
background-color: #27ae60;
|
|
137
|
+
color: white;
|
|
138
|
+
}
|
|
139
|
+
</style>
|
|
@@ -0,0 +1,144 @@
|
|
|
1
|
+
<script setup>
|
|
2
|
+
import { ref } from 'vue'
|
|
3
|
+
import { useRouter } from 'vue-router'
|
|
4
|
+
import { useCartStore } from '../stores/cartStore'
|
|
5
|
+
|
|
6
|
+
const cartStore = useCartStore()
|
|
7
|
+
const router = useRouter()
|
|
8
|
+
|
|
9
|
+
const name = ref('')
|
|
10
|
+
const address = ref('')
|
|
11
|
+
const orderPlaced = ref(false)
|
|
12
|
+
|
|
13
|
+
function handleCheckout() {
|
|
14
|
+
orderPlaced.value = true
|
|
15
|
+
cartStore.clearCart()
|
|
16
|
+
}
|
|
17
|
+
</script>
|
|
18
|
+
|
|
19
|
+
<template>
|
|
20
|
+
<div class="checkout-wrapper">
|
|
21
|
+
<h2>Checkout & Order Summary</h2>
|
|
22
|
+
|
|
23
|
+
<div v-if="orderPlaced" class="success-banner">
|
|
24
|
+
<h3>Thank you for your order! 🎉</h3>
|
|
25
|
+
<p>Your order has been placed successfully.</p>
|
|
26
|
+
<router-link to="/" class="btn btn-shop">Continue Shopping</router-link>
|
|
27
|
+
</div>
|
|
28
|
+
|
|
29
|
+
<div v-else-if="cartStore.items.length === 0" class="empty-state">
|
|
30
|
+
<p>No items in cart to checkout.</p>
|
|
31
|
+
<router-link to="/">Browse Catalog</router-link>
|
|
32
|
+
</div>
|
|
33
|
+
|
|
34
|
+
<div v-else class="checkout-content">
|
|
35
|
+
<div class="order-summary">
|
|
36
|
+
<h3>Order Items:</h3>
|
|
37
|
+
<ul>
|
|
38
|
+
<li v-for="item in cartStore.items" :key="item.id">
|
|
39
|
+
{{ item.name }} x {{ item.quantity }} — ${{ item.price * item.quantity }}
|
|
40
|
+
</li>
|
|
41
|
+
</ul>
|
|
42
|
+
<p class="summary-total">Total Amount: <strong>${{ cartStore.cartTotal }}</strong></p>
|
|
43
|
+
</div>
|
|
44
|
+
|
|
45
|
+
<form @submit.prevent="handleCheckout" class="checkout-form">
|
|
46
|
+
<h3>Shipping Information</h3>
|
|
47
|
+
<div class="form-group">
|
|
48
|
+
<label for="custName">Full Name:</label>
|
|
49
|
+
<input id="custName" type="text" v-model="name" required placeholder="John Doe" />
|
|
50
|
+
</div>
|
|
51
|
+
|
|
52
|
+
<div class="form-group">
|
|
53
|
+
<label for="custAddr">Delivery Address:</label>
|
|
54
|
+
<textarea id="custAddr" v-model="address" rows="3" required placeholder="123 Main St, City"></textarea>
|
|
55
|
+
</div>
|
|
56
|
+
|
|
57
|
+
<button type="submit" class="btn btn-place">Confirm and Place Order</button>
|
|
58
|
+
</form>
|
|
59
|
+
</div>
|
|
60
|
+
</div>
|
|
61
|
+
</template>
|
|
62
|
+
|
|
63
|
+
<style scoped>
|
|
64
|
+
.checkout-wrapper {
|
|
65
|
+
max-width: 500px;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.checkout-content {
|
|
69
|
+
display: flex;
|
|
70
|
+
flex-direction: column;
|
|
71
|
+
gap: 20px;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.order-summary {
|
|
75
|
+
background-color: #f8f9fa;
|
|
76
|
+
padding: 15px;
|
|
77
|
+
border-radius: 6px;
|
|
78
|
+
border: 1px solid #ddd;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.order-summary ul {
|
|
82
|
+
padding-left: 20px;
|
|
83
|
+
margin: 10px 0;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.summary-total {
|
|
87
|
+
font-size: 16px;
|
|
88
|
+
margin-top: 10px;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
.checkout-form {
|
|
92
|
+
display: flex;
|
|
93
|
+
flex-direction: column;
|
|
94
|
+
gap: 12px;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.form-group {
|
|
98
|
+
display: flex;
|
|
99
|
+
flex-direction: column;
|
|
100
|
+
gap: 4px;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
input, textarea {
|
|
104
|
+
padding: 8px;
|
|
105
|
+
border: 1px solid #ccc;
|
|
106
|
+
border-radius: 4px;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
.btn {
|
|
110
|
+
padding: 10px 16px;
|
|
111
|
+
border: none;
|
|
112
|
+
border-radius: 4px;
|
|
113
|
+
cursor: pointer;
|
|
114
|
+
text-decoration: none;
|
|
115
|
+
font-size: 14px;
|
|
116
|
+
text-align: center;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
.btn-place {
|
|
120
|
+
background-color: #27ae60;
|
|
121
|
+
color: white;
|
|
122
|
+
margin-top: 10px;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
.btn-shop {
|
|
126
|
+
background-color: #2980b9;
|
|
127
|
+
color: white;
|
|
128
|
+
display: inline-block;
|
|
129
|
+
margin-top: 10px;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
.success-banner {
|
|
133
|
+
background-color: #d4edda;
|
|
134
|
+
color: #155724;
|
|
135
|
+
padding: 20px;
|
|
136
|
+
border-radius: 6px;
|
|
137
|
+
text-align: center;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
.empty-state {
|
|
141
|
+
padding: 20px 0;
|
|
142
|
+
text-align: center;
|
|
143
|
+
}
|
|
144
|
+
</style>
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
<script setup>
|
|
2
|
+
import { useCartStore } from '../stores/cartStore'
|
|
3
|
+
|
|
4
|
+
const cartStore = useCartStore()
|
|
5
|
+
</script>
|
|
6
|
+
|
|
7
|
+
<template>
|
|
8
|
+
<div>
|
|
9
|
+
<h2>Available Products</h2>
|
|
10
|
+
<div class="product-grid">
|
|
11
|
+
<div v-for="product in cartStore.products" :key="product.id" class="product-card">
|
|
12
|
+
<h3>{{ product.name }}</h3>
|
|
13
|
+
<p class="category">{{ product.category }}</p>
|
|
14
|
+
<p class="price">${{ product.price }}</p>
|
|
15
|
+
<button
|
|
16
|
+
type="button"
|
|
17
|
+
class="btn btn-add"
|
|
18
|
+
@click="cartStore.addToCart(product)"
|
|
19
|
+
>
|
|
20
|
+
Add to Cart
|
|
21
|
+
</button>
|
|
22
|
+
</div>
|
|
23
|
+
</div>
|
|
24
|
+
</div>
|
|
25
|
+
</template>
|
|
26
|
+
|
|
27
|
+
<style scoped>
|
|
28
|
+
.product-grid {
|
|
29
|
+
display: grid;
|
|
30
|
+
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
|
|
31
|
+
gap: 15px;
|
|
32
|
+
margin-top: 15px;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.product-card {
|
|
36
|
+
border: 1px solid #ddd;
|
|
37
|
+
border-radius: 6px;
|
|
38
|
+
padding: 15px;
|
|
39
|
+
text-align: center;
|
|
40
|
+
background-color: #fafafa;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.product-card h3 {
|
|
44
|
+
font-size: 16px;
|
|
45
|
+
margin: 5px 0;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.category {
|
|
49
|
+
color: #777;
|
|
50
|
+
font-size: 12px;
|
|
51
|
+
margin-bottom: 8px;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.price {
|
|
55
|
+
font-size: 18px;
|
|
56
|
+
font-weight: bold;
|
|
57
|
+
color: #27ae60;
|
|
58
|
+
margin-bottom: 12px;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.btn-add {
|
|
62
|
+
background-color: #2980b9;
|
|
63
|
+
color: white;
|
|
64
|
+
border: none;
|
|
65
|
+
padding: 8px 12px;
|
|
66
|
+
border-radius: 4px;
|
|
67
|
+
cursor: pointer;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.btn-add:hover {
|
|
71
|
+
background-color: #1f618d;
|
|
72
|
+
}
|
|
73
|
+
</style>
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Vue Pinia Memory Game</title>
|
|
7
|
+
</head>
|
|
8
|
+
<body>
|
|
9
|
+
<div id="app"></div>
|
|
10
|
+
<script type="module" src="/src/main.js"></script>
|
|
11
|
+
</body>
|
|
12
|
+
</html>
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "vue-memory-game",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"private": true,
|
|
5
|
+
"type": "module",
|
|
6
|
+
"scripts": {
|
|
7
|
+
"dev": "vite",
|
|
8
|
+
"build": "vite build",
|
|
9
|
+
"preview": "vite preview"
|
|
10
|
+
},
|
|
11
|
+
"dependencies": {
|
|
12
|
+
"pinia": "^4.1.0",
|
|
13
|
+
"vue": "^3.5.44"
|
|
14
|
+
},
|
|
15
|
+
"devDependencies": {
|
|
16
|
+
"@vitejs/plugin-vue": "^6.0.10",
|
|
17
|
+
"vite": "^8.3.4"
|
|
18
|
+
}
|
|
19
|
+
}
|