made changes

restaurant_website/items.js

@@ -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,

restaurant_website/order.css

@@ -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;
+    }   
+}
+
 
 

restaurant_website/order.html

@@ -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>

restaurant_website/order.js

@@ -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);
+    })
 }