Skip to content

Commit

Permalink
made responsive for tablets
Browse files Browse the repository at this point in the history
  • Loading branch information
@MahdiMajdian
MahdiMajdian committed May 25, 2021
1 parent a97f8c5 commit bd7e83a
Show file tree
Hide file tree
Showing 3 changed files with 252 additions and 171 deletions.
50 changes: 31 additions & 19 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,20 +7,15 @@
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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="" />
Expand Down Expand Up @@ -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">
Expand All @@ -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>
Expand Down
84 changes: 23 additions & 61 deletions main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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) {
Expand All @@ -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()
Expand All @@ -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)
},
Expand All @@ -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 => {
Expand All @@ -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() + '$')
Expand All @@ -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"
}
}
}
Expand Down
Loading

0 comments on commit bd7e83a

Please sign in to comment.