Skip to content

Commit

Permalink
first prototype design complete
Browse files Browse the repository at this point in the history
  • Loading branch information
@MahdiMajdian
MahdiMajdian committed May 25, 2021
0 parents commit a97f8c5
Show file tree
Hide file tree
Showing 9 changed files with 678 additions and 0 deletions.
Binary file added assets/Effra_Std_Rg.woff
Binary file not shown.
Binary file added assets/haeder.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/header-img.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/plate-1.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/plate-2.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/plate-3.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
83 changes: 83 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<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>
</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()">
<i class="fa fa-times"></i>
</div>
<img src="assets/plate-1.png" alt="" />
<div class="row w-100 m-0 p-0 mt-5 pt-5 text-white">
<div class="col-12 p-0">
<div class="row d-flex no-gutters justify-content-center">
<div class="col-12 text-center mt-4 pop-title" id="fff">Spicy Rote Pasta and Cheese</div>
<div class="col-4 text-center p-4"><span class="pop-price">139.01</span><span style="color: #b3ffb0">$</span></div>
<div class="col-4 text-center p-4"><span class="pop-rate">4.6</span> <i class="fa fa-star" style="color: #fff068"></i></div>
<div class="col-12 px-5 pt-4">
<div class="row no-gutters">
<div class="col-6">
<div class="qt rounded-pill d-flex justify-content-around">
<i class="fa fa-minus text-white pop-minus" id="pop-minus"></i>
<p class="m-0 my-auto pop-count">2</p>
<i class="fa fa-plus text-white pop-plus" onclick="pop"></i>
</div>
</div>
<div class="col-6 my-auto text-right">Total: <span class="pop-total"></span><span style="color: #b3ffb0">$</span></div>
</div>
</div>
</div>
</div>
<div class="col-12"></div>
</div>
</div>
</div>
<div class="content">
<div class="container pt-5 flex" id="list"></div>
</div>
<div class="panel d-flex flex-column justify-content-between align-items-center">
<div class="cart container 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">
<p class="mb-2" style="font-size: 1.4rem; font-weight: normal">Discount Code?</p>
<div class="d-flex mb-3">
<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>
</div>
</div>
<div class="details-box rounded-pill mx-auto mb-2 mt-3 py-2">
<p class="details m-0">Price: <span class="checkout-price"></span></span></p>
<p class="details m-0">Taxes: <span class="checkout-taxes"></span></p>
<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>
</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>
</html>
257 changes: 257 additions & 0 deletions main.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,257 @@
const list = $('#list');

function closePopUp() {
$('#popup').attr('style', "display:none;");
cart.renderCart()
}

function getItemCount(id) {
const cartItem = cart.items.find((i) => i.id === id)
return (typeof cartItem !== "undefined") ? cartItem.count : 0;
}

function getItem(id) {
return cart.items.find((i) => i.id === id)
}
const foods = [{
id: 1,
name: 'Spicy Rote Pasta and Cheese',
img: 'assets/plate-1.png',
price: 139.01,
rating: 3.9,
},
{
id: 2,
name: 'Cured Salmon',
img: 'assets/plate-2.png',
price: 29.99,
rating: 4.5,
},
{
id: 3,
name: 'Poke with Chicken',
img: 'assets/plate-3.png',
price: 34.45,
rating: 5.0,
},
{
id: 4,
name: 'Macaroni baby with red sauce',
img: 'assets/plate-1.png',
price: 15.99,
rating: 2.8,
},
{
id: 5,
name: 'Stake Beef with special oil',
img: 'assets/plate-2.png',
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) {
this.items = this.items.map(item => {
if (element.count === 0 && count < 0) {
return item
} else {
return item.id === id ? {
...item,
count: element.count + count
} : item
}
})
this.items = this.items.filter(item => item.count)

} else {
if (count > 0) {
this.items.push({
...item,
count: 1
})
}
}
renderMain()
this.renderCart()
this.renderCheckout()
this.renderCheckout()
},
removeItem(id) {
this.items = this.items.filter(item => item.id !== id)
renderMain()
this.renderCart()
this.renderCheckout()
},
calculatePrice() {
return this.items.reduce((total, food) => total + (food.count * food.price), 0).toFixed(2)
},
calculateTax() {
return (this.calculatePrice() * 0.09).toFixed(2)
},
calculateDiscount() {
return (this.calculatePrice() * this.discount).toFixed(2)
},
calculateTotal() {
const foodPrice = this.calculatePrice()
const foodTaxes = this.calculateTax()
const foodDiscount = this.calculateDiscount()

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 {
$('.empty-cart').attr('style', 'display:none;')

const result = this.items.map(item => {
return `
<div class="container border-bottom border-light pb-1 mb-3">
<div class="row">
<div class="col-12 d-flex justify-content-between mb-1">
<p class="m-0 cart-title">${item.name}</p>
<i class="fa fa-times my-auto remove-item" onclick="cart.removeItem(${item.id})"></i>
</div>
<div class="col-12 d-flex justify-content-between">
<div class="cart-count d-flex">
<i class="fa fa-minus my-auto px-2 mb-0" onclick="cart.updateItem(${item.id} , -1 )"></i>
<p class="mx-2 my-0">${item.count}</p>
<i class="fa fa-plus my-auto px-2 mb-0" onclick="cart.updateItem(${item.id} , 1 )"></i>
</div>
<div class="cart-price">${item.price}$</div>
</div>
</div>
</div>
`
})
$('.cart').html(result.join(''))
}

},
renderCheckout() {
$('.checkout-price').html(this.calculatePrice() + '$')
$('.checkout-taxes').html(this.calculateTax() + '$')
$('.checkout-discount').html(this.calculateDiscount() + '$')
$('.checkout-total').html(this.calculateTotal() + '$')
},
checkDiscount() {
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;")

// });
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;")
// });

}
}
}
//change the number of items of the selected food
function popupCount(id, count) {
cart.updateItem(id, count, foods[id - 1])

const cartItemCount = getItemCount(id)
$('#popup .pop-count').html(cartItemCount);
$('#popup .pop-total').html((cartItemCount * foods[id - 1].price).toFixed(2));
renderMain()
cart.renderCart()
}

//Render PopUp screen
function renderPopup(id) {
//Render elements
const index = id - 1
$('#popup img').attr('src', foods[index].img);
$('#popup .pop-title').html(foods[index].name);
$('#popup .pop-price').html(foods[index].price);
$('#popup .pop-rate').html(foods[index].rating);

const cartItemCount = getItemCount(id)

$('#popup .pop-count').html(cartItemCount);
$('#popup .pop-total').html((cartItemCount * foods[index].price).toFixed(2));
//Add items
$('#popup .pop-plus').attr('onclick', `popupCount(${id},1)`)
//Remove items
$('#popup .pop-minus').attr('onclick', `popupCount(${id}, -1)`)
$('#popup').attr('style', "display:grid;");
}

//Render Main List
function renderMain() {
const result = foods.map((item, index) => {

const cartItemCount = getItemCount(item.id)
return `
<div class="box" onclick="renderPopup(${index+1})">
<img src="${item.img}" alt="" />
<div class="rating">${item.rating} <i class="fa fa-star"></i></div>
<p class="m-0">${item.name}</p>
<h5><span>$</span>${item.price}</h5>
<h6>${cartItemCount}</h6>
</div>
`

})
list.html(result.join(''))
}




cart.renderCheckout()
renderMain()
Loading

0 comments on commit a97f8c5

Please sign in to comment.