made changes
This commit is contained in:
parent
2034cf9160
commit
7faf415c7d
4 changed files with 258 additions and 17 deletions
|
@ -154,7 +154,7 @@ const foodItem = [
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id:18,
|
id:18,
|
||||||
name: 'Spicy maguro poke Salad',
|
name: 'Spicy maguro Salad',
|
||||||
category: 'Salad',
|
category: 'Salad',
|
||||||
rating: 4.3,
|
rating: 4.3,
|
||||||
price:12.99,
|
price:12.99,
|
||||||
|
@ -172,7 +172,7 @@ const foodItem = [
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id:20,
|
id:20,
|
||||||
name: 'Maguro/Shiro Maguro',
|
name: 'Maguro',
|
||||||
category: 'Nigiri',
|
category: 'Nigiri',
|
||||||
rating: 4.3,
|
rating: 4.3,
|
||||||
price:8.99,
|
price:8.99,
|
||||||
|
|
|
@ -66,15 +66,16 @@ body{
|
||||||
#food-container{
|
#food-container{
|
||||||
scrollbar-width: none;
|
scrollbar-width: none;
|
||||||
}
|
}
|
||||||
#menu-header .address{
|
.address{
|
||||||
font-size: 0.8rem;
|
font-size: 0.8rem;
|
||||||
border: 1px solid var(--main-color);
|
border: 1px solid var(--main-color);
|
||||||
color: var(--main-color);
|
color: var(--main-color);
|
||||||
padding: 5px 10px;
|
padding: 5px 10px;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
width: 100px;
|
width: 150px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
.utility i{
|
.utility i{
|
||||||
font-size: 0.8rem;
|
font-size: 0.8rem;
|
||||||
|
@ -210,17 +211,12 @@ body{
|
||||||
color: var(--main-color);
|
color: var(--main-color);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
/*--------------------------------------------------------------------------------------------------------------------------*/
|
|
||||||
.food-items{
|
.food-items{
|
||||||
display: none;
|
display: none;
|
||||||
}
|
|
||||||
#category-list{
|
|
||||||
|
|
||||||
}
|
}
|
||||||
.cart-toggle{
|
.cart-toggle{
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
/*--------------------------------------------------------------------------------------------------------------------------*/
|
|
||||||
#cart-page{
|
#cart-page{
|
||||||
background: var(--other-color);
|
background: var(--other-color);
|
||||||
margin: 40px 10px;
|
margin: 40px 10px;
|
||||||
|
@ -305,5 +301,170 @@ body{
|
||||||
background: var(--minor-color);
|
background: var(--minor-color);
|
||||||
color: var(--bg-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>
|
<button class="checkout-btn">Checkout</button>
|
||||||
</div>
|
</div>
|
||||||
</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>
|
</div>
|
||||||
|
|
||||||
<script src="order.js" type="module"></script>
|
<script src="order.js" type="module"></script>
|
||||||
|
|
|
@ -380,6 +380,7 @@ function categoryLists(){
|
||||||
|
|
||||||
var cloneListMenu = listMenu.cloneNode(true);
|
var cloneListMenu = listMenu.cloneNode(true);
|
||||||
categoryList.appendChild(listMenu);
|
categoryList.appendChild(listMenu);
|
||||||
|
document.querySelector('.category-header').appendChild(cloneListMenu)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
categoryLists();
|
categoryLists();
|
||||||
|
@ -405,7 +406,7 @@ function addToCart(){
|
||||||
}
|
}
|
||||||
|
|
||||||
document.getElementById('shopping-cart').innerText = ' ' +cartData.length + 'Items';
|
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();
|
totalAmount();
|
||||||
cartItems()
|
cartItems()
|
||||||
|
@ -489,14 +490,14 @@ function dropItem(){
|
||||||
document.getElementById(removeObject.id).classList.remove('toggle-cart');
|
document.getElementById(removeObject.id).classList.remove('toggle-cart');
|
||||||
cartData.splice(ind,1);
|
cartData.splice(ind,1);
|
||||||
document.getElementById('shopping-cart').innerHTML = '' + cartData.length + 'Items';
|
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){
|
if(cartData.length < 1 && flag){
|
||||||
document.getElementById('food-items').classList.toggle('food-items');
|
document.getElementById('food-items').classList.toggle('food-items');
|
||||||
document.getElementById('category-list').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('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');
|
document.getElementById('checkout').classList.toggle('cart-toggle');
|
||||||
flag = false;
|
flag = false;
|
||||||
alert('Currently no item in the cart');
|
alert('Currently no item in the cart');
|
||||||
|
@ -515,23 +516,76 @@ function totalAmount(){
|
||||||
sum += rounded_price;
|
sum += rounded_price;
|
||||||
})
|
})
|
||||||
document.getElementById('total-item').innerText = 'Items :' + cartData.length;
|
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('total-price').innerText = 'Total Amount : $' + sum;
|
||||||
|
document.getElementById('cart-total').innerText = 'Total Amount : $' + sum;
|
||||||
|
|
||||||
}
|
}
|
||||||
document.getElementById('shopping-cart').addEventListener('click', cartToggle);
|
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(){
|
function cartToggle(){
|
||||||
if(cartData.length > 0){
|
if(cartData.length > 0){
|
||||||
document.getElementById('food-items').classList.toggle('food-items');
|
document.getElementById('food-items').classList.toggle('food-items');
|
||||||
document.getElementById('category-list').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('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');
|
document.getElementById('checkout').classList.toggle('cart-toggle');
|
||||||
flag = true;
|
flag = true;
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
alert('Currently no item in the cart');
|
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