made changes
This commit is contained in:
JSriwongsa
parent
2aed255b65
commit
2034cf9160
5 changed files with 162 additions and 175 deletions
|
|
@ -2,25 +2,25 @@ const foodItem = [
|
|||
{
|
||||
id:1,
|
||||
name: 'Edamame',
|
||||
category: 'appetizer',
|
||||
category: 'Appetizer',
|
||||
rating: 4.3,
|
||||
price:6.00,
|
||||
price:5.99,
|
||||
img:'images/order/1.jpg',
|
||||
quantity:1
|
||||
},
|
||||
{
|
||||
id:2,
|
||||
name: 'Spicy Edamame',
|
||||
category: 'appetizer',
|
||||
category: 'Appetizer',
|
||||
rating: 4.3,
|
||||
price:6.00,
|
||||
price:5.99,
|
||||
img:'images/order/2.jpg',
|
||||
quantity:1
|
||||
},
|
||||
{
|
||||
id:3,
|
||||
name: 'Gyoza',
|
||||
category: 'appetizer',
|
||||
category: 'Appetizer',
|
||||
rating: 4.3,
|
||||
price:7.99,
|
||||
img:'images/order/3.jpg',
|
||||
|
|
@ -29,7 +29,7 @@ const foodItem = [
|
|||
{
|
||||
id:4,
|
||||
name: 'Takoyaki',
|
||||
category: 'appetizer',
|
||||
category: 'Appetizer',
|
||||
rating: 4.3,
|
||||
price:6.99,
|
||||
img:'images/order/4.jpg',
|
||||
|
|
@ -38,7 +38,7 @@ const foodItem = [
|
|||
{
|
||||
id:5,
|
||||
name: 'Ebi Okonomiyaki',
|
||||
category: 'appetizer',
|
||||
category: 'Appetizer',
|
||||
rating: 4.3,
|
||||
price:13.99,
|
||||
img:'images/order/5.jpg',
|
||||
|
|
@ -47,7 +47,7 @@ const foodItem = [
|
|||
{
|
||||
id:6,
|
||||
name: 'Sake Carpaccio',
|
||||
category: 'appetizer',
|
||||
category: 'Appetizer',
|
||||
rating: 4.3,
|
||||
price:12.99,
|
||||
img:'images/order/6.jpg',
|
||||
|
|
@ -56,7 +56,7 @@ const foodItem = [
|
|||
{
|
||||
id:7,
|
||||
name: 'Hamachi Carpaccio',
|
||||
category: 'appetizer',
|
||||
category: 'Appetizer',
|
||||
rating: 4.3,
|
||||
price:13.99,
|
||||
img:'images/order/7.jpg',
|
||||
|
|
@ -65,7 +65,7 @@ const foodItem = [
|
|||
{
|
||||
id:8,
|
||||
name: 'Soft Shell Crab',
|
||||
category: 'appetizer',
|
||||
category: 'Appetizer',
|
||||
rating: 4.3,
|
||||
price:12.99,
|
||||
img:'images/order/8.jpg',
|
||||
|
|
@ -74,7 +74,7 @@ const foodItem = [
|
|||
{
|
||||
id:9,
|
||||
name: 'Shrimp Tempura',
|
||||
category: 'appetizer',
|
||||
category: 'Appetizer',
|
||||
rating: 4.3,
|
||||
price:13.99,
|
||||
img:'images/order/9.jpg',
|
||||
|
|
@ -83,7 +83,7 @@ const foodItem = [
|
|||
{
|
||||
id:10,
|
||||
name: 'Miso Soup',
|
||||
category: 'soup',
|
||||
category: 'Soup',
|
||||
rating: 4.3,
|
||||
price:3.99,
|
||||
img:'images/order/10.jpg',
|
||||
|
|
@ -92,7 +92,7 @@ const foodItem = [
|
|||
{
|
||||
id:11,
|
||||
name: 'Spicy Miso Soup',
|
||||
category: 'soup',
|
||||
category: 'Soup',
|
||||
rating: 4.3,
|
||||
price:3.99,
|
||||
img:'images/order/11.jpg',
|
||||
|
|
@ -101,7 +101,7 @@ const foodItem = [
|
|||
{
|
||||
id:12,
|
||||
name: 'House Salad',
|
||||
category: 'salad',
|
||||
category: 'Salad',
|
||||
rating: 4.3,
|
||||
price:6.99,
|
||||
img:'images/order/12.jpg',
|
||||
|
|
@ -110,7 +110,7 @@ const foodItem = [
|
|||
{
|
||||
id:13,
|
||||
name: 'Seaweed Salad',
|
||||
category: 'salad',
|
||||
category: 'Salad',
|
||||
rating: 4.3,
|
||||
price:7.99,
|
||||
img:'images/order/13.jpg',
|
||||
|
|
@ -119,7 +119,7 @@ const foodItem = [
|
|||
{
|
||||
id:14,
|
||||
name: 'Cucumber Salad',
|
||||
category: 'salad',
|
||||
category: 'Salad',
|
||||
rating: 4.3,
|
||||
price:5.99,
|
||||
img:'images/order/14.jpg',
|
||||
|
|
@ -128,7 +128,7 @@ const foodItem = [
|
|||
{
|
||||
id:15,
|
||||
name: 'Tako Su',
|
||||
category: 'salad',
|
||||
category: 'Salad',
|
||||
rating: 4.3,
|
||||
price:8.99,
|
||||
img:'images/order/15.jpg',
|
||||
|
|
@ -137,7 +137,7 @@ const foodItem = [
|
|||
{
|
||||
id:16,
|
||||
name: 'Ebi Su',
|
||||
category: 'salad',
|
||||
category: 'Salad',
|
||||
rating: 4.3,
|
||||
price:7.99,
|
||||
img:'images/order/16.jpg',
|
||||
|
|
@ -146,7 +146,7 @@ const foodItem = [
|
|||
{
|
||||
id:17,
|
||||
name: 'Mixed Sunomono',
|
||||
category: 'salad',
|
||||
category: 'Salad',
|
||||
rating: 4.3,
|
||||
price:11.99,
|
||||
img:'images/order/17.jpg',
|
||||
|
|
@ -155,7 +155,7 @@ const foodItem = [
|
|||
{
|
||||
id:18,
|
||||
name: 'Spicy maguro poke Salad',
|
||||
category: 'salad',
|
||||
category: 'Salad',
|
||||
rating: 4.3,
|
||||
price:12.99,
|
||||
img:'images/order/18.jpg',
|
||||
|
|
@ -164,7 +164,7 @@ const foodItem = [
|
|||
{
|
||||
id:19,
|
||||
name: 'Sake/Smoked Sake',
|
||||
category: 'nigiri',
|
||||
category: 'Nigiri',
|
||||
rating: 4.3,
|
||||
price:7.99,
|
||||
img:'images/order/19.jpg',
|
||||
|
|
@ -173,7 +173,7 @@ const foodItem = [
|
|||
{
|
||||
id:20,
|
||||
name: 'Maguro/Shiro Maguro',
|
||||
category: 'nigiri',
|
||||
category: 'Nigiri',
|
||||
rating: 4.3,
|
||||
price:8.99,
|
||||
img:'images/order/20.jpg',
|
||||
|
|
@ -182,7 +182,7 @@ const foodItem = [
|
|||
{
|
||||
id:21,
|
||||
name: 'Hamachi',
|
||||
category: 'nigiri',
|
||||
category: 'Nigiri',
|
||||
rating: 4.3,
|
||||
price:7.99,
|
||||
img:'images/order/21.jpg',
|
||||
|
|
@ -191,7 +191,7 @@ const foodItem = [
|
|||
{
|
||||
id:22,
|
||||
name: 'Saba',
|
||||
category: 'nigiri',
|
||||
category: 'Nigiri',
|
||||
rating: 4.3,
|
||||
price:8.99,
|
||||
img:'images/order/22.jpg',
|
||||
|
|
@ -200,7 +200,7 @@ const foodItem = [
|
|||
{
|
||||
id:23,
|
||||
name: 'Ebi',
|
||||
category: 'nigiri',
|
||||
category: 'Nigiri',
|
||||
rating: 4.3,
|
||||
price:7.99,
|
||||
img:'images/order/23.jpg',
|
||||
|
|
@ -209,7 +209,7 @@ const foodItem = [
|
|||
{
|
||||
id:24,
|
||||
name: 'Hotate',
|
||||
category: 'nigiri',
|
||||
category: 'Nigiri',
|
||||
rating: 4.3,
|
||||
price:8.99,
|
||||
img:'images/order/24.jpg',
|
||||
|
|
@ -218,7 +218,7 @@ const foodItem = [
|
|||
{
|
||||
id:25,
|
||||
name: 'Kani Kama',
|
||||
category: 'nigiri',
|
||||
category: 'Nigiri',
|
||||
rating: 4.3,
|
||||
price:7.99,
|
||||
img:'images/order/25.jpeg',
|
||||
|
|
@ -227,7 +227,7 @@ const foodItem = [
|
|||
{
|
||||
id:26,
|
||||
name: 'Unagi',
|
||||
category: 'nigiri',
|
||||
category: 'Nigiri',
|
||||
rating: 4.3,
|
||||
price:8.99,
|
||||
img:'images/order/26.jpg',
|
||||
|
|
@ -236,7 +236,7 @@ const foodItem = [
|
|||
{
|
||||
id:27,
|
||||
name: 'Ikura',
|
||||
category: 'nigiri',
|
||||
category: 'Nigiri',
|
||||
rating: 4.3,
|
||||
price:7.99,
|
||||
img:'images/order/27.jpg',
|
||||
|
|
@ -245,7 +245,7 @@ const foodItem = [
|
|||
{
|
||||
id:28,
|
||||
name: 'Masago',
|
||||
category: 'nigiri',
|
||||
category: 'Nigiri',
|
||||
rating: 4.3,
|
||||
price:8.99,
|
||||
img:'images/order/28.jpg',
|
||||
|
|
@ -254,7 +254,7 @@ const foodItem = [
|
|||
{
|
||||
id:29,
|
||||
name: 'Tamago',
|
||||
category: 'nigiri',
|
||||
category: 'Nigiri',
|
||||
rating: 4.3,
|
||||
price:7.99,
|
||||
img:'images/order/29.jpg',
|
||||
|
|
@ -263,7 +263,7 @@ const foodItem = [
|
|||
{
|
||||
id:30,
|
||||
name: 'Wagyu Nigiri',
|
||||
category: 'nigiri',
|
||||
category: 'Nigiri',
|
||||
rating: 4.3,
|
||||
price:12.99,
|
||||
img:'images/order/30.jpeg',
|
||||
|
|
@ -272,7 +272,7 @@ const foodItem = [
|
|||
{
|
||||
id:31,
|
||||
name: 'Sushi A',
|
||||
category: 'sushi',
|
||||
category: 'Sushi-Set',
|
||||
rating: 4.3,
|
||||
price:19.99,
|
||||
img:'images/order/31.jpg',
|
||||
|
|
@ -281,7 +281,7 @@ const foodItem = [
|
|||
{
|
||||
id:32,
|
||||
name: 'Sushi B',
|
||||
category: 'sushi',
|
||||
category: 'Sushi-Set',
|
||||
rating: 4.3,
|
||||
price:23.99,
|
||||
img:'images/order/31.jpg',
|
||||
|
|
@ -290,7 +290,7 @@ const foodItem = [
|
|||
{
|
||||
id:33,
|
||||
name: 'Sashimi A',
|
||||
category: 'sushi',
|
||||
category: 'Sushi-Set',
|
||||
rating: 4.3,
|
||||
price:35.99,
|
||||
img:'images/order/31.jpg',
|
||||
|
|
@ -299,7 +299,7 @@ const foodItem = [
|
|||
{
|
||||
id:34,
|
||||
name: 'Sashimi B',
|
||||
category: 'sushi',
|
||||
category: 'Sushi-Set',
|
||||
rating: 4.3,
|
||||
price:39.99,
|
||||
img:'images/order/31.jpg',
|
||||
|
|
@ -308,7 +308,7 @@ const foodItem = [
|
|||
{
|
||||
id:35,
|
||||
name: 'Super Sashimi',
|
||||
category: 'sushi',
|
||||
category: 'Sushi-Set',
|
||||
rating: 4.3,
|
||||
price:45.99,
|
||||
img:'images/order/31.jpg',
|
||||
|
|
@ -317,7 +317,7 @@ const foodItem = [
|
|||
{
|
||||
id:36,
|
||||
name: 'Tekka',
|
||||
category: 'maki',
|
||||
category: 'Maki',
|
||||
rating: 4.3,
|
||||
price:9.99,
|
||||
img:'images/order/32.jpg',
|
||||
|
|
@ -326,7 +326,7 @@ const foodItem = [
|
|||
{
|
||||
id:37,
|
||||
name: 'Sake',
|
||||
category: 'maki',
|
||||
category: 'Maki',
|
||||
rating: 4.3,
|
||||
price:9.99,
|
||||
img:'images/order/33.jpg',
|
||||
|
|
@ -335,7 +335,7 @@ const foodItem = [
|
|||
{
|
||||
id:38,
|
||||
name: 'Negi Hamachi',
|
||||
category: 'maki',
|
||||
category: 'Maki',
|
||||
rating: 4.3,
|
||||
price:9.99,
|
||||
img:'images/order/34.jpg',
|
||||
|
|
@ -344,7 +344,7 @@ const foodItem = [
|
|||
{
|
||||
id:39,
|
||||
name: 'Ebi',
|
||||
category: 'maki',
|
||||
category: 'Maki',
|
||||
rating: 4.3,
|
||||
price:9.99,
|
||||
img:'images/order/35.jpg',
|
||||
|
|
@ -353,7 +353,7 @@ const foodItem = [
|
|||
{
|
||||
id:40,
|
||||
name: 'Sake Avocado',
|
||||
category: 'maki',
|
||||
category: 'Maki',
|
||||
rating: 4.3,
|
||||
price:9.99,
|
||||
img:'images/order/36.jpg',
|
||||
|
|
@ -362,7 +362,7 @@ const foodItem = [
|
|||
{
|
||||
id:41,
|
||||
name: 'Unagi Q',
|
||||
category: 'maki',
|
||||
category: 'Maki',
|
||||
rating: 4.3,
|
||||
price:9.99,
|
||||
img:'images/order/37.jpg',
|
||||
|
|
@ -371,7 +371,7 @@ const foodItem = [
|
|||
{
|
||||
id:42,
|
||||
name: 'Spicy Scallop',
|
||||
category: 'maki',
|
||||
category: 'Maki',
|
||||
rating: 4.3,
|
||||
price:9.99,
|
||||
img:'images/order/38.jpg',
|
||||
|
|
@ -380,7 +380,7 @@ const foodItem = [
|
|||
{
|
||||
id:43,
|
||||
name: 'Spicy Tako',
|
||||
category: 'maki',
|
||||
category: 'Maki',
|
||||
rating: 4.3,
|
||||
price:9.99,
|
||||
img:'images/order/39.jpg',
|
||||
|
|
@ -389,7 +389,7 @@ const foodItem = [
|
|||
{
|
||||
id:44,
|
||||
name: 'Spider',
|
||||
category: 'maki',
|
||||
category: 'Maki',
|
||||
rating: 4.3,
|
||||
price:12.99,
|
||||
img:'images/order/40.jpg',
|
||||
|
|
@ -398,7 +398,7 @@ const foodItem = [
|
|||
{
|
||||
id:45,
|
||||
name: 'Alaska',
|
||||
category: 'maki',
|
||||
category: 'Maki',
|
||||
rating: 4.3,
|
||||
price:13.99,
|
||||
img:'images/order/41.jpg',
|
||||
|
|
@ -407,7 +407,7 @@ const foodItem = [
|
|||
{
|
||||
id:46,
|
||||
name: 'Boston',
|
||||
category: 'maki',
|
||||
category: 'Maki',
|
||||
rating: 4.3,
|
||||
price:13.99,
|
||||
img:'images/order/42.jpg',
|
||||
|
|
@ -416,7 +416,7 @@ const foodItem = [
|
|||
{
|
||||
id:47,
|
||||
name: 'Philadelphia',
|
||||
category: 'maki',
|
||||
category: 'Maki',
|
||||
rating: 4.3,
|
||||
price:13.99,
|
||||
img:'images/order/43.jpg',
|
||||
|
|
@ -425,7 +425,7 @@ const foodItem = [
|
|||
{
|
||||
id:48,
|
||||
name: 'California',
|
||||
category: 'maki',
|
||||
category: 'Maki',
|
||||
rating: 4.3,
|
||||
price:13.99,
|
||||
img:'images/order/44.jpg',
|
||||
|
|
@ -434,7 +434,7 @@ const foodItem = [
|
|||
{
|
||||
id:49,
|
||||
name: 'Chicago',
|
||||
category: 'maki',
|
||||
category: 'Maki',
|
||||
rating: 4.3,
|
||||
price:13.99,
|
||||
img:'images/order/45.jpg',
|
||||
|
|
@ -443,7 +443,7 @@ const foodItem = [
|
|||
{
|
||||
id:50,
|
||||
name: 'Sake Donburi',
|
||||
category: 'don',
|
||||
category: 'Donburi',
|
||||
rating: 4.3,
|
||||
price:16.99,
|
||||
img:'images/order/46.jpg',
|
||||
|
|
@ -452,7 +452,7 @@ const foodItem = [
|
|||
{
|
||||
id:51,
|
||||
name: 'Tekka Donburi',
|
||||
category: 'don',
|
||||
category: 'Donburi',
|
||||
rating: 4.3,
|
||||
price:17.99,
|
||||
img:'images/order/47.jpeg',
|
||||
|
|
@ -461,7 +461,7 @@ const foodItem = [
|
|||
{
|
||||
id:52,
|
||||
name: 'Hamachi Donburi',
|
||||
category: 'don',
|
||||
category: 'Donburi',
|
||||
rating: 4.3,
|
||||
price:17.99,
|
||||
img:'images/order/48.jpg',
|
||||
|
|
@ -470,7 +470,7 @@ const foodItem = [
|
|||
{
|
||||
id:53,
|
||||
name: 'Chirashi Donburi',
|
||||
category: 'don',
|
||||
category: 'Donburi',
|
||||
rating: 4.3,
|
||||
price:19.99,
|
||||
img:'images/order/49.jpg',
|
||||
|
|
@ -479,7 +479,7 @@ const foodItem = [
|
|||
{
|
||||
id:54,
|
||||
name: 'Unagi Donburi',
|
||||
category: 'don',
|
||||
category: 'Donburi',
|
||||
rating: 4.3,
|
||||
price:19.99,
|
||||
img:'images/order/50.jpg',
|
||||
|
|
@ -488,7 +488,7 @@ const foodItem = [
|
|||
{
|
||||
id:55,
|
||||
name: 'Hot Green Tea',
|
||||
category: 'drink',
|
||||
category: 'Beverage',
|
||||
rating: 4.3,
|
||||
price:2.99,
|
||||
img:'images/order/51.jpg',
|
||||
|
|
@ -497,7 +497,7 @@ const foodItem = [
|
|||
{
|
||||
id:56,
|
||||
name: 'Iced Green Tea',
|
||||
category: 'drink',
|
||||
category: 'Beverage',
|
||||
rating: 4.3,
|
||||
price:3.99,
|
||||
img:'images/order/52.jpg',
|
||||
|
|
@ -506,7 +506,7 @@ const foodItem = [
|
|||
{
|
||||
id:57,
|
||||
name: 'Coke/Diet',
|
||||
category: 'drink',
|
||||
category: 'Beverage',
|
||||
rating: 4.3,
|
||||
price:2.59,
|
||||
img:'images/order/53.png',
|
||||
|
|
@ -515,7 +515,7 @@ const foodItem = [
|
|||
{
|
||||
id:58,
|
||||
name: 'Bottled Water',
|
||||
category: 'drink',
|
||||
category: 'Beverage',
|
||||
rating: 4.3,
|
||||
price:1.99,
|
||||
img:'images/order/54.png',
|
||||
|
|
@ -524,7 +524,7 @@ const foodItem = [
|
|||
{
|
||||
id:59,
|
||||
name: 'Matcha Ice Cream',
|
||||
category: 'dessert',
|
||||
category: 'Dessert',
|
||||
rating: 4.3,
|
||||
price:5.99,
|
||||
img:'images/order/55.jpg',
|
||||
|
|
@ -533,7 +533,7 @@ const foodItem = [
|
|||
{
|
||||
id:60,
|
||||
name: 'Mochi Ice Cream',
|
||||
category: 'dessert',
|
||||
category: 'Dessert',
|
||||
rating: 4.3,
|
||||
price:4.99,
|
||||
img:'images/order/56.jpg',
|
||||
|
|
@ -542,7 +542,7 @@ const foodItem = [
|
|||
{
|
||||
id:61,
|
||||
name: 'Matcha Cheesecake',
|
||||
category: 'dessert',
|
||||
category: 'Dessert',
|
||||
rating: 4.3,
|
||||
price:8.99,
|
||||
img:'images/order/57.jpg',
|
||||
|
|
@ -551,7 +551,7 @@ const foodItem = [
|
|||
{
|
||||
id:62,
|
||||
name: 'Dango',
|
||||
category: 'dessert',
|
||||
category: 'Dessert',
|
||||
rating: 4.3,
|
||||
price:3.99,
|
||||
img:'images/order/58.jpg',
|
||||
|
|
@ -560,7 +560,7 @@ const foodItem = [
|
|||
{
|
||||
id:63,
|
||||
name: 'Taiyaki',
|
||||
category: 'dessert',
|
||||
category: 'Dessert',
|
||||
rating: 4.3,
|
||||
price:6.99,
|
||||
img:'images/order/59.jpg',
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@
|
|||
<div class="menu-item-text">
|
||||
<h3 class="menu-item-heading">
|
||||
<span class="menu-item-name">Edamame</span>
|
||||
<span class="menu-item-price">$6.00</span>
|
||||
<span class="menu-item-price">$5.99</span>
|
||||
</h3>
|
||||
<p class="menu-item-desc">Steamed soybean with salt</p>
|
||||
</div>
|
||||
|
|
@ -59,7 +59,7 @@
|
|||
<div class="menu-item-text">
|
||||
<h3 class="menu-item-heading">
|
||||
<span class="menu-item-name">Spicy Edamame</span>
|
||||
<span class="menu-item-price">$6.00</span>
|
||||
<span class="menu-item-price">$5.99</span>
|
||||
</h3>
|
||||
<p class="menu-item-desc">Steamed soybean with salt & togarashi.</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -92,13 +92,10 @@ body{
|
|||
background: var(--main-color);
|
||||
color: var(--bg-color);
|
||||
}
|
||||
.food-items{
|
||||
|
||||
}
|
||||
#appetizer, #soup, #salad, #nigiri, #sushi, #maki, #don, #drink, #dessert{
|
||||
#Appetizer, #Soup, #Salad, #Nigiri, #Sushi, #Maki, #Donburi, #Beverage, #Dessert{
|
||||
margin-top: 40px;
|
||||
}
|
||||
#appetizer #item-box, #soup #item-box, #salad #item-box, #nigiri #item-box, #sushi #item-box, #maki #item-box, #don #item-box, #drink #item-box, #dessert #item-box{
|
||||
#Appetizer #item-box, #Soup #item-box, #Salad #item-box, #Nigiri #item-box, #Sushi-Set #item-box, #Maki #item-box, #Donburi #item-box, #Beverage #item-box, #Dessert #item-box{
|
||||
background-color: var(--other-color);
|
||||
}
|
||||
#category-name, .menu-items{
|
||||
|
|
@ -214,16 +211,16 @@ body{
|
|||
font-weight: 600;
|
||||
}
|
||||
/*--------------------------------------------------------------------------------------------------------------------------*/
|
||||
#food-items{
|
||||
|
||||
.food-items{
|
||||
display: none;
|
||||
}
|
||||
#category-list{
|
||||
|
||||
}
|
||||
/*--------------------------------------------------------------------------------------------------------------------------*/
|
||||
.cart-toggle{
|
||||
display: none;
|
||||
}
|
||||
/*--------------------------------------------------------------------------------------------------------------------------*/
|
||||
#cart-page{
|
||||
background: var(--other-color);
|
||||
margin: 40px 10px;
|
||||
|
|
@ -287,7 +284,8 @@ body{
|
|||
color: var(--main-color);
|
||||
}
|
||||
#delivery{
|
||||
color: orangered;
|
||||
color: rgb(10, 142, 36);
|
||||
font-weight: 600;
|
||||
}
|
||||
.checkout-btn{
|
||||
outline: none;
|
||||
|
|
|
|||
|
|
@ -39,43 +39,43 @@
|
|||
<div class="utility">
|
||||
<i class="fas fa-search">   Search</i>
|
||||
<i class="fas fa-tags">   Offers</i>
|
||||
<i class="fas fa-shopping-cart" id="shopping-cart">   0 items</i>
|
||||
<i class="fas fa-shopping-cart" id="shopping-cart">   0 Items</i>
|
||||
</div>
|
||||
</div>
|
||||
<div id="food-items">
|
||||
<div id="appetizer">
|
||||
<div id="Appetizer">
|
||||
<p id="category-name">Appetizers</p>
|
||||
</div>
|
||||
|
||||
<div id="soup">
|
||||
<div id="Soup">
|
||||
<p id="category-name">Soup</p>
|
||||
</div>
|
||||
|
||||
<div id="salad">
|
||||
<div id="Salad">
|
||||
<p id="category-name">Sunomono Salad</p>
|
||||
</div>
|
||||
|
||||
<div id="nigiri">
|
||||
<div id="Nigiri">
|
||||
<p id="category-name">Nigiri/Sashimi</p>
|
||||
</div>
|
||||
|
||||
<div id="sushi">
|
||||
<div id="Sushi-Set">
|
||||
<p id="category-name">Sushi/Sashimi Platters</p>
|
||||
</div>
|
||||
|
||||
<div id="maki">
|
||||
<div id="Maki">
|
||||
<p id="category-name">Maki (Rolls)</p>
|
||||
</div>
|
||||
|
||||
<div id="don">
|
||||
<div id="Donburi">
|
||||
<p id="category-name">Donburi</p>
|
||||
</div>
|
||||
|
||||
<div id="drink">
|
||||
<div id="Beverage">
|
||||
<p id="category-name">Beverages</p>
|
||||
</div>
|
||||
|
||||
<div id="dessert">
|
||||
<div id="Dessert">
|
||||
<p id="category-name">Desserts</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -91,18 +91,7 @@
|
|||
<td>Price</td>
|
||||
</thead>
|
||||
<tbody id="table-body">
|
||||
<tr>
|
||||
<td>
|
||||
<img src="images/order/1.jpg" alt="">
|
||||
</td>
|
||||
<td>Edamame</td>
|
||||
<td>
|
||||
<button class="remove-item">-</button>
|
||||
<span>1</span>
|
||||
<button class="add-item">+</button>
|
||||
</td>
|
||||
<td>10</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
|
@ -116,42 +105,6 @@
|
|||
</div>
|
||||
<div id="category-list">
|
||||
<p class="item-menu"> <i class="fa-brands fa-hotjar"></i> Popular Dishes <i class="fa-brands fa-hotjar"></i></p>
|
||||
|
||||
<div class="border"></div>
|
||||
<div class="list-menu">
|
||||
<img src="images/chef1.jpg" alt="">
|
||||
<a href="" class="list-name">   Sake Donburi</a>
|
||||
</div>
|
||||
|
||||
<div class="list-menu">
|
||||
<img src="images/chef2.jpg" alt="">
|
||||
<a href="" class="list-name">   Ebi Okonomiyaki</a>
|
||||
</div>
|
||||
|
||||
<div class="list-menu">
|
||||
<img src="images/chef3.jpg" alt="">
|
||||
<a href="" class="list-name">   Wagyu Nigiri</a>
|
||||
</div>
|
||||
|
||||
<div class="list-menu">
|
||||
<img src="images/chef4.jpg" alt="">
|
||||
<a href="" class="list-name">   Tekka Maki</a>
|
||||
</div>
|
||||
|
||||
<div class="list-menu">
|
||||
<img src="images/order/8.jpg" alt="">
|
||||
<a href="" class="list-name">   Soft Shell Crab</a>
|
||||
</div>
|
||||
|
||||
<div class="list-menu">
|
||||
<img src="images/order/59.jpg" alt="">
|
||||
<a href="" class="list-name">   Taiyaki</a>
|
||||
</div>
|
||||
|
||||
<div class="list-menu">
|
||||
<img src="images/order/58.jpg" alt="">
|
||||
<a href="" class="list-name">   Dango</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="checkout" class="cart-toggle">
|
||||
|
|
|
|||
|
|
@ -1,25 +1,25 @@
|
|||
import {foodItem} from "./items.js";
|
||||
|
||||
function displayItems(){
|
||||
var appetizer = document.getElementById('appetizer');
|
||||
var soup = document.getElementById('soup');
|
||||
var salad = document.getElementById('salad');
|
||||
var nigiri = document.getElementById('nigiri');
|
||||
var sushi = document.getElementById('sushi');
|
||||
var maki = document.getElementById('maki');
|
||||
var don = document.getElementById('don');
|
||||
var drink = document.getElementById('drink');
|
||||
var dessert = document.getElementById('dessert');
|
||||
var appetizer = document.getElementById('Appetizer');
|
||||
var soup = document.getElementById('Soup');
|
||||
var salad = document.getElementById('Salad');
|
||||
var nigiri = document.getElementById('Nigiri');
|
||||
var sushi = document.getElementById('Sushi-Set');
|
||||
var maki = document.getElementById('Maki');
|
||||
var don = document.getElementById('Donburi');
|
||||
var drink = document.getElementById('Beverage');
|
||||
var dessert = document.getElementById('Dessert');
|
||||
|
||||
const appetizerData = foodItem.filter(item => item.category == 'appetizer');
|
||||
const soupData = foodItem.filter(item => item.category == 'soup');
|
||||
const saladData = foodItem.filter(item => item.category == 'salad');
|
||||
const nigiriData = foodItem.filter(item => item.category == 'nigiri');
|
||||
const sushiData = foodItem.filter(item => item.category == 'sushi');
|
||||
const makiData = foodItem.filter(item => item.category == 'maki');
|
||||
const donData = foodItem.filter(item => item.category == 'don');
|
||||
const drinkData = foodItem.filter(item => item.category == 'drink');
|
||||
const dessertData = foodItem.filter(item => item.category == 'dessert');
|
||||
const appetizerData = foodItem.filter(item => item.category == 'Appetizer');
|
||||
const soupData = foodItem.filter(item => item.category == 'Soup');
|
||||
const saladData = foodItem.filter(item => item.category == 'Salad');
|
||||
const nigiriData = foodItem.filter(item => item.category == 'Nigiri');
|
||||
const sushiData = foodItem.filter(item => item.category == 'Sushi-Set');
|
||||
const makiData = foodItem.filter(item => item.category == 'Maki');
|
||||
const donData = foodItem.filter(item => item.category == 'Donburi');
|
||||
const drinkData = foodItem.filter(item => item.category == 'Beverage');
|
||||
const dessertData = foodItem.filter(item => item.category == 'Dessert');
|
||||
|
||||
appetizerData.map(item => {
|
||||
var itemBox = document.createElement('div');
|
||||
|
|
@ -357,6 +357,33 @@ function displayItems(){
|
|||
}
|
||||
displayItems();
|
||||
|
||||
const categoryListData = [...new Map(foodItem.map(item => [item['category'], item])).values()];
|
||||
console.log(categoryListData)
|
||||
|
||||
function categoryLists(){
|
||||
var categoryList = document.getElementById('category-list');
|
||||
|
||||
categoryListData.map(item =>{
|
||||
var listMenu = document.createElement('div');
|
||||
listMenu.setAttribute('class', 'list-menu');
|
||||
|
||||
var listImg = document.createElement('img');
|
||||
listImg.src = item.img;
|
||||
|
||||
var listName = document.createElement('a');
|
||||
listName.setAttribute('class', 'list-name');
|
||||
listName.innerText = item.category;
|
||||
listName.setAttribute('href', '#' + item.category);
|
||||
|
||||
listMenu.appendChild(listImg);
|
||||
listMenu.appendChild(listName);
|
||||
|
||||
var cloneListMenu = listMenu.cloneNode(true);
|
||||
categoryList.appendChild(listMenu);
|
||||
})
|
||||
}
|
||||
categoryLists();
|
||||
|
||||
|
||||
document.querySelectorAll('.add-to-cart').forEach(item => {
|
||||
item.addEventListener('click', addToCart);
|
||||
|
|
@ -371,12 +398,13 @@ function addToCart(){
|
|||
if(index === -1){
|
||||
document.getElementById(itemObject.id).classList.add('toggle-cart');
|
||||
cartData = [...cartData, itemObject];
|
||||
console.log(cartData)
|
||||
}
|
||||
else if(index > -1){
|
||||
alert("Added to cart");
|
||||
}
|
||||
|
||||
document.getElementById('shopping-cart').innerText = '' +cartData.length + 'Items';
|
||||
document.getElementById('shopping-cart').innerText = ' ' +cartData.length + 'Items';
|
||||
//document.getElementById('m-shopping-cart').innerText = '' +cartData.length;
|
||||
|
||||
totalAmount();
|
||||
|
|
@ -389,6 +417,7 @@ function cartItems(){
|
|||
|
||||
cartData.map(item => {
|
||||
var tableRow = document.createElement('tr');
|
||||
|
||||
var rowData1 = document.createElement('td');
|
||||
var img = document.createElement('img');
|
||||
img.src = item.img;
|
||||
|
|
@ -399,19 +428,21 @@ function cartItems(){
|
|||
|
||||
var rowData3 = document.createElement('td');
|
||||
var btn1 = document.createElement('button');
|
||||
btn1.setAttribute('class','remove-item');
|
||||
btn1.innerHTML = '-';
|
||||
btn1.setAttribute('class','drop-item');
|
||||
btn1.innerText = '-';
|
||||
var span = document.createElement('span');
|
||||
span.innerText = item.quantity;
|
||||
var btn2 = document.createElement('button');
|
||||
btn1.setAttribute('class','add-item');
|
||||
btn1.innerHTML = '+';
|
||||
btn2.setAttribute('class','addOn-item');
|
||||
btn2.innerText = '+';
|
||||
|
||||
rowData3.appendChild(btn1);
|
||||
rowData3.appendChild(span);
|
||||
rowData3.appendChild(btn2);
|
||||
|
||||
var rowData4 = document.createElement('td');
|
||||
rowData4.innerText = item.price;
|
||||
var rounded_price = parseFloat((Math.round(item.price * 100) / 100).toFixed(2));
|
||||
rowData4.innerText = rounded_price;
|
||||
|
||||
tableRow.appendChild(rowData1);
|
||||
tableRow.appendChild(rowData2);
|
||||
|
|
@ -420,21 +451,20 @@ function cartItems(){
|
|||
|
||||
tableBody.appendChild(tableRow);
|
||||
})
|
||||
document.querySelectorAll('.add-item').forEach(item => {
|
||||
item.addEventListener('click', addItem);
|
||||
document.querySelectorAll('.addOn-item').forEach(item => {
|
||||
item.addEventListener('click', addOnItem);
|
||||
})
|
||||
document.querySelectorAll('.remove-item').forEach(item => {
|
||||
item.addEventListener('click', removeItem);
|
||||
document.querySelectorAll('.drop-item').forEach(item => {
|
||||
item.addEventListener('click', dropItem);
|
||||
})
|
||||
}
|
||||
|
||||
var currentPrice = 0;
|
||||
|
||||
function addItem(){
|
||||
let itemToAdd = this.parentNode.previousSibliing.innerText;
|
||||
console.log(itemToAdd);
|
||||
|
||||
var addObject = cartData.find(element => element.name = itemToAdd);
|
||||
function addOnItem(){
|
||||
let itemAdd = this.parentNode.previousSibling.innerText;
|
||||
|
||||
var addObject = cartData.find(element => element.name == itemAdd);
|
||||
addObject.quantity += 1;
|
||||
|
||||
currentPrice = (addObject.price*addObject.quantity - addObject.price*(addObject.quantity - 1))/(addObject.quantity - 1);
|
||||
|
|
@ -446,15 +476,17 @@ function addItem(){
|
|||
|
||||
var flag = false;
|
||||
|
||||
function removeItem(){
|
||||
let itemToRemove = this.parentNode.previousSibliing.innerText;
|
||||
let removeObject = cartData.find(element => element.name == itemToRemove);
|
||||
function dropItem(){
|
||||
let itemRemove = this.parentNode.previousSibling.innerText;
|
||||
let removeObject = cartData.find(element => element.name == itemRemove);
|
||||
let ind = cartData.indexOf(removeObject);
|
||||
if(removeObject.quantity > 1){
|
||||
currentPrice = (removeObject.price*removeObject.quantity - removeObject*price*(removeObject.quantity - 1))/(removeObject.quantity);
|
||||
currentPrice = (removeObject.price*removeObject.quantity - removeObject.price*(removeObject.quantity-1))/(removeObject.quantity);
|
||||
removeObject.quantity -= 1;
|
||||
removeObject.price = currentPrice*removeObject.quantity;
|
||||
}
|
||||
else {
|
||||
document.getElementById(removeObject.id).classList.remove('cart-toggle');
|
||||
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;
|
||||
|
|
@ -477,13 +509,17 @@ function removeItem(){
|
|||
function totalAmount(){
|
||||
var sum = 0;
|
||||
cartData.map(item => {
|
||||
sum += item.price;
|
||||
let rounded_price = parseFloat((Math.round(item.price * 100) / 100).toFixed(2));
|
||||
console.log('item price:' + item.price);
|
||||
console.log('rounded price:' + rounded_price);
|
||||
sum += rounded_price;
|
||||
})
|
||||
document.getElementById('total-item').innerText = 'Items :' + cartData.length;
|
||||
document.getElementById('total-price').innerText = 'Total Amount : $ ' + sum;
|
||||
console.log(document.getElementById('total-price').innerText);
|
||||
document.getElementById('total-price').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){
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue