Skip to content

Commit 3b533b2

Browse files
htoannhtoann
committed
Add drinks to the menu
1 parent 4310eae commit 3b533b2

File tree

10 files changed

+131
-32
lines changed

10 files changed

+131
-32
lines changed

‎public/css/app.css

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -425,14 +425,19 @@ section .login input {
425425
section #deleteCartButton {
426426
color: #fe5f1e;
427427
}
428+
section input::-webkit-outer-spin-button,
429+
section input::-webkit-inner-spin-button {
430+
-webkit-appearance: none;
431+
margin: 0;
432+
}
428433

429434
section.menu img {
430-
transition: transform 0.3s;
435+
transition: transform 0.2s;
431436
z-index: -1;
432437
}
433438

434439
section.menu img:hover {
435-
transform: scale(1.2);
440+
transform: scale(1.1);
436441
z-index: -1;
437442
}
438443

‎public/img/hero-pizza2.png

-85.4 KB
Binary file not shown.

‎public/img/piz1.jpg

-37.1 KB
Binary file not shown.

‎public/img/piz2.jpg

-42.6 KB
Binary file not shown.

‎public/img/piz3.jpg

-39.2 KB
Binary file not shown.

‎public/img/piz4.jpg

-47.9 KB
Binary file not shown.

‎src/scss/app.scss

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -108,15 +108,21 @@ section {
108108
#deleteCartButton {
109109
color: $primary;
110110
}
111+
112+
input::-webkit-outer-spin-button,
113+
input::-webkit-inner-spin-button {
114+
-webkit-appearance: none;
115+
margin: 0;
116+
}
111117
}
112118

113119
// Hover Pizza
114120
section.menu img {
115-
transition: transform 0.3s;
121+
transition: transform 0.2s;
116122
z-index: -1;
117123
}
118124
section.menu img:hover {
119-
transform: scale(1.2);
125+
transform: scale(1.1);
120126
z-index: -1;
121127
}
122128

‎src/views/customers/cart.ejs

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
<div class="pizza-list">
1111
<% for(let pizza of Object.values(session.cart.items)) { %>
1212
<div class="flex items-center my-8">
13-
<img class="w-24" src="/img/<%= pizza.item.image %>" alt="">
13+
<img class="w-24" src="<%= pizza.item.image %>" alt="">
1414
<div class="ml-4 flex-1">
1515
<h1>
1616
<%= pizza.item.name %>
@@ -35,13 +35,13 @@
3535
<div>
3636
<span class="font-bold text-lg">Total Amount: </span>
3737
<span class="amount text-2xl font-bold md:ml-2">
38-
<%= session.cart.totalPrice %>$
38+
<%= session.cart.totalPrice %> $
3939
</span>
4040
</div>
4141
<% if(user) { %>
4242
<div>
4343
<form action="/customer/orders" method="POST" class="mt-12">
44-
<input name="phone" class="border border-gray-400 p-2 w-1/2 mb-4" type="text"
44+
<input name="phone" class="border border-gray-400 p-2 w-1/2 mb-4" type="number"
4545
placeholder="Phone number" required>
4646
<input name="address" class="border border-gray-400 p-2 w-1/2" type="text"
4747
placeholder="Address" required>

‎src/views/home.ejs

Lines changed: 112 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -16,32 +16,120 @@
1616
</div>
1717
</section>
1818

19-
<section class="menu container mx-auto py-4 md:pt-20 px-2 top-2" id="menu">
19+
<section class="menu container mx-auto py-4 md:pt-20 px-2 top-2 z-10" id="menu">
2020
<h1 class="text-xl font-bold mb-16 text-center md:text-3xl">Menu</h1>
21-
<div
22-
class="grid gap-x-2 gap-y-16 md:gap-x-4 lg:gap-x-40 gap-y-6 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
23-
<% pizzas.forEach((pizza)=> { %>
24-
<div class="w-66">
25-
<img class="mb-4" src="/img/<%= pizza.image %>" alt="">
26-
<div class="text-center">
27-
<h2 class="mb-4 text-lg">
28-
<%= pizza.name %>
29-
</h2>
30-
<span class="size py-1 px-4 uppercase text-xs rounded-full">
31-
<%= pizza.size %>
32-
</span>
33-
<div class="flex items-center justify-around mt-6">
34-
<span class="font-bold text-lg">
35-
<%= pizza.price %>$
36-
</span>
37-
<button data-pizza="<%= JSON.stringify(pizza) %>"
38-
class="add-to-cart py-1 px-6 rounded-full flex items-center font-bold">
39-
<span>+</span>
40-
<span class="ml-4">Add</span>
41-
</button>
21+
<div class="flex flex-wrap" id="tabs-id">
22+
<div class="w-full">
23+
<ul class="flex mb-0 list-none flex-wrap pt-3 pb-4 flex-row">
24+
<li class="-mb-px mr-2 last:mr-0 flex-auto text-center">
25+
<a class="text-xs font-bold uppercase px-5 py-3 shadow-lg rounded block leading-normal text-white bg-yellow-600 cursor-pointer"
26+
onclick="changeAtiveTab(event,'tab-pizza')">
27+
Pizzas
28+
</a>
29+
</li>
30+
<li class="-mb-px mr-2 last:mr-0 flex-auto text-center">
31+
<a class="text-xs font-bold uppercase px-5 py-3 shadow-lg rounded block leading-normal bg-white cursor-pointer"
32+
onclick="changeAtiveTab(event,'tab-drink')">
33+
Drinks
34+
</a>
35+
</li>
36+
</ul>
37+
<div class="relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded">
38+
<div class="px-4 py-5 flex-auto">
39+
<div class="tab-content tab-space">
40+
<div class="block" id="tab-pizza">
41+
<!-- Pizza -->
42+
<div
43+
class="grid gap-x-2 gap-y-16 md:gap-x-4 lg:gap-x-40 gap-y-6 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
44+
<% pizzas.forEach((pizza)=> { %>
45+
<% if(pizza.name.includes('Pizza') ) { %>
46+
<div class="w-66">
47+
<img class="mb-4" src="<%= pizza.image %>" alt="">
48+
<div class="text-center">
49+
<h2 class="mb-4 text-lg">
50+
<%= pizza.name %>
51+
</h2>
52+
<span class="size py-1 px-4 uppercase text-xs rounded-full">
53+
<%= pizza.size %>
54+
</span>
55+
<div class="flex items-center justify-around mt-6">
56+
<span class="font-bold text-lg">
57+
<%= pizza.price %> $
58+
</span>
59+
<button data-pizza="<%= JSON.stringify(pizza) %>"
60+
class="add-to-cart py-1 px-6 rounded-full flex items-center font-bold">
61+
<span>+</span>
62+
<span class="ml-4">Add</span>
63+
</button>
64+
</div>
65+
</div>
66+
</div>
67+
<% } %>
68+
<% }) %>
69+
</div>
70+
<!-- End pizza -->
71+
</div>
72+
<div class="hidden" id="tab-drink">
73+
<!-- Drinks -->
74+
<div
75+
class="grid gap-x-2 gap-y-16 md:gap-x-4 lg:gap-x-40 gap-y-6 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
76+
<% pizzas.forEach((pizza)=> { %>
77+
78+
<% if(pizza.name.includes("Drink") ) { %>
79+
<div class="w-66">
80+
<img class="mb-4" src="<%= pizza.image %>" alt="">
81+
<div class="text-center">
82+
<h2 class="mb-4 text-lg">
83+
<%= pizza.name %>
84+
</h2>
85+
<span class="size py-1 px-4 uppercase text-xs rounded-full">
86+
<%= pizza.size %>
87+
</span>
88+
<div class="flex items-center justify-around mt-6">
89+
<span class="font-bold text-lg">
90+
<%= pizza.price %> $
91+
</span>
92+
<button data-pizza="<%= JSON.stringify(pizza) %>"
93+
class="add-to-cart py-1 px-6 rounded-full flex items-center font-bold">
94+
<span>+</span>
95+
<span class="ml-4">Add</span>
96+
</button>
97+
</div>
98+
</div>
99+
</div>
100+
<% } %>
101+
<% }) %>
102+
</div>
103+
<!-- End drinks -->
104+
</div>
42105
</div>
43106
</div>
44107
</div>
45-
<% }) %>
108+
</div>
46109
</div>
47-
</section>
110+
</section>
111+
<script type="text/javascript">
112+
function changeAtiveTab(event, tabID) {
113+
let element = event.target;
114+
while (element.nodeName !== "A") {
115+
element = element.parentNode;
116+
}
117+
ulElement = element.parentNode.parentNode;
118+
aElements = ulElement.querySelectorAll("li > a");
119+
tabContents = document.getElementById("tabs-id").querySelectorAll(".tab-content > div");
120+
for (let i = 0; i < aElements.length; i++) {
121+
aElements[i].classList.remove("text-white");
122+
aElements[i].classList.remove("bg-yellow-600");
123+
aElements[i].classList.add("text-black");
124+
aElements[i].classList.add("bg-white");
125+
tabContents[i].classList.add("hidden");
126+
tabContents[i].classList.remove("block");
127+
}
128+
element.classList.remove("text-white");
129+
element.classList.remove("bg-white");
130+
element.classList.add("text-white");
131+
element.classList.add("bg-yellow-600");
132+
document.getElementById(tabID).classList.remove("hidden");
133+
document.getElementById(tabID).classList.add("block");
134+
}
135+
</script>

‎src/views/layout.ejs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
</head>
1414

1515
<body>
16-
<nav class="sticky top-0">
16+
<nav class="sticky top-0 z-20">
1717
<div class="mx-auto flex items-center justify-between py-4 container pl-3 md:pl-0">
1818
<a class="hidden md:contents" href="/">
1919
<img src="/img/logo.png" alt="logo" /></a>

0 commit comments

Comments
 (0)