-
+
+
+
+
+
+
+
+
+
+
+
+ 
@@ -48,24 +43,39 @@
+
+
+ Eat Healthy
+ Live Healthy
+
-
+
+
-
-
Your shopping cart is empty!
+
+
+
+
+
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(`
Discount Code?
-
+
-
-
+
@@ -74,9 +84,11 @@
Discount:
Total:
-Place Order
+ Place Order
-
-
`)
-
- } 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(
+ `Your shopping cart is empty!
-
+
+
`
+ )
}
-
},
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;
+ }
}
Your shopping cart is empty!
+