From bd7e83a5365d98b25f3c76f489a6331c009bdfb8 Mon Sep 17 00:00:00 2001
From: Mahdi Majdian <mahdi2011.shz@gmail.com>
Date: Tue, 25 May 2021 22:42:19 +0430
Subject: [PATCH] made responsive for tablets

---
 index.html |  50 +++++----
 main.js    |  84 +++++-----------
 style.css  | 289 ++++++++++++++++++++++++++++++++++++-----------------
 3 files changed, 252 insertions(+), 171 deletions(-)
diff --git a/index.html b/index.html
index 3a4eb81..37f2fdc 100644
--- a/index.html
+++ b/index.html
@@ -7,20 +7,15 @@
 		<link rel="stylesheet" href="style.css" />
 		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous" />
 		<script src="https://kit.fontawesome.com/13e30f32fe.js" crossorigin="anonymous"></script>
-		<title>Mahdi Majdian</title>
+		<title>Restaurant App</title>
+
 	</head>
 	<body>
-		<div class="header">
-			<div class="header-overlay"></div>
-			<div class="header-content">
-				<div class="header-img"></div>
-				<div class="header-p1">Eat Healthy</div>
-				<div class="header-p2">Live Healthy</div>
-			</div>
-		</div>
-		<div class="box-overlay" style="display: none" id="popup">
-			<div class="order">
-				<div class="close" id="close" onclick="closePopUp()">
+
+		<!-- Popup Section -->
+		<div class="popup" style="display: none" id="popup">
+			<div class="popup__order">
+				<div class="popup__close" id="close" onclick="closePopUp()">
 					<i class="fa fa-times"></i>
 				</div>
 				<img src="assets/plate-1.png" alt="" />
@@ -48,24 +43,39 @@
 				</div>
 			</div>
 		</div>
+
+		<!-- Header Section -->
+		<header class="header">
+			<div class="header-overlay"></div>
+			<div class="header-content">
+				<div class="header-img"></div>
+				<div class="header-p1">Eat Healthy</div>
+				<div class="header-p2">Live Healthy</div>
+			</div>
+		</header>
+
+		<!-- Main Section containing list of foods -->
 		<div class="content">
 			<div class="container pt-5 flex" id="list"></div>
 		</div>
+
+		<!-- Right Panel -->
 		<div class="panel d-flex flex-column justify-content-between align-items-center">
-			<div class="cart container pt-4">
+			<!-- Top Cart Section -->
+			<div class="cart container-fluid pt-4">
 				<div class="empty-cart text-center pb-4">
 					<i class="fa fa-shopping-cart shopping-cart"></i>
 					<p class="m-0">Your shopping cart is empty!</p>
 				</div>
-				
 			</div>
-			<div class="container text-center text-white">
+
+			<!-- Bottom Checkout section -->
+			<div class="container-fluid text-center text-white">
 				<p class="mb-2" style="font-size: 1.4rem; font-weight: normal">Discount Code?</p>
-				<div class="d-flex mb-3">
+				<div class="d-flex mb-3	justify-content-center">
 					<div class="check-code" onclick="cart.checkDiscount()">
 						<input class="w-100 rounded-pill px-4 py-1" placeholder="code" type="text" />
-
-						<i class="fa fa-check" id="hghg"></i>
+						<i class="fa fa-check" id="check-discount"></i>
 					</div>
 				</div>
 				<div class="details-box rounded-pill mx-auto mb-2 mt-3 py-2">
@@ -74,9 +84,11 @@
 					<p class="details m-0">Discount: <span class="checkout-discount"></span></p>
 				</div>
 				<p style="font-size: 2rem">Total: <span class="checkout-total"></span></p>
-				<div class="submit-order rounded-pill py-2 px-4">Place Order</div>
+				<div class="submit-order mx-auto rounded-pill py-2 px-4">Place Order</div>
 			</div>
 		</div>
+
+		
 		<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
 		<script src="main.js"></script>
 	</body>
diff --git a/main.js b/main.js
index 0b39cb8..fe33119 100644
--- a/main.js
+++ b/main.js
@@ -5,6 +5,8 @@ function closePopUp() {
     cart.renderCart()
 }
 
+
+//Similar to Null Object Design Pattern 
 function getItemCount(id) {
     const cartItem = cart.items.find((i) => i.id === id)
     return (typeof cartItem !== "undefined") ? cartItem.count : 0;
@@ -48,39 +50,11 @@ const foods = [{
         price: 12.99,
         rating: 3.6,
     },
-    {
-        id: 6,
-        name: 'Stake Beef with special oil',
-        img: 'assets/plate-2.png',
-        price: 12.99,
-        rating: 3.6,
-    },
-    {
-        id: 7,
-        name: 'Stake Beef with special oil',
-        img: 'assets/plate-2.png',
-        price: 12.99,
-        rating: 3.6,
-    },
-    {
-        id: 8,
-        name: 'Stake Beef with special oil',
-        img: 'assets/plate-2.png',
-        price: 12.99,
-        rating: 3.6,
-    },
-    {
-        id: 9,
-        name: 'Stake Beef with special oil',
-        img: 'assets/plate-2.png',
-        price: 12.99,
-        rating: 3.6,
-    },
+   
 ]
 
 const cart = {
     items: [],
-    discount: 0,
     updateItem(id, count, item) {
         const element = getItem(id)
         if (element) {
@@ -96,13 +70,13 @@ const cart = {
             })
             this.items = this.items.filter(item => item.count)
 
-        } else {
-            if (count > 0) {
-                this.items.push({
-                    ...item,
-                    count: 1
-                })
-            }
+        } else if (count > 0) {
+
+            this.items.push({
+                ...item,
+                count: 1
+            })
+
         }
         renderMain()
         this.renderCart()
@@ -115,6 +89,9 @@ const cart = {
         this.renderCart()
         this.renderCheckout()
     },
+
+    discount: 0,
+
     calculatePrice() {
         return this.items.reduce((total, food) => total + (food.count * food.price), 0).toFixed(2)
     },
@@ -132,13 +109,7 @@ const cart = {
         return (parseFloat(foodPrice) + parseFloat(foodTaxes) - foodDiscount).toFixed(2)
     },
     renderCart() {
-        if (this.items.length === 0) {
-            $('.cart').html(`<div class="empty-cart text-center pb-4">
-            <i class="fa fa-shopping-cart shopping-cart"></i>
-            <p class="m-0">Your shopping cart is empty!</p>
-        </div>`)
-
-        } else {
+        if (this.items.length) {
             $('.empty-cart').attr('style', 'display:none;')
 
             const result = this.items.map(item => {
@@ -162,8 +133,14 @@ const cart = {
                 `
             })
             $('.cart').html(result.join(''))
+        } else {
+            $('.cart').html(
+                `<div class="empty-cart text-center pb-4">
+                 <i class="fa fa-shopping-cart shopping-cart"></i>
+                 <p class="m-0">Your shopping cart is empty!</p>
+                 </div>`
+            )
         }
-
     },
     renderCheckout() {
         $('.checkout-price').html(this.calculatePrice() + '$')
@@ -175,28 +152,13 @@ const cart = {
         const code = $('.check-code input').val();
         if (code === "hey") {
             this.discount = 0.2
-            document.getElementById('hghg').style.background = "#00c341"
-            // $(".check-code i").mousedown(function () {
-                //     $(this).attr("style", "background: #009030;")
-            // });
-            // $(".check-code i").mouseup(function () {
-                //     $(this).attr("style", "background: #00c341;")
+            document.getElementById('check-discount').style.background = "#00c341"
 
-            // });
-            console.log(this.discount)
             this.renderCheckout()
         } else {
             this.discount = 0
             this.renderCheckout()
-            document.getElementById('hghg').style.background = "#ffa600"
-            // $(".check-code i").mouseup(function () {
-                //     $(this).attr("style", "background: #ffa600;")
-
-            // });
-            // $(".check-code i").mousedown(function () {
-            //     $(this).attr("style", "background: #ff7b00;")
-            // });
-            
+            document.getElementById('check-discount').style.background = "#ffa600"
         }
     }
 }
diff --git a/style.css b/style.css
index 290f4dd..7f7fc7d 100644
--- a/style.css
+++ b/style.css
@@ -19,6 +19,7 @@ body {
 	overflow-x: hidden;
 }
 
+/* -----------------------------------------------------------------Header Section */
 .header {
 	height: 15rem;
 	width: 100%;
@@ -31,7 +32,6 @@ body {
 	background: rgb(255, 255, 255);
 	border-radius: 5rem 5rem 0 0;
 	position: absolute;
-	/* box-shadow: 0px -6px 6px rgba(0, 0, 0, 0.2); */
 	bottom: 0;
 }
 .header-content {
@@ -57,6 +57,7 @@ body {
 	font-size: 2.8rem;
 	font-family: Effra;
 	font-weight: bold;
+	text-align: center;
 	text-transform: uppercase;
 	position: absolute;
 	right: calc(50% + 9rem);
@@ -70,12 +71,92 @@ body {
 	font-family: Effra;
 	font-weight: bold;
 	text-transform: uppercase;
+	text-align: center;
 	position: absolute;
 	left: calc(50% + 9rem);
 	top: 50%;
 	transform: translateY(-50%);
 	user-select: none;
 }
+
+/* ----------------------------------------------------------------Popup box design */
+.popup {
+	position: absolute;
+	width: 100vw;
+	height: 100vh;
+	top: 0;
+	left: 0;
+	z-index: 5;
+	animation: blurs 0.2s forwards;
+	display: grid;
+	place-items: center;
+	background-color: rgba(0, 0, 0, 0.6);
+}
+@keyframes blurs {
+	0% {
+		backdrop-filter: blur(0px);
+	}
+	100% {
+		backdrop-filter: blur(3px);
+	}
+}
+.popup__order {
+	width: 35rem;
+	height: 25rem;
+	background: linear-gradient(45deg, #ff7300 -10%, #ffd13a 110%);
+	border-top: 3px solid rgba(255, 255, 255, 0.7);
+	border-right: 3px solid rgba(255, 255, 255, 0.7);
+	border-radius: 2rem;
+	font-size: 2rem;
+	position: relative;
+}
+.popup__order img {
+	width: 14rem;
+	height: 14rem;
+	position: absolute;
+	top: 0;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.25));
+	user-select: none;
+}
+.popup__close {
+	position: absolute;
+	top: 0;
+	right: 0;
+	margin: 1rem;
+}
+.popup__close > i {
+	background-color: white;
+	border-radius: 50%;
+	width: 2rem;
+	height: 2rem;
+	color: #ffd13a;
+	display: grid;
+	place-items: center;
+}
+.popup__count {
+	width: 10rem;
+	height: 4rem;
+	background-color: #fff;
+	color: #ff9a00;
+	user-select: none;
+}
+.popup__count i {
+	width: 3rem;
+	height: 3rem;
+	margin: auto 0;
+	background-color: #ff9a00;
+	border-radius: 50%;
+	font-size: 75%;
+	display: grid;
+	place-items: center;
+}
+.popup__count i:active {
+	background-color: #ff7b00;
+}
+
+/*  -----------------------------------------------------------Main section layout  */
 .content {
 	position: absolute;
 	top: 10rem;
@@ -156,83 +237,7 @@ body {
 	place-items: center;
 	border-radius: 50%;
 }
-.box-overlay {
-	position: absolute;
-	width: 100vw;
-	height: 100vh;
-	top: 0;
-	left: 0;
-	z-index: 5;
-	animation: blurs 0.2s forwards;
-	display: grid;
-	place-items: center;
-	background-color: rgba(0, 0, 0, 0.6);
-}
-@keyframes blurs {
-	0% {
-		backdrop-filter: blur(0px);
-	}
-	100% {
-		backdrop-filter: blur(3px);
-	}
-}
-.order {
-	width: 35rem;
-	height: 25rem;
-	/* background-color: white; */
-	/* background-color: #FF9A00; */
-	background: linear-gradient(45deg, #ff7300 -10%, #ffd13a 110%);
-	border-top: 3px solid rgba(255, 255, 255, 0.7);
-	border-right: 3px solid rgba(255, 255, 255, 0.7);
-	border-radius: 2rem;
-	font-size: 2rem;
-	position: relative;
-}
-.order img {
-	width: 14rem;
-	height: 14rem;
-	position: absolute;
-	top: 0;
-	left: 50%;
-	transform: translate(-50%, -50%);
-	filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.25));
-	user-select: none;
-}
-.close {
-	position: absolute;
-	top: 0;
-	right: 0;
-	margin: 1rem;
-}
-.close > i {
-	background-color: white;
-	border-radius: 50%;
-	width: 2rem;
-	height: 2rem;
-	color: #ffd13a;
-	display: grid;
-	place-items: center;
-}
-.qt {
-	width: 10rem;
-	height: 4rem;
-	background-color: #fff;
-	color: #ff9a00;
-	user-select: none;
-}
-.qt i {
-	width: 3rem;
-	height: 3rem;
-	margin: auto 0;
-	background-color: #ff9a00;
-	border-radius: 50%;
-	font-size: 75%;
-	display: grid;
-	place-items: center;
-}
-.qt i:active {
-	background-color: #ff7b00;
-}
+/* ----------------------------Right Panel containing Cart items and checkout options */
 .panel {
 	width: 20rem;
 	position: absolute;
@@ -242,6 +247,7 @@ body {
 	border-radius: 0 0rem 0 0;
 	background-color: rgb(64, 47, 136);
 }
+/* ---------------Cart Section */
 .cart {
 	scroll-behavior: smooth;
 	overflow-y: scroll;
@@ -256,7 +262,7 @@ body {
 .cart::-webkit-scrollbar {
 	display: none;
 }
-.remove-item{
+.remove-item {
 	background: #402f88;
 	color: #fff;
 	border-radius: 50%;
@@ -265,12 +271,13 @@ body {
 	display: grid !important;
 	place-items: center;
 }
-.cart-count p{
+.cart-count p {
 	font-size: 1.5rem;
 }
-.cart-price{
+.cart-price {
 	font-size: 1.5rem;
 }
+/* ---------------Checkout Section */
 .check-code {
 	display: grid;
 	place-items: center;
@@ -298,23 +305,20 @@ body {
 	background: #ffa600;
 	color: white;
 	font-size: 1.5rem;
-	border-top-right-radius:50%;
-	border-bottom-right-radius:50%;
+	border-top-right-radius: 50%;
+	border-bottom-right-radius: 50%;
 	place-items: center;
 }
-.check-code i:active{
-	/* background-color: #ff7b00; */
-}
-.details{
-	/* font-weight: normal; */
+
+.details {
 	font-size: 1.3rem;
 	margin: 0.5rem 0;
 }
-.checkout-total{
+.checkout-total {
 	color: #76ff71;
 	font-size: 2rem;
 }
-.details-box{
+.details-box {
 	width: 100%;
 	margin: 1rem;
 	background: #fff;
@@ -329,10 +333,113 @@ body {
 }
 .submit-order:active {
 	background-color: #ff9d00;
-	background: linear-gradient(0deg ,#ffc13b , #f08800);
+	background: linear-gradient(0deg, #ffc13b, #f08800);
 }
+
+/* -------------------------------------------------------------------Media queries */
 @media screen and (max-width: 1441px) {
 	.box {
 		margin: 1rem;
 	}
+	.header-img {
+		width: 14rem;
+	}
+	.header-p1 {
+		font-size: 1.5rem;
+	}
+	.header-p2 {
+		font-size: 1.5rem;
+	}
+}
+@media screen and (max-width: 768px) {
+	.header-content {
+		width: 100%;
+	}
+	.header-img {
+		width: 12rem;
+	}
+	.header-p1 {
+		font-size: 1.5rem;
+		right: calc(50% + 5rem);
+	}
+	.header-p2 {
+		font-size: 1.5rem;
+		left: calc(50% + 5rem);
+	}
+
+	.content {
+		top: 10rem;
+		right: 0;
+		left: 0;
+		bottom: 0;
+		overflow-x: hidden;
+		
+	}
+
+	.panel {
+		width: 100%;
+		position: absolute;
+		top: calc(100vh + 10rem);
+		height: calc(100vh - 10rem);
+		right: 0;
+	}
+	.details-box {
+		width: 75%;
+		margin: 1rem;
+		background: #fff;
+		color: rgb(51, 51, 51);
+	}
+	.submit-order {
+		width: 75%;
+	}
+	.popup__order {
+		width: 80%;
+		height: 25rem;
+	}
+}
+@media screen and (max-width: 500px) {
+	
+	.header-img {
+		width: 8rem;
+	}
+	
+	.content {
+		top: 10rem;
+		right: 0;
+		left: 0;
+		bottom: 0;
+		overflow-x: hidden;
+		
+	}
+	
+	.panel {
+		width: 100%;
+		position: absolute;
+		top: 100vh;
+		height: calc(100vh - 10rem);
+		right: 0;
+	}
+	.details-box {
+		width: 75%;
+		margin: 1rem;
+		background: #fff;
+		color: rgb(51, 51, 51);
+	}
+	.submit-order {
+		width: 75%;
+	}
+	.header-overlay {
+	
+		border-radius:0;
+		
+	}
+	.box {
+		width: 100%;
+		height: 15rem;
+		border-radius: 1.5rem;
+		margin: 1rem 0;
+		background: linear-gradient(-60deg, #c7afff, #ffc456);
+		position: relative;
+		user-select: none;
+	}
 }
