Skip to content

Commit 00ce879

Browse files
qbs784qbs784
committed
Github Pages
0 parents  commit 00ce879

File tree

11 files changed

+437
-0
lines changed

11 files changed

+437
-0
lines changed

‎.idea/.gitignore‎

Lines changed: 8 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎index.html‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
<!DOCTYPE html>
2+
<head>
3+
<title>shopping list</title>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<link rel="stylesheet" type="text/css" href="static/css/style.css">
7+
<link rel="stylesheet" type="text/css" href="static/css/bootstrap.min.css">
8+
</head>
9+
<body>
10+
11+
<header class="bg-dark text-light py-3">
12+
<div class="container">
13+
<h1>IEMS5718</h1>
14+
</div>
15+
</header>
16+
17+
<main>
18+
<div class="container">
19+
<div class="row">
20+
<nav class="col-2">
21+
<ul class="menu">
22+
<li class="category" data-category="Furniture">Furniture</li>
23+
<li class="category" data-category="Lamps">Lamps</li>
24+
</ul>
25+
</nav>
26+
<section class="col-10">
27+
<section class="row" id="navigation">
28+
<section class="col-9">
29+
<span id="first-nav">
30+
<a href="index.html">Home</a>
31+
</span>
32+
<span id="second-nav">
33+
<a href="#" id="category-link">Category</a>
34+
</span>
35+
<span id="third-nav">
36+
<a href="#">Product</a>
37+
</span>
38+
</section>
39+
<section class="col-3">
40+
<button type="button" class="btn btn-secondary dropdown-toggle" id="cart-button">🛒</button>
41+
<div id="dropdown" class="dropdown-content">
42+
<h3>Shopping Cart</h3>
43+
<ul id="shopping-list">
44+
</ul>
45+
<p id="total">Total: $0</p>
46+
<button type="button" class="btn btn-primary">Checkout</button>
47+
</div>
48+
</section>
49+
</section>
50+
<section class="grid" id="product-list">
51+
</section>
52+
<iframe src="product.html" width="100%" height="400px" id="productPage" style="display: none;"></iframe>
53+
</section>
54+
</div>
55+
</div>
56+
</main>
57+
58+
<script src="static/js/script.js"></script>
59+
</body>
60+

‎product.html‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!DOCTYPE html>
2+
<head>
3+
<title>product detail</title>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<link rel="stylesheet" type="text/css" href="static/css/bootstrap.min.css">
7+
<link rel="stylesheet" type="text/css" href="static/css/style.css">
8+
</head>
9+
10+
<body>
11+
<main id="product-detail">
12+
</main>
13+
14+
<script src="static/js/product.js"></script>
15+
</body>

‎static/css/bootstrap.min.css‎

Lines changed: 7 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎static/css/style.css‎

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
.main-container {
2+
display: block;
3+
min-height: 100%;
4+
}
5+
6+
.sidebar {
7+
width: 200px;
8+
background-color: #8bdbad8a;
9+
}
10+
11+
.menu {
12+
list-style-type: none;
13+
padding: 0;
14+
}
15+
16+
.category {
17+
padding: 10px;
18+
border-bottom: 1px solid #ccc;
19+
cursor: pointer;
20+
}
21+
22+
.main {
23+
flex-grow: 1;
24+
padding: 20px;
25+
}
26+
27+
.grid {
28+
display: grid;
29+
grid-template-columns: repeat(4, 1fr);
30+
grid-gap: 10px;
31+
}
32+
33+
.shopping_item {
34+
width: 75px;
35+
height: 120px;
36+
border: 10px solid #2196F3;
37+
background-color: #f7f7f7;
38+
text-align: center;
39+
}
40+
41+
.product {
42+
background-color: #f7f7f7;
43+
text-align: center;
44+
}
45+
46+
.product-img {
47+
width: 200px;
48+
height: 200px;
49+
margin-bottom: 10px;
50+
}
51+
52+
.product-price {
53+
margin-top: 5px;
54+
font-weight: bold;
55+
}
56+
57+
.add-button {
58+
margin-top: 10px;
59+
}
60+
61+
#navigation{
62+
margin-top: 10px;
63+
margin-bottom: 10px;
64+
}
65+
66+
#second-nav, #third-nav{
67+
display: none;
68+
}
69+
70+
.dropdown-content {
71+
display: none;
72+
position: absolute;
73+
background-color: #f9f9f9;
74+
min-width: 300px;
75+
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
76+
padding: 10px;
77+
right: 0;
78+
}
79+
80+
#productPage{
81+
border: none;
82+
outline: none;
83+
min-height: 100%;
84+
}
85+
86+
.product-container {
87+
display: flex;
88+
align-items: flex-start;
89+
}
90+
.product-image {
91+
flex: 0 0 40%;
92+
margin-right: 20px;
93+
}
94+
.product-details {
95+
flex: 1;
96+
}
97+
.product-description {
98+
display: block;
99+
clear: both;
100+
margin-top: 20px;
101+
}
102+
103+
#shopping-list {
104+
list-style-type: none;
105+
padding: 0;
106+
}
107+
108+
#shopping-list li {
109+
display: flex;
110+
justify-content: space-between;
111+
align-items: center;
112+
padding: 10px;
113+
border-bottom: 1px solid #ccc;
114+
}
115+
116+
#shopping-list li span {
117+
flex: 1;
118+
text-align: center;
119+
}
120+
121+
#total {
122+
text-align: right;
123+
font-weight: bold;
124+
margin-top: 10px;
125+
}
126+
127+
.quantity-input {
128+
width: 50px; /* 设置输入框的宽度 */
129+
text-align: center;
130+
}

‎static/js/product.js‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
const products = [
2+
{
3+
id: 1,
4+
category: 'Furniture',
5+
name: 'Yellow Chair',
6+
price: 299,
7+
image: 'static/picture/product.png',
8+
description: 'Comfortable and cheap'
9+
},
10+
{
11+
id: 2,
12+
category: 'Furniture',
13+
name: 'Grey Sofa',
14+
price: 599,
15+
image: 'static/picture/product3.png',
16+
description: 'Very Comfortable but expensive'
17+
},
18+
{
19+
id: 3,
20+
category: 'Lamps',
21+
name: 'Table Lamp',
22+
price: 99,
23+
image: 'static/picture/product2.png',
24+
description: 'Care for your eyes'
25+
},
26+
];
27+
28+
let product=document.getElementById("product-detail")
29+
let searchParams = new URLSearchParams(window.location.search);
30+
31+
let id = parseInt(searchParams.get('id'));
32+
//find the product and display it
33+
let pro = products.find(item => item.id === id);
34+
product.innerHTML = `
35+
<div class="container">
36+
<div class="product-container">
37+
<div class="product-image">
38+
<img src="${pro.image}" class="img-fluid" alt="Product Image">
39+
40+
</div>
41+
<div class="product-details">
42+
<h2>${pro.name}</h2>
43+
<p>Price: $ ${pro.price}</p>
44+
<button class="btn btn-primary" onclick="addToCart(id)">Add to Cart</button>
45+
</div>
46+
</div>
47+
48+
<hr>
49+
50+
<div class="product-description">
51+
<h2>Product Description</h1>
52+
<p>${pro.description}</p>
53+
</div>
54+
</div>
55+
`;
56+

0 commit comments

Comments
 (0)