-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
205 lines (185 loc) · 11.2 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
<!-- Ruth Woods X23174382 -->
<!-- sources, google, youtube, NCI notes -->
<!-- Images = https://unsplash.com/s/photos/cakes -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shopping Cart</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<!-- Font Awesome CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- Custom CSS -->
<link href="style.css" rel="stylesheet">
</head>
<body>
<!-- Header Section -->
<header class="custom-header py-3">
<div class="container">
<div class="row align-items-center">
<div class="col-md-4">
<div class="logo">
<h1 class="mb-1"><i class="fa-solid fa-cake-candles"></i> Naturally Sweet</h1>
</div>
</div>
<div class="col-md-8 text-md-end">
<nav>
<ul class="list-inline mb-0">
<li class="list-inline-item"><a href="index.html"><i class="fa-solid fa-cake-candles"></i> Home</a></li>
<li class="list-inline-item"><a href="makecake.html"><i class="fa-solid fa-wand-magic-sparkles"></i> Make your cake</a></li>
<li class="list-inline-item"><a href="howplay.html"><i class="fa-solid fa-kitchen-set"></i> How to Play</a></li>
<li class="list-inline-item"><a href="game.html"><i class="fa-solid fa-burst"></i> Game</a></li>
<li class="list-inline-item"><a href="cart.html"><i class="fa-solid fa-bag-shopping fa-beat"></i> cart</a></li>
</ul>
</nav>
</div>
</div>
</div>
</header>
<!-- Main Content Section -->
<main>
<section class="main-content py-5">
<div class="container">
<div class="welcome-text-container">
<h2 class="text-center">Welcome to our little online shop</h2>
<p class="lead text-center">We create delightful cakes for every occasion, whether it's a birthday, Christmas, wedding, christening, or any special event. Choose from our variety of sizes to make your celebration memorable. Below are our buy now cakes, but if you would prefer to make your own - we can do that as well</p>
</div>
<div class="row mt-4">
<!-- Cake 1 -->
<div class="col-md-3">
<div class="card">
<img src="images/chocCake.jpg" alt="Cake 1" class="card-img-top img-fluid squ">
<div class="card-body">
<p class="card-text">Classic Celebration Cake</p>
<p class="card-text"><strong>Description:</strong> A timeless classic, perfect for any celebration.</p>
<p class="card-text"><strong>Sizes:</strong>
<select class="form-select" aria-label="Pick a size" id="cake1">
<option value="20">Small</option>
<option value="35">Medium</option>
<option value="50">Large</option>
</select>
</p>
<p class="card-text"><strong>Prices:</strong> €<span id="cake1-price"></span></p>
<p class="card-text"><strong>Details:</strong> Rich chocolate flavor, moist layers, and elegant decoration.</p>
<a class="btn btn-primary" onclick="addToCart('chocCake', 'cake1')">Add to Cart</a>
</div>
</div>
</div>
<!-- Cake 2 -->
<div class="col-md-3">
<div class="card">
<img src="images/xmasCake.jpg" alt="Cake 2" class="card-img-top img-fluid squ card-img-fixed-height">
<div class="card-body">
<p class="card-text">Festive Holiday Cake</p>
<p class="card-text"><strong>Description:</strong> Spread holiday cheer with this festive cake.</p>
<p class="card-text"><strong>Sizes:</strong>
<select class="form-select" aria-label="Pick a size" id="cake2">
<option value="15">Small</option>
<option value="20">Medium</option>
<option value="28">Large</option>
</select>
</p>
<p class="card-text"><strong>Prices:</strong> €<span id="cake2-price"></span></p>
<p class="card-text"><strong>Details:</strong> Seasonal flavors, colorful decoration, and joy in every bite.<br></p>
<a class="btn btn-primary" onclick="addToCart('xmasCake', 'cake2')">Add to Cart</a>
</div>
</div>
</div>
<!-- Cake 3 -->
<div class="col-md-3">
<div class="card">
<img src="images/weddingCake.jpg" alt="Cake 3" class="card-img-top img-fluid squ card-img-fixed-height">
<div class="card-body">
<p class="card-text">Elegant Wedding Cake</p>
<p class="card-text"><strong>Description:</strong> Make your wedding day extra special with this cake.</p>
<p class="card-text"><strong>Sizes:</strong>
<select class="form-select" aria-label="Pick a size" id="cake3">
<option value="30">Small</option>
<option value="45">Medium</option>
<option value="60">Large</option>
</select>
</p>
<p class="card-text"><strong>Prices:</strong> €<span id="cake3-price"></span></p>
<p class="card-text"><strong>Details:</strong> Tiers, floral decoration, and a taste of sophistication.</p>
<a class="btn btn-primary" onclick="addToCart('weddingCake', 'cake3')">Add to Cart</a>
</div>
</div>
</div>
<!-- Cake 4 -->
<div class="col-md-3">
<div class="card">
<img src="images/christeningCake.jpg" alt="Cake 4" class="card-img-top img-fluid squ">
<div class="card-body">
<p class="card-text">Joyful Christening Cake</p>
<p class="card-text"><strong>Description:</strong> Celebrate the joy of christening with this delightful cake.</p>
<p class="card-text"><strong>Sizes:</strong>
<select class="form-select" aria-label="Pick a size" id="cake4">
<option value="22">Small</option>
<option value="38">Medium</option>
<option value="52">Large</option>
</select>
</p>
<p class="card-text"><strong>Prices:</strong> €<span id="cake4-price"></span></p>
<p class="card-text"><strong>Details:</strong> Light and fluffy layers, perfect for a joyous occasion.</p>
<a class="btn btn-primary" onclick="addToCart('christeningCake', 'cake4')">Add to Cart</a>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
<footer class="footer mt-5 py-3 bg-light">
<div class="container text-center">
<span class="text-muted">© 2023 Naturally Sweet</span>
</div>
</footer>
<!-- Bootstrap JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script>
<script>
// This function updates the price text based on the selected value of the select element
function updatePriceText(selectElement) {
var priceElement = document.getElementById(selectElement.id + '-price');
if (priceElement) {
priceElement.textContent = selectElement.value;
} // END if
} // END updatePriceText
// Adding event listeners to all select elements
document.querySelectorAll('select')
.forEach(function(selectElement) {
// Initialize with the current value
updatePriceText(selectElement);
// Update whenever the selection changes
selectElement.addEventListener('change', function() {
updatePriceText(selectElement);
});
}); // END forEach
// Initialize the cart from local storage or create an empty array
var cart = JSON.parse(localStorage.getItem('cart')) || [];
// Function to add cakes to the cart
function addToCart(cakeType, selectId) {
// Find the corresponding select element
var selectElement = document.getElementById(selectId);
// Check if the cake type is already in the cart
var existingCake = cart.find(item => item.type === cakeType);
if (existingCake) {
// Update the size if the cake is already in the cart
existingCake.size = selectElement.value;
} else {
// Add a new cake to the cart
cart.push({ type: cakeType, size: selectElement.value });
}
// Save the updated cart to local storage
localStorage.setItem('cart', JSON.stringify(cart));
// Provide feedback to the user (you can customize this part)
alert('Added to Cart: ' + cakeType + ' - Price: ' + selectElement.value);
}
</script>
<!-- Bootstrap JavaScript dependencies -->
<script src="https://code.jquery.com/jquery-3.6.4.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script>
</body>
</html>