Skip to content

Commit

Permalink
Add drinks to the menu
Browse files Browse the repository at this point in the history
  • Loading branch information
@htoann
htoann committed Aug 5, 2021
1 parent 4310eae commit 3b533b2
Show file tree
Hide file tree
Showing 10 changed files with 131 additions and 32 deletions.
9 changes: 7 additions & 2 deletions public/css/app.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -425,14 +425,19 @@ section .login input {
section #deleteCartButton {
color: #fe5f1e;
}
section input::-webkit-outer-spin-button,
section input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}

section.menu img {
transition: transform 0.3s;
transition: transform 0.2s;
z-index: -1;
}

section.menu img:hover {
transform: scale(1.2);
transform: scale(1.1);
z-index: -1;
}

Expand Down
Binary file removed public/img/hero-pizza2.png
View file
Binary file not shown.
Binary file removed public/img/piz1.jpg
View file
Binary file not shown.
Binary file removed public/img/piz2.jpg
View file
Binary file not shown.
Binary file removed public/img/piz3.jpg
View file
Binary file not shown.
Binary file removed public/img/piz4.jpg
View file
Binary file not shown.
10 changes: 8 additions & 2 deletions src/scss/app.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,15 +108,21 @@ section {
#deleteCartButton {
color: $primary;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
}

// Hover Pizza
section.menu img {
transition: transform 0.3s;
transition: transform 0.2s;
z-index: -1;
}
section.menu img:hover {
transform: scale(1.2);
transform: scale(1.1);
z-index: -1;
}

Expand Down
6 changes: 3 additions & 3 deletions src/views/customers/cart.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
<div class="pizza-list">
<% for(let pizza of Object.values(session.cart.items)) { %>
<div class="flex items-center my-8">
<img class="w-24" src="/img/<%= pizza.item.image %>" alt="">
<img class="w-24" src="<%= pizza.item.image %>" alt="">
<div class="ml-4 flex-1">
<h1>
<%= pizza.item.name %>
Expand All @@ -35,13 +35,13 @@
<div>
<span class="font-bold text-lg">Total Amount: </span>
<span class="amount text-2xl font-bold md:ml-2">
<%= session.cart.totalPrice %>$
<%= session.cart.totalPrice %> $
</span>
</div>
<% if(user) { %>
<div>
<form action="/customer/orders" method="POST" class="mt-12">
<input name="phone" class="border border-gray-400 p-2 w-1/2 mb-4" type="text"
<input name="phone" class="border border-gray-400 p-2 w-1/2 mb-4" type="number"
placeholder="Phone number" required>
<input name="address" class="border border-gray-400 p-2 w-1/2" type="text"
placeholder="Address" required>
Expand Down
136 changes: 112 additions & 24 deletions src/views/home.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,32 +16,120 @@
</div>
</section>

<section class="menu container mx-auto py-4 md:pt-20 px-2 top-2" id="menu">
<section class="menu container mx-auto py-4 md:pt-20 px-2 top-2 z-10" id="menu">
<h1 class="text-xl font-bold mb-16 text-center md:text-3xl">Menu</h1>
<div
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">
<% pizzas.forEach((pizza)=> { %>
<div class="w-66">
<img class="mb-4" src="/img/<%= pizza.image %>" alt="">
<div class="text-center">
<h2 class="mb-4 text-lg">
<%= pizza.name %>
</h2>
<span class="size py-1 px-4 uppercase text-xs rounded-full">
<%= pizza.size %>
</span>
<div class="flex items-center justify-around mt-6">
<span class="font-bold text-lg">
<%= pizza.price %>$
</span>
<button data-pizza="<%= JSON.stringify(pizza) %>"
class="add-to-cart py-1 px-6 rounded-full flex items-center font-bold">
<span>+</span>
<span class="ml-4">Add</span>
</button>
<div class="flex flex-wrap" id="tabs-id">
<div class="w-full">
<ul class="flex mb-0 list-none flex-wrap pt-3 pb-4 flex-row">
<li class="-mb-px mr-2 last:mr-0 flex-auto text-center">
<a class="text-xs font-bold uppercase px-5 py-3 shadow-lg rounded block leading-normal text-white bg-yellow-600 cursor-pointer"
onclick="changeAtiveTab(event,'tab-pizza')">
Pizzas
</a>
</li>
<li class="-mb-px mr-2 last:mr-0 flex-auto text-center">
<a class="text-xs font-bold uppercase px-5 py-3 shadow-lg rounded block leading-normal bg-white cursor-pointer"
onclick="changeAtiveTab(event,'tab-drink')">
Drinks
</a>
</li>
</ul>
<div class="relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded">
<div class="px-4 py-5 flex-auto">
<div class="tab-content tab-space">
<div class="block" id="tab-pizza">
<!-- Pizza -->
<div
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">
<% pizzas.forEach((pizza)=> { %>
<% if(pizza.name.includes('Pizza') ) { %>
<div class="w-66">
<img class="mb-4" src="<%= pizza.image %>" alt="">
<div class="text-center">
<h2 class="mb-4 text-lg">
<%= pizza.name %>
</h2>
<span class="size py-1 px-4 uppercase text-xs rounded-full">
<%= pizza.size %>
</span>
<div class="flex items-center justify-around mt-6">
<span class="font-bold text-lg">
<%= pizza.price %> $
</span>
<button data-pizza="<%= JSON.stringify(pizza) %>"
class="add-to-cart py-1 px-6 rounded-full flex items-center font-bold">
<span>+</span>
<span class="ml-4">Add</span>
</button>
</div>
</div>
</div>
<% } %>
<% }) %>
</div>
<!-- End pizza -->
</div>
<div class="hidden" id="tab-drink">
<!-- Drinks -->
<div
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">
<% pizzas.forEach((pizza)=> { %>
<% if(pizza.name.includes("Drink") ) { %>
<div class="w-66">
<img class="mb-4" src="<%= pizza.image %>" alt="">
<div class="text-center">
<h2 class="mb-4 text-lg">
<%= pizza.name %>
</h2>
<span class="size py-1 px-4 uppercase text-xs rounded-full">
<%= pizza.size %>
</span>
<div class="flex items-center justify-around mt-6">
<span class="font-bold text-lg">
<%= pizza.price %> $
</span>
<button data-pizza="<%= JSON.stringify(pizza) %>"
class="add-to-cart py-1 px-6 rounded-full flex items-center font-bold">
<span>+</span>
<span class="ml-4">Add</span>
</button>
</div>
</div>
</div>
<% } %>
<% }) %>
</div>
<!-- End drinks -->
</div>
</div>
</div>
</div>
<% }) %>
</div>
</div>
</section>
</section>
<script type="text/javascript">
function changeAtiveTab(event, tabID) {
let element = event.target;
while (element.nodeName !== "A") {
element = element.parentNode;
}
ulElement = element.parentNode.parentNode;
aElements = ulElement.querySelectorAll("li > a");
tabContents = document.getElementById("tabs-id").querySelectorAll(".tab-content > div");
for (let i = 0; i < aElements.length; i++) {
aElements[i].classList.remove("text-white");
aElements[i].classList.remove("bg-yellow-600");
aElements[i].classList.add("text-black");
aElements[i].classList.add("bg-white");
tabContents[i].classList.add("hidden");
tabContents[i].classList.remove("block");
}
element.classList.remove("text-white");
element.classList.remove("bg-white");
element.classList.add("text-white");
element.classList.add("bg-yellow-600");
document.getElementById(tabID).classList.remove("hidden");
document.getElementById(tabID).classList.add("block");
}
</script>
2 changes: 1 addition & 1 deletion src/views/layout.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
</head>

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

0 comments on commit 3b533b2

Please sign in to comment.