Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit f4026e8

Browse files
Add the project
1 parent 1ecae28 commit f4026e8

File tree

3 files changed

+189
-0
lines changed

3 files changed

+189
-0
lines changed

‎Source-Code/FoodOrdering/index.html

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
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>Food Order App</title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
<div class="container">
11+
<h1>Food Order App</h1>
12+
<div class="menu">
13+
<div class="menu-item">
14+
<img src="burger.jpg" alt="Burger">
15+
<div class="item-info">
16+
<h3>Burger</h3>
17+
<p>5ドル.99</p>
18+
<button class="add-to-cart" data-name="Burger" data-price="5.99">Add to Cart</button>
19+
</div>
20+
</div>
21+
<div class="menu-item">
22+
<img src="pizza.jpg" alt="Pizza">
23+
<div class="item-info">
24+
<h3>Pizza</h3>
25+
<p>8ドル.99</p>
26+
<button class="add-to-cart" data-name="Pizza" data-price="8.99">Add to Cart</button>
27+
</div>
28+
</div>
29+
<div class="menu-item">
30+
<img src="pasta.jpg" alt="Pasta">
31+
<div class="item-info">
32+
<h3>Pasta</h3>
33+
<p>7ドル.49</p>
34+
<button class="add-to-cart" data-name="Pasta" data-price="7.49">Add to Cart</button>
35+
</div>
36+
</div>
37+
</div>
38+
39+
<div class="cart">
40+
<h2>Your Cart</h2>
41+
<ul id="cart-items">
42+
<!-- Cart items will appear here -->
43+
</ul>
44+
<p>Total: $<span id="total-price">0.00</span></p>
45+
<button id="place-order" disabled>Place Order</button>
46+
</div>
47+
</div>
48+
49+
<script src="script.js"></script>
50+
</body>
51+
</html>

‎Source-Code/FoodOrdering/script.js

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
const addToCartButtons = document.querySelectorAll('.add-to-cart');
2+
const cartItemsList = document.getElementById('cart-items');
3+
const totalPriceElement = document.getElementById('total-price');
4+
const placeOrderButton = document.getElementById('place-order');
5+
6+
let cart = [];
7+
let totalPrice = 0;
8+
9+
const addToCart = (event) => {
10+
const itemName = event.target.dataset.name;
11+
const itemPrice = parseFloat(event.target.dataset.price);
12+
13+
// Add item to cart
14+
cart.push({ name: itemName, price: itemPrice });
15+
16+
// Update total price
17+
totalPrice += itemPrice;
18+
19+
// Add item to the cart UI
20+
const cartItem = document.createElement('li');
21+
cartItem.textContent = `${itemName} - $${itemPrice.toFixed(2)}`;
22+
cartItemsList.appendChild(cartItem);
23+
24+
// Update the total price displayed
25+
totalPriceElement.textContent = totalPrice.toFixed(2);
26+
27+
// Enable the "Place Order" button
28+
placeOrderButton.disabled = false;
29+
};
30+
31+
addToCartButtons.forEach((button) => {
32+
button.addEventListener('click', addToCart);
33+
});
34+
35+
const placeOrder = () => {
36+
if (cart.length === 0) return;
37+
38+
alert('Order placed successfully!');
39+
cart = [];
40+
totalPrice = 0;
41+
42+
// Clear cart UI
43+
cartItemsList.innerHTML = '';
44+
totalPriceElement.textContent = '0.00';
45+
46+
// Disable the "Place Order" button again
47+
placeOrderButton.disabled = true;
48+
};
49+
50+
placeOrderButton.addEventListener('click', placeOrder);

‎Source-Code/FoodOrdering/style.css

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
body {
2+
font-family: Arial, sans-serif;
3+
margin: 0;
4+
padding: 0;
5+
display: flex;
6+
justify-content: center;
7+
align-items: center;
8+
background-color: #a5ef9d;
9+
height: 100vh;
10+
}
11+
12+
.container {
13+
background-color: #fff;
14+
padding: 20px;
15+
border-radius: 10px;
16+
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
17+
width: 70%;
18+
max-width: 1000px;
19+
}
20+
21+
h1 {
22+
text-align: center;
23+
font-size: 32px;
24+
}
25+
26+
.menu {
27+
display: flex;
28+
justify-content: space-around;
29+
margin-bottom: 20px;
30+
}
31+
32+
.menu-item {
33+
text-align: center;
34+
width: 30%;
35+
background-color: #f9f9f9;
36+
padding: 10px;
37+
border-radius: 10px;
38+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
39+
}
40+
41+
.menu-item img {
42+
width: 100%;
43+
max-height: 200px;
44+
object-fit: cover;
45+
border-radius: 10px;
46+
}
47+
48+
.add-to-cart {
49+
margin-top: 10px;
50+
padding: 10px 20px;
51+
background-color: #28a745;
52+
color: #fff;
53+
border: none;
54+
border-radius: 5px;
55+
cursor: pointer;
56+
}
57+
58+
.add-to-cart:hover {
59+
background-color: #218838;
60+
}
61+
62+
.cart {
63+
margin-top: 30px;
64+
text-align: center;
65+
}
66+
67+
.cart ul {
68+
list-style-type: none;
69+
padding: 0;
70+
}
71+
72+
.cart li {
73+
margin: 10px 0;
74+
}
75+
76+
#place-order {
77+
padding: 10px 20px;
78+
background-color: #007bff;
79+
color: white;
80+
border: none;
81+
border-radius: 5px;
82+
cursor: pointer;
83+
}
84+
85+
#place-order:disabled {
86+
background-color: #aaa;
87+
cursor: not-allowed;
88+
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /