made changes
This commit is contained in:
JSriwongsa
parent
2034cf9160
commit
7faf415c7d
4 changed files with 258 additions and 17 deletions
|
|
@ -154,7 +154,7 @@ const foodItem = [
|
|||
},
|
||||
{
|
||||
id:18,
|
||||
name: 'Spicy maguro poke Salad',
|
||||
name: 'Spicy maguro Salad',
|
||||
category: 'Salad',
|
||||
rating: 4.3,
|
||||
price:12.99,
|
||||
|
|
@ -172,7 +172,7 @@ const foodItem = [
|
|||
},
|
||||
{
|
||||
id:20,
|
||||
name: 'Maguro/Shiro Maguro',
|
||||
name: 'Maguro',
|
||||
category: 'Nigiri',
|
||||
rating: 4.3,
|
||||
price:8.99,
|
||||
|
|
|
|||
|
|
@ -66,15 +66,16 @@ body{
|
|||
#food-container{
|
||||
scrollbar-width: none;
|
||||
}
|
||||
#menu-header .address{
|
||||
.address{
|
||||
font-size: 0.8rem;
|
||||
border: 1px solid var(--main-color);
|
||||
color: var(--main-color);
|
||||
padding: 5px 10px;
|
||||
border-radius: 10px;
|
||||
width: 100px;
|
||||
width: 150px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
}
|
||||
.utility i{
|
||||
font-size: 0.8rem;
|
||||
|
|
@ -210,17 +211,12 @@ body{
|
|||
color: var(--main-color);
|
||||
font-weight: 600;
|
||||
}
|
||||
/*--------------------------------------------------------------------------------------------------------------------------*/
|
||||
.food-items{
|
||||
display: none;
|
||||
}
|
||||
#category-list{
|
||||
|
||||
}
|
||||
.cart-toggle{
|
||||
display: none;
|
||||
}
|
||||
/*--------------------------------------------------------------------------------------------------------------------------*/
|
||||
#cart-page{
|
||||
background: var(--other-color);
|
||||
margin: 40px 10px;
|
||||
|
|
@ -305,5 +301,170 @@ body{
|
|||
background: var(--minor-color);
|
||||
color: var(--bg-color);
|
||||
}
|
||||
#respon-view{
|
||||
display: none;
|
||||
}
|
||||
/*---------- responsive-view---------*/
|
||||
@media screen and (max-width:1200px){
|
||||
#container{
|
||||
display: none;
|
||||
}
|
||||
#respon-view{
|
||||
display: grid;
|
||||
grid-template-rows: 120px 1fr 50px;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
.respon-top{
|
||||
padding: 5px 15px;
|
||||
z-index: 1;
|
||||
background: var(--bg-color);
|
||||
}
|
||||
.item-container{
|
||||
overflow-y: scroll;
|
||||
}
|
||||
.logo-box, .top-menu{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.logo-box img{
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
.top-menu{
|
||||
color: var(--main-color);
|
||||
}
|
||||
.top-menu i {
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
padding: 10px 5px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.m-cart-toggle{
|
||||
color: var(--bg-color);
|
||||
background: var(--main-color);
|
||||
}
|
||||
.category-header{
|
||||
display: flex;
|
||||
width: 100%;
|
||||
overflow-x: scroll;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: var(--bg-color);
|
||||
z-index: 1;
|
||||
border-bottom: 1px solid var(--other-color);
|
||||
margin: 0;
|
||||
}
|
||||
.toggle-category{
|
||||
display: none;
|
||||
position: relative;
|
||||
}
|
||||
.list-menu{
|
||||
margin: 0 10px;
|
||||
text-align: center;
|
||||
}
|
||||
.list-menu img{
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
.list-menu:hover{
|
||||
background: none;
|
||||
transform: none;
|
||||
|
||||
}
|
||||
.list-menu:hover img{
|
||||
transform: none;
|
||||
transition: none;
|
||||
}
|
||||
.list-name{
|
||||
margin: 5px 0;
|
||||
color: var(--main-color);
|
||||
width: max-content;
|
||||
font-size: 1rem;
|
||||
}
|
||||
#food-items{
|
||||
padding: 5px 10px;
|
||||
}
|
||||
.respon-footer{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 5px 15px;
|
||||
background: var(--bg-color);
|
||||
border-top: 1px solid var(--other-color);
|
||||
}
|
||||
.respon-footer a{
|
||||
color: var(--main-color);
|
||||
text-decoration: none;
|
||||
position: sticky;
|
||||
font-weight: 600;
|
||||
}
|
||||
#category-name{
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
#item-box{
|
||||
width: 150px;
|
||||
height: 200px;
|
||||
}
|
||||
#item-box img{
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
}
|
||||
#item-box p{
|
||||
font-size: 12px;
|
||||
}
|
||||
.list-menu{
|
||||
flex-direction: column;
|
||||
}
|
||||
#cart-page{
|
||||
margin: 3px 0;
|
||||
padding: 10px 5px;
|
||||
padding-bottom: 30px;
|
||||
border-top: 1px solid var(--other-color);
|
||||
}
|
||||
#cart-page table thead td{
|
||||
font-size: 16px;
|
||||
}
|
||||
#cart-page table tbody td{
|
||||
font-size: 16px;
|
||||
}
|
||||
#cart-page table tbody img{
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
#cart-title{
|
||||
font-size: 20px;
|
||||
display: inline-block;
|
||||
}
|
||||
#cart-total{
|
||||
display: inline-block;
|
||||
color: var(--main-color);
|
||||
padding: 5px 10px;
|
||||
margin: 0;
|
||||
border: 1px solid var(--main-color);
|
||||
float: inline-end;
|
||||
}
|
||||
.checkout-btn{
|
||||
font-size: 14px;
|
||||
background: var(--main-color);
|
||||
padding: 8px 15px;
|
||||
margin: auto;
|
||||
}
|
||||
#Appetizer{
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width:380px){
|
||||
#item-box{
|
||||
height: 200px;
|
||||
width: 150px;
|
||||
}
|
||||
#food-items{
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -114,8 +114,34 @@
|
|||
<button class="checkout-btn">Checkout</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="respon-view" class="respon-view">
|
||||
<div class="respon-top">
|
||||
<div class="logo-box">
|
||||
<img src="images/logo.png" alt="">
|
||||
<i class="fa-solid fa-location-dot address" id="m-add-address">Address</i>
|
||||
</div>
|
||||
<div class="top-menu">
|
||||
<i class="fas fa-search"></i>
|
||||
<i class="fas fa-tag"></i>
|
||||
<i class="fas fa-heart"></i>
|
||||
<i class="fas fa-shopping-cart" id="m-shopping-cart"> 0</i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item-container">
|
||||
<div class="category-header" id="category-header">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="respon-footer">
|
||||
<a href="index.html">Home</a>
|
||||
<a href="">Offers</a>
|
||||
<a href="">Your orders</a>
|
||||
<a href="">Help</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="order.js" type="module"></script>
|
||||
|
|
|
|||
|
|
@ -380,6 +380,7 @@ function categoryLists(){
|
|||
|
||||
var cloneListMenu = listMenu.cloneNode(true);
|
||||
categoryList.appendChild(listMenu);
|
||||
document.querySelector('.category-header').appendChild(cloneListMenu)
|
||||
})
|
||||
}
|
||||
categoryLists();
|
||||
|
|
@ -405,7 +406,7 @@ function addToCart(){
|
|||
}
|
||||
|
||||
document.getElementById('shopping-cart').innerText = ' ' +cartData.length + 'Items';
|
||||
//document.getElementById('m-shopping-cart').innerText = '' +cartData.length;
|
||||
document.getElementById('m-shopping-cart').innerText = '' +cartData.length;
|
||||
|
||||
totalAmount();
|
||||
cartItems()
|
||||
|
|
@ -489,14 +490,14 @@ function dropItem(){
|
|||
document.getElementById(removeObject.id).classList.remove('toggle-cart');
|
||||
cartData.splice(ind,1);
|
||||
document.getElementById('shopping-cart').innerHTML = '' + cartData.length + 'Items';
|
||||
//document.getElementById('m-shopping-cart').innerHTML = '' + cartData.length;
|
||||
document.getElementById('m-shopping-cart').innerHTML = '' + cartData.length;
|
||||
|
||||
if(cartData.length < 1 && flag){
|
||||
document.getElementById('food-items').classList.toggle('food-items');
|
||||
document.getElementById('category-list').classList.toggle('food-items');
|
||||
//document.getElementById('m-shopping-cart').classList.toggle('m-cart-toggle');
|
||||
document.getElementById('m-shopping-cart').classList.toggle('m-cart-toggle');
|
||||
document.getElementById('cart-page').classList.toggle('cart-toggle');
|
||||
//document.getElementById('category-header').classList.toggle('toggle-category'); //----------------------------------------
|
||||
document.getElementById('category-header').classList.toggle('toggle-category');
|
||||
document.getElementById('checkout').classList.toggle('cart-toggle');
|
||||
flag = false;
|
||||
alert('Currently no item in the cart');
|
||||
|
|
@ -515,23 +516,76 @@ function totalAmount(){
|
|||
sum += rounded_price;
|
||||
})
|
||||
document.getElementById('total-item').innerText = 'Items :' + cartData.length;
|
||||
console.log(document.getElementById('total-price').innerText);
|
||||
document.getElementById('total-price').innerText = 'Total Amount : $' + sum;
|
||||
document.getElementById('cart-total').innerText = 'Total Amount : $' + sum;
|
||||
|
||||
}
|
||||
document.getElementById('shopping-cart').addEventListener('click', cartToggle);
|
||||
//document.getElementById('m-shopping-cart').addEventListener('click', cartToggle);
|
||||
document.getElementById('m-shopping-cart').addEventListener('click', cartToggle);
|
||||
|
||||
function cartToggle(){
|
||||
if(cartData.length > 0){
|
||||
document.getElementById('food-items').classList.toggle('food-items');
|
||||
document.getElementById('category-list').classList.toggle('food-items');
|
||||
//document.getElementById('m-shopping-cart').classList.toggle('m-cart-toggle');
|
||||
document.getElementById('m-shopping-cart').classList.toggle('m-cart-toggle');
|
||||
document.getElementById('cart-page').classList.toggle('cart-toggle');
|
||||
//document.getElementById('category-header').classList.toggle('toggle-category'); //----------------------------------------
|
||||
document.getElementById('category-header').classList.toggle('toggle-category');
|
||||
document.getElementById('checkout').classList.toggle('cart-toggle');
|
||||
flag = true;
|
||||
}
|
||||
else {
|
||||
alert('Currently no item in the cart');
|
||||
}
|
||||
}
|
||||
|
||||
document.getElementById('add-address').addEventListener('click', addAddress);
|
||||
document.getElementById('m-add-address').addEventListener('click', addAddress);
|
||||
|
||||
function addAddress(){
|
||||
var address = prompt('Please enter your address');
|
||||
if(address){
|
||||
document.getElementById('add-address').innerText = ' '+ address;
|
||||
document.getElementById('m-add-address').innerText = ' '+ address;
|
||||
}
|
||||
else{
|
||||
document.getElementById('add-address').innerText = 'Address';
|
||||
alert('Please provide your address');
|
||||
}
|
||||
}
|
||||
|
||||
window.onresize = window.onload = function(){
|
||||
var size = window.innerWidth;
|
||||
if (size < 1200){
|
||||
var cloneFoodItems = document.getElementById('food-items').cloneNode(true);
|
||||
var cloneCartPage = document.getElementById('cart-page').cloneNode(true);
|
||||
|
||||
document.getElementById('food-items').remove();
|
||||
document.getElementById('cart-page').remove();
|
||||
document.getElementById('category-header').after(cloneFoodItems);
|
||||
document.getElementById('food-items').after(cloneCartPage);
|
||||
addEvents();
|
||||
}
|
||||
if (size >1200){
|
||||
var cloneFoodItems = document.getElementById('food-items').cloneNode(true);
|
||||
|
||||
document.getElementById('food-items').remove();
|
||||
document.getElementById('menu-header').after(cloneFoodItems);
|
||||
|
||||
var cloneCartPage = document.getElementById('cart-page').cloneNode(true);
|
||||
document.getElementById('cart-page').remove();
|
||||
document.getElementById('food-items').after(cloneCartPage);
|
||||
addEvents();
|
||||
}
|
||||
}
|
||||
|
||||
function addEvents(){
|
||||
document.querySelectorAll('.add-to-cart').forEach(item => {
|
||||
item.addEventListener('click', addToCart);
|
||||
})
|
||||
document.querySelectorAll('.addOn-item').forEach(item => {
|
||||
item.addEventListener('click', addOnItem);
|
||||
})
|
||||
document.querySelectorAll('.drop-item').forEach(item => {
|
||||
item.addEventListener('click', dropItem);
|
||||
})
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue