muayjtp/web_design
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

made changes

Browse source
This commit is contained in:
JSriwongsa 2023-06-09 15:22:48 -05:00
parent 2aed255b65
commit 2034cf9160
5 changed files with 162 additions and 175 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

130
restaurant_website/items.js
View file

@ -2,25 +2,25 @@ const foodItem = [
{ {
id:1, id:1,
name: 'Edamame', name: 'Edamame',
category: 'appetizer', category: 'Appetizer',
rating: 4.3, rating: 4.3,
price:6.00, price:5.99,
img:'images/order/1.jpg', img:'images/order/1.jpg',
quantity:1 quantity:1
}, },
{ {
id:2, id:2,
name: 'Spicy Edamame', name: 'Spicy Edamame',
category: 'appetizer', category: 'Appetizer',
rating: 4.3, rating: 4.3,
price:6.00, price:5.99,
img:'images/order/2.jpg', img:'images/order/2.jpg',
quantity:1 quantity:1
}, },
{ {
id:3, id:3,
name: 'Gyoza', name: 'Gyoza',
category: 'appetizer', category: 'Appetizer',
rating: 4.3, rating: 4.3,
price:7.99, price:7.99,
img:'images/order/3.jpg', img:'images/order/3.jpg',
@ -29,7 +29,7 @@ const foodItem = [
{ {
id:4, id:4,
name: 'Takoyaki', name: 'Takoyaki',
category: 'appetizer', category: 'Appetizer',
rating: 4.3, rating: 4.3,
price:6.99, price:6.99,
img:'images/order/4.jpg', img:'images/order/4.jpg',
@ -38,7 +38,7 @@ const foodItem = [
{ {
id:5, id:5,
name: 'Ebi Okonomiyaki', name: 'Ebi Okonomiyaki',
category: 'appetizer', category: 'Appetizer',
rating: 4.3, rating: 4.3,
price:13.99, price:13.99,
img:'images/order/5.jpg', img:'images/order/5.jpg',
@ -47,7 +47,7 @@ const foodItem = [
{ {
id:6, id:6,
name: 'Sake Carpaccio', name: 'Sake Carpaccio',
category: 'appetizer', category: 'Appetizer',
rating: 4.3, rating: 4.3,
price:12.99, price:12.99,
img:'images/order/6.jpg', img:'images/order/6.jpg',
@ -56,7 +56,7 @@ const foodItem = [
{ {
id:7, id:7,
name: 'Hamachi Carpaccio', name: 'Hamachi Carpaccio',
category: 'appetizer', category: 'Appetizer',
rating: 4.3, rating: 4.3,
price:13.99, price:13.99,
img:'images/order/7.jpg', img:'images/order/7.jpg',
@ -65,7 +65,7 @@ const foodItem = [
{ {
id:8, id:8,
name: 'Soft Shell Crab', name: 'Soft Shell Crab',
category: 'appetizer', category: 'Appetizer',
rating: 4.3, rating: 4.3,
price:12.99, price:12.99,
img:'images/order/8.jpg', img:'images/order/8.jpg',
@ -74,7 +74,7 @@ const foodItem = [
{ {
id:9, id:9,
name: 'Shrimp Tempura', name: 'Shrimp Tempura',
category: 'appetizer', category: 'Appetizer',
rating: 4.3, rating: 4.3,
price:13.99, price:13.99,
img:'images/order/9.jpg', img:'images/order/9.jpg',
@ -83,7 +83,7 @@ const foodItem = [
{ {
id:10, id:10,
name: 'Miso Soup', name: 'Miso Soup',
category: 'soup', category: 'Soup',
rating: 4.3, rating: 4.3,
price:3.99, price:3.99,
img:'images/order/10.jpg', img:'images/order/10.jpg',
@ -92,7 +92,7 @@ const foodItem = [
{ {
id:11, id:11,
name: 'Spicy Miso Soup', name: 'Spicy Miso Soup',
category: 'soup', category: 'Soup',
rating: 4.3, rating: 4.3,
price:3.99, price:3.99,
img:'images/order/11.jpg', img:'images/order/11.jpg',
@ -101,7 +101,7 @@ const foodItem = [
{ {
id:12, id:12,
name: 'House Salad', name: 'House Salad',
category: 'salad', category: 'Salad',
rating: 4.3, rating: 4.3,
price:6.99, price:6.99,
img:'images/order/12.jpg', img:'images/order/12.jpg',
@ -110,7 +110,7 @@ const foodItem = [
{ {
id:13, id:13,
name: 'Seaweed Salad', name: 'Seaweed Salad',
category: 'salad', category: 'Salad',
rating: 4.3, rating: 4.3,
price:7.99, price:7.99,
img:'images/order/13.jpg', img:'images/order/13.jpg',
@ -119,7 +119,7 @@ const foodItem = [
{ {
id:14, id:14,
name: 'Cucumber Salad', name: 'Cucumber Salad',
category: 'salad', category: 'Salad',
rating: 4.3, rating: 4.3,
price:5.99, price:5.99,
img:'images/order/14.jpg', img:'images/order/14.jpg',
@ -128,7 +128,7 @@ const foodItem = [
{ {
id:15, id:15,
name: 'Tako Su', name: 'Tako Su',
category: 'salad', category: 'Salad',
rating: 4.3, rating: 4.3,
price:8.99, price:8.99,
img:'images/order/15.jpg', img:'images/order/15.jpg',
@ -137,7 +137,7 @@ const foodItem = [
{ {
id:16, id:16,
name: 'Ebi Su', name: 'Ebi Su',
category: 'salad', category: 'Salad',
rating: 4.3, rating: 4.3,
price:7.99, price:7.99,
img:'images/order/16.jpg', img:'images/order/16.jpg',
@ -146,7 +146,7 @@ const foodItem = [
{ {
id:17, id:17,
name: 'Mixed Sunomono', name: 'Mixed Sunomono',
category: 'salad', category: 'Salad',
rating: 4.3, rating: 4.3,
price:11.99, price:11.99,
img:'images/order/17.jpg', img:'images/order/17.jpg',
@ -155,7 +155,7 @@ const foodItem = [
{ {
id:18, id:18,
name: 'Spicy maguro poke Salad', name: 'Spicy maguro poke Salad',
category: 'salad', category: 'Salad',
rating: 4.3, rating: 4.3,
price:12.99, price:12.99,
img:'images/order/18.jpg', img:'images/order/18.jpg',
@ -164,7 +164,7 @@ const foodItem = [
{ {
id:19, id:19,
name: 'Sake/Smoked Sake', name: 'Sake/Smoked Sake',
category: 'nigiri', category: 'Nigiri',
rating: 4.3, rating: 4.3,
price:7.99, price:7.99,
img:'images/order/19.jpg', img:'images/order/19.jpg',
@ -173,7 +173,7 @@ const foodItem = [
{ {
id:20, id:20,
name: 'Maguro/Shiro Maguro', name: 'Maguro/Shiro Maguro',
category: 'nigiri', category: 'Nigiri',
rating: 4.3, rating: 4.3,
price:8.99, price:8.99,
img:'images/order/20.jpg', img:'images/order/20.jpg',
@ -182,7 +182,7 @@ const foodItem = [
{ {
id:21, id:21,
name: 'Hamachi', name: 'Hamachi',
category: 'nigiri', category: 'Nigiri',
rating: 4.3, rating: 4.3,
price:7.99, price:7.99,
img:'images/order/21.jpg', img:'images/order/21.jpg',
@ -191,7 +191,7 @@ const foodItem = [
{ {
id:22, id:22,
name: 'Saba', name: 'Saba',
category: 'nigiri', category: 'Nigiri',
rating: 4.3, rating: 4.3,
price:8.99, price:8.99,
img:'images/order/22.jpg', img:'images/order/22.jpg',
@ -200,7 +200,7 @@ const foodItem = [
{ {
id:23, id:23,
name: 'Ebi', name: 'Ebi',
category: 'nigiri', category: 'Nigiri',
rating: 4.3, rating: 4.3,
price:7.99, price:7.99,
img:'images/order/23.jpg', img:'images/order/23.jpg',
@ -209,7 +209,7 @@ const foodItem = [
{ {
id:24, id:24,
name: 'Hotate', name: 'Hotate',
category: 'nigiri', category: 'Nigiri',
rating: 4.3, rating: 4.3,
price:8.99, price:8.99,
img:'images/order/24.jpg', img:'images/order/24.jpg',
@ -218,7 +218,7 @@ const foodItem = [
{ {
id:25, id:25,
name: 'Kani Kama', name: 'Kani Kama',
category: 'nigiri', category: 'Nigiri',
rating: 4.3, rating: 4.3,
price:7.99, price:7.99,
img:'images/order/25.jpeg', img:'images/order/25.jpeg',
@ -227,7 +227,7 @@ const foodItem = [
{ {
id:26, id:26,
name: 'Unagi', name: 'Unagi',
category: 'nigiri', category: 'Nigiri',
rating: 4.3, rating: 4.3,
price:8.99, price:8.99,
img:'images/order/26.jpg', img:'images/order/26.jpg',
@ -236,7 +236,7 @@ const foodItem = [
{ {
id:27, id:27,
name: 'Ikura', name: 'Ikura',
category: 'nigiri', category: 'Nigiri',
rating: 4.3, rating: 4.3,
price:7.99, price:7.99,
img:'images/order/27.jpg', img:'images/order/27.jpg',
@ -245,7 +245,7 @@ const foodItem = [
{ {
id:28, id:28,
name: 'Masago', name: 'Masago',
category: 'nigiri', category: 'Nigiri',
rating: 4.3, rating: 4.3,
price:8.99, price:8.99,
img:'images/order/28.jpg', img:'images/order/28.jpg',
@ -254,7 +254,7 @@ const foodItem = [
{ {
id:29, id:29,
name: 'Tamago', name: 'Tamago',
category: 'nigiri', category: 'Nigiri',
rating: 4.3, rating: 4.3,
price:7.99, price:7.99,
img:'images/order/29.jpg', img:'images/order/29.jpg',
@ -263,7 +263,7 @@ const foodItem = [
{ {
id:30, id:30,
name: 'Wagyu Nigiri', name: 'Wagyu Nigiri',
category: 'nigiri', category: 'Nigiri',
rating: 4.3, rating: 4.3,
price:12.99, price:12.99,
img:'images/order/30.jpeg', img:'images/order/30.jpeg',
@ -272,7 +272,7 @@ const foodItem = [
{ {
id:31, id:31,
name: 'Sushi A', name: 'Sushi A',
category: 'sushi', category: 'Sushi-Set',
rating: 4.3, rating: 4.3,
price:19.99, price:19.99,
img:'images/order/31.jpg', img:'images/order/31.jpg',
@ -281,7 +281,7 @@ const foodItem = [
{ {
id:32, id:32,
name: 'Sushi B', name: 'Sushi B',
category: 'sushi', category: 'Sushi-Set',
rating: 4.3, rating: 4.3,
price:23.99, price:23.99,
img:'images/order/31.jpg', img:'images/order/31.jpg',
@ -290,7 +290,7 @@ const foodItem = [
{ {
id:33, id:33,
name: 'Sashimi A', name: 'Sashimi A',
category: 'sushi', category: 'Sushi-Set',
rating: 4.3, rating: 4.3,
price:35.99, price:35.99,
img:'images/order/31.jpg', img:'images/order/31.jpg',
@ -299,7 +299,7 @@ const foodItem = [
{ {
id:34, id:34,
name: 'Sashimi B', name: 'Sashimi B',
category: 'sushi', category: 'Sushi-Set',
rating: 4.3, rating: 4.3,
price:39.99, price:39.99,
img:'images/order/31.jpg', img:'images/order/31.jpg',
@ -308,7 +308,7 @@ const foodItem = [
{ {
id:35, id:35,
name: 'Super Sashimi', name: 'Super Sashimi',
category: 'sushi', category: 'Sushi-Set',
rating: 4.3, rating: 4.3,
price:45.99, price:45.99,
img:'images/order/31.jpg', img:'images/order/31.jpg',
@ -317,7 +317,7 @@ const foodItem = [
{ {
id:36, id:36,
name: 'Tekka', name: 'Tekka',
category: 'maki', category: 'Maki',
rating: 4.3, rating: 4.3,
price:9.99, price:9.99,
img:'images/order/32.jpg', img:'images/order/32.jpg',
@ -326,7 +326,7 @@ const foodItem = [
{ {
id:37, id:37,
name: 'Sake', name: 'Sake',
category: 'maki', category: 'Maki',
rating: 4.3, rating: 4.3,
price:9.99, price:9.99,
img:'images/order/33.jpg', img:'images/order/33.jpg',
@ -335,7 +335,7 @@ const foodItem = [
{ {
id:38, id:38,
name: 'Negi Hamachi', name: 'Negi Hamachi',
category: 'maki', category: 'Maki',
rating: 4.3, rating: 4.3,
price:9.99, price:9.99,
img:'images/order/34.jpg', img:'images/order/34.jpg',
@ -344,7 +344,7 @@ const foodItem = [
{ {
id:39, id:39,
name: 'Ebi', name: 'Ebi',
category: 'maki', category: 'Maki',
rating: 4.3, rating: 4.3,
price:9.99, price:9.99,
img:'images/order/35.jpg', img:'images/order/35.jpg',
@ -353,7 +353,7 @@ const foodItem = [
{ {
id:40, id:40,
name: 'Sake Avocado', name: 'Sake Avocado',
category: 'maki', category: 'Maki',
rating: 4.3, rating: 4.3,
price:9.99, price:9.99,
img:'images/order/36.jpg', img:'images/order/36.jpg',
@ -362,7 +362,7 @@ const foodItem = [
{ {
id:41, id:41,
name: 'Unagi Q', name: 'Unagi Q',
category: 'maki', category: 'Maki',
rating: 4.3, rating: 4.3,
price:9.99, price:9.99,
img:'images/order/37.jpg', img:'images/order/37.jpg',
@ -371,7 +371,7 @@ const foodItem = [
{ {
id:42, id:42,
name: 'Spicy Scallop', name: 'Spicy Scallop',
category: 'maki', category: 'Maki',
rating: 4.3, rating: 4.3,
price:9.99, price:9.99,
img:'images/order/38.jpg', img:'images/order/38.jpg',
@ -380,7 +380,7 @@ const foodItem = [
{ {
id:43, id:43,
name: 'Spicy Tako', name: 'Spicy Tako',
category: 'maki', category: 'Maki',
rating: 4.3, rating: 4.3,
price:9.99, price:9.99,
img:'images/order/39.jpg', img:'images/order/39.jpg',
@ -389,7 +389,7 @@ const foodItem = [
{ {
id:44, id:44,
name: 'Spider', name: 'Spider',
category: 'maki', category: 'Maki',
rating: 4.3, rating: 4.3,
price:12.99, price:12.99,
img:'images/order/40.jpg', img:'images/order/40.jpg',
@ -398,7 +398,7 @@ const foodItem = [
{ {
id:45, id:45,
name: 'Alaska', name: 'Alaska',
category: 'maki', category: 'Maki',
rating: 4.3, rating: 4.3,
price:13.99, price:13.99,
img:'images/order/41.jpg', img:'images/order/41.jpg',
@ -407,7 +407,7 @@ const foodItem = [
{ {
id:46, id:46,
name: 'Boston', name: 'Boston',
category: 'maki', category: 'Maki',
rating: 4.3, rating: 4.3,
price:13.99, price:13.99,
img:'images/order/42.jpg', img:'images/order/42.jpg',
@ -416,7 +416,7 @@ const foodItem = [
{ {
id:47, id:47,
name: 'Philadelphia', name: 'Philadelphia',
category: 'maki', category: 'Maki',
rating: 4.3, rating: 4.3,
price:13.99, price:13.99,
img:'images/order/43.jpg', img:'images/order/43.jpg',
@ -425,7 +425,7 @@ const foodItem = [
{ {
id:48, id:48,
name: 'California', name: 'California',
category: 'maki', category: 'Maki',
rating: 4.3, rating: 4.3,
price:13.99, price:13.99,
img:'images/order/44.jpg', img:'images/order/44.jpg',
@ -434,7 +434,7 @@ const foodItem = [
{ {
id:49, id:49,
name: 'Chicago', name: 'Chicago',
category: 'maki', category: 'Maki',
rating: 4.3, rating: 4.3,
price:13.99, price:13.99,
img:'images/order/45.jpg', img:'images/order/45.jpg',
@ -443,7 +443,7 @@ const foodItem = [
{ {
id:50, id:50,
name: 'Sake Donburi', name: 'Sake Donburi',
category: 'don', category: 'Donburi',
rating: 4.3, rating: 4.3,
price:16.99, price:16.99,
img:'images/order/46.jpg', img:'images/order/46.jpg',
@ -452,7 +452,7 @@ const foodItem = [
{ {
id:51, id:51,
name: 'Tekka Donburi', name: 'Tekka Donburi',
category: 'don', category: 'Donburi',
rating: 4.3, rating: 4.3,
price:17.99, price:17.99,
img:'images/order/47.jpeg', img:'images/order/47.jpeg',
@ -461,7 +461,7 @@ const foodItem = [
{ {
id:52, id:52,
name: 'Hamachi Donburi', name: 'Hamachi Donburi',
category: 'don', category: 'Donburi',
rating: 4.3, rating: 4.3,
price:17.99, price:17.99,
img:'images/order/48.jpg', img:'images/order/48.jpg',
@ -470,7 +470,7 @@ const foodItem = [
{ {
id:53, id:53,
name: 'Chirashi Donburi', name: 'Chirashi Donburi',
category: 'don', category: 'Donburi',
rating: 4.3, rating: 4.3,
price:19.99, price:19.99,
img:'images/order/49.jpg', img:'images/order/49.jpg',
@ -479,7 +479,7 @@ const foodItem = [
{ {
id:54, id:54,
name: 'Unagi Donburi', name: 'Unagi Donburi',
category: 'don', category: 'Donburi',
rating: 4.3, rating: 4.3,
price:19.99, price:19.99,
img:'images/order/50.jpg', img:'images/order/50.jpg',
@ -488,7 +488,7 @@ const foodItem = [
{ {
id:55, id:55,
name: 'Hot Green Tea', name: 'Hot Green Tea',
category: 'drink', category: 'Beverage',
rating: 4.3, rating: 4.3,
price:2.99, price:2.99,
img:'images/order/51.jpg', img:'images/order/51.jpg',
@ -497,7 +497,7 @@ const foodItem = [
{ {
id:56, id:56,
name: 'Iced Green Tea', name: 'Iced Green Tea',
category: 'drink', category: 'Beverage',
rating: 4.3, rating: 4.3,
price:3.99, price:3.99,
img:'images/order/52.jpg', img:'images/order/52.jpg',
@ -506,7 +506,7 @@ const foodItem = [
{ {
id:57, id:57,
name: 'Coke/Diet', name: 'Coke/Diet',
category: 'drink', category: 'Beverage',
rating: 4.3, rating: 4.3,
price:2.59, price:2.59,
img:'images/order/53.png', img:'images/order/53.png',
@ -515,7 +515,7 @@ const foodItem = [
{ {
id:58, id:58,
name: 'Bottled Water', name: 'Bottled Water',
category: 'drink', category: 'Beverage',
rating: 4.3, rating: 4.3,
price:1.99, price:1.99,
img:'images/order/54.png', img:'images/order/54.png',
@ -524,7 +524,7 @@ const foodItem = [
{ {
id:59, id:59,
name: 'Matcha Ice Cream', name: 'Matcha Ice Cream',
category: 'dessert', category: 'Dessert',
rating: 4.3, rating: 4.3,
price:5.99, price:5.99,
img:'images/order/55.jpg', img:'images/order/55.jpg',
@ -533,7 +533,7 @@ const foodItem = [
{ {
id:60, id:60,
name: 'Mochi Ice Cream', name: 'Mochi Ice Cream',
category: 'dessert', category: 'Dessert',
rating: 4.3, rating: 4.3,
price:4.99, price:4.99,
img:'images/order/56.jpg', img:'images/order/56.jpg',
@ -542,7 +542,7 @@ const foodItem = [
{ {
id:61, id:61,
name: 'Matcha Cheesecake', name: 'Matcha Cheesecake',
category: 'dessert', category: 'Dessert',
rating: 4.3, rating: 4.3,
price:8.99, price:8.99,
img:'images/order/57.jpg', img:'images/order/57.jpg',
@ -551,7 +551,7 @@ const foodItem = [
{ {
id:62, id:62,
name: 'Dango', name: 'Dango',
category: 'dessert', category: 'Dessert',
rating: 4.3, rating: 4.3,
price:3.99, price:3.99,
img:'images/order/58.jpg', img:'images/order/58.jpg',
@ -560,7 +560,7 @@ const foodItem = [
{ {
id:63, id:63,
name: 'Taiyaki', name: 'Taiyaki',
category: 'dessert', category: 'Dessert',
rating: 4.3, rating: 4.3,
price:6.99, price:6.99,
img:'images/order/59.jpg', img:'images/order/59.jpg',

4
restaurant_website/menu.html
View file

@ -50,7 +50,7 @@
<div class="menu-item-text"> <div class="menu-item-text">
<h3 class="menu-item-heading"> <h3 class="menu-item-heading">
<span class="menu-item-name">Edamame</span> <span class="menu-item-name">Edamame</span>
<span class="menu-item-price">$6.00</span> <span class="menu-item-price">$5.99</span>
</h3> </h3>
<p class="menu-item-desc">Steamed soybean with salt</p> <p class="menu-item-desc">Steamed soybean with salt</p>
</div> </div>
@ -59,7 +59,7 @@
<div class="menu-item-text"> <div class="menu-item-text">
<h3 class="menu-item-heading"> <h3 class="menu-item-heading">
<span class="menu-item-name">Spicy Edamame</span> <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> </h3>
<p class="menu-item-desc">Steamed soybean with salt & togarashi.</p> <p class="menu-item-desc">Steamed soybean with salt & togarashi.</p>
</div> </div>

16
restaurant_website/order.css
View file

@ -92,13 +92,10 @@ body{
background: var(--main-color); background: var(--main-color);
color: var(--bg-color); color: var(--bg-color);
} }
.food-items{ #Appetizer, #Soup, #Salad, #Nigiri, #Sushi, #Maki, #Donburi, #Beverage, #Dessert{
}
#appetizer, #soup, #salad, #nigiri, #sushi, #maki, #don, #drink, #dessert{
margin-top: 40px; 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); background-color: var(--other-color);
} }
#category-name, .menu-items{ #category-name, .menu-items{
@ -214,16 +211,16 @@ body{
font-weight: 600; font-weight: 600;
} }
/*--------------------------------------------------------------------------------------------------------------------------*/ /*--------------------------------------------------------------------------------------------------------------------------*/
#food-items{ .food-items{
display: none;
} }
#category-list{ #category-list{
} }
/*--------------------------------------------------------------------------------------------------------------------------*/
.cart-toggle{ .cart-toggle{
display: none; display: none;
} }
/*--------------------------------------------------------------------------------------------------------------------------*/
#cart-page{ #cart-page{
background: var(--other-color); background: var(--other-color);
margin: 40px 10px; margin: 40px 10px;
@ -287,7 +284,8 @@ body{
color: var(--main-color); color: var(--main-color);
} }
#delivery{ #delivery{
color: orangered; color: rgb(10, 142, 36);
font-weight: 600;
} }
.checkout-btn{ .checkout-btn{
outline: none; outline: none;

69
restaurant_website/order.html
View file

@ -39,43 +39,43 @@
<div class="utility"> <div class="utility">
<i class="fas fa-search"> &nbsp Search</i> <i class="fas fa-search"> &nbsp Search</i>
<i class="fas fa-tags"> &nbsp Offers</i> <i class="fas fa-tags"> &nbsp Offers</i>
<i class="fas fa-shopping-cart" id="shopping-cart"> &nbsp 0 items</i> <i class="fas fa-shopping-cart" id="shopping-cart"> &nbsp 0 Items</i>
</div> </div>
</div> </div>
<div id="food-items"> <div id="food-items">
<div id="appetizer"> <div id="Appetizer">
<p id="category-name">Appetizers</p> <p id="category-name">Appetizers</p>
</div> </div>
<div id="soup"> <div id="Soup">
<p id="category-name">Soup</p> <p id="category-name">Soup</p>
</div> </div>
<div id="salad"> <div id="Salad">
<p id="category-name">Sunomono Salad</p> <p id="category-name">Sunomono Salad</p>
</div> </div>
<div id="nigiri"> <div id="Nigiri">
<p id="category-name">Nigiri/Sashimi</p> <p id="category-name">Nigiri/Sashimi</p>
</div> </div>
<div id="sushi"> <div id="Sushi-Set">
<p id="category-name">Sushi/Sashimi Platters</p> <p id="category-name">Sushi/Sashimi Platters</p>
</div> </div>
<div id="maki"> <div id="Maki">
<p id="category-name">Maki (Rolls)</p> <p id="category-name">Maki (Rolls)</p>
</div> </div>
<div id="don"> <div id="Donburi">
<p id="category-name">Donburi</p> <p id="category-name">Donburi</p>
</div> </div>
<div id="drink"> <div id="Beverage">
<p id="category-name">Beverages</p> <p id="category-name">Beverages</p>
</div> </div>
<div id="dessert"> <div id="Dessert">
<p id="category-name">Desserts</p> <p id="category-name">Desserts</p>
</div> </div>
</div> </div>
@ -91,18 +91,7 @@
<td>Price</td> <td>Price</td>
</thead> </thead>
<tbody id="table-body"> <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> </tbody>
</table> </table>
</div> </div>
@ -116,42 +105,6 @@
</div> </div>
<div id="category-list"> <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> <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"> &nbsp Sake Donburi</a>
</div>
<div class="list-menu">
<img src="images/chef2.jpg" alt="">
<a href="" class="list-name"> &nbsp Ebi Okonomiyaki</a>
</div>
<div class="list-menu">
<img src="images/chef3.jpg" alt="">
<a href="" class="list-name"> &nbsp Wagyu Nigiri</a>
</div>
<div class="list-menu">
<img src="images/chef4.jpg" alt="">
<a href="" class="list-name"> &nbsp Tekka Maki</a>
</div>
<div class="list-menu">
<img src="images/order/8.jpg" alt="">
<a href="" class="list-name"> &nbsp Soft Shell Crab</a>
</div>
<div class="list-menu">
<img src="images/order/59.jpg" alt="">
<a href="" class="list-name"> &nbsp Taiyaki</a>
</div>
<div class="list-menu">
<img src="images/order/58.jpg" alt="">
<a href="" class="list-name"> &nbsp Dango</a>
</div>
</div> </div>
<div id="checkout" class="cart-toggle"> <div id="checkout" class="cart-toggle">

112
restaurant_website/order.js
View file

@ -1,25 +1,25 @@
import {foodItem} from "./items.js"; import {foodItem} from "./items.js";
function displayItems(){ function displayItems(){
var appetizer = document.getElementById('appetizer'); var appetizer = document.getElementById('Appetizer');
var soup = document.getElementById('soup'); var soup = document.getElementById('Soup');
var salad = document.getElementById('salad'); var salad = document.getElementById('Salad');
var nigiri = document.getElementById('nigiri'); var nigiri = document.getElementById('Nigiri');
var sushi = document.getElementById('sushi'); var sushi = document.getElementById('Sushi-Set');
var maki = document.getElementById('maki'); var maki = document.getElementById('Maki');
var don = document.getElementById('don'); var don = document.getElementById('Donburi');
var drink = document.getElementById('drink'); var drink = document.getElementById('Beverage');
var dessert = document.getElementById('dessert'); var dessert = document.getElementById('Dessert');
const appetizerData = foodItem.filter(item => item.category == 'appetizer'); const appetizerData = foodItem.filter(item => item.category == 'Appetizer');
const soupData = foodItem.filter(item => item.category == 'soup'); const soupData = foodItem.filter(item => item.category == 'Soup');
const saladData = foodItem.filter(item => item.category == 'salad'); const saladData = foodItem.filter(item => item.category == 'Salad');
const nigiriData = foodItem.filter(item => item.category == 'nigiri'); const nigiriData = foodItem.filter(item => item.category == 'Nigiri');
const sushiData = foodItem.filter(item => item.category == 'sushi'); const sushiData = foodItem.filter(item => item.category == 'Sushi-Set');
const makiData = foodItem.filter(item => item.category == 'maki'); const makiData = foodItem.filter(item => item.category == 'Maki');
const donData = foodItem.filter(item => item.category == 'don'); const donData = foodItem.filter(item => item.category == 'Donburi');
const drinkData = foodItem.filter(item => item.category == 'drink'); const drinkData = foodItem.filter(item => item.category == 'Beverage');
const dessertData = foodItem.filter(item => item.category == 'dessert'); const dessertData = foodItem.filter(item => item.category == 'Dessert');
appetizerData.map(item => { appetizerData.map(item => {
var itemBox = document.createElement('div'); var itemBox = document.createElement('div');
@ -357,6 +357,33 @@ function displayItems(){
} }
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 => { document.querySelectorAll('.add-to-cart').forEach(item => {
item.addEventListener('click', addToCart); item.addEventListener('click', addToCart);
@ -371,6 +398,7 @@ function addToCart(){
if(index === -1){ if(index === -1){
document.getElementById(itemObject.id).classList.add('toggle-cart'); document.getElementById(itemObject.id).classList.add('toggle-cart');
cartData = [...cartData, itemObject]; cartData = [...cartData, itemObject];
console.log(cartData)
} }
else if(index > -1){ else if(index > -1){
alert("Added to cart"); alert("Added to cart");
@ -389,6 +417,7 @@ function cartItems(){
cartData.map(item => { cartData.map(item => {
var tableRow = document.createElement('tr'); var tableRow = document.createElement('tr');
var rowData1 = document.createElement('td'); var rowData1 = document.createElement('td');
var img = document.createElement('img'); var img = document.createElement('img');
img.src = item.img; img.src = item.img;
@ -399,19 +428,21 @@ function cartItems(){
var rowData3 = document.createElement('td'); var rowData3 = document.createElement('td');
var btn1 = document.createElement('button'); var btn1 = document.createElement('button');
btn1.setAttribute('class','remove-item'); btn1.setAttribute('class','drop-item');
btn1.innerHTML = '-'; btn1.innerText = '-';
var span = document.createElement('span'); var span = document.createElement('span');
span.innerText = item.quantity; span.innerText = item.quantity;
var btn2 = document.createElement('button'); var btn2 = document.createElement('button');
btn1.setAttribute('class','add-item'); btn2.setAttribute('class','addOn-item');
btn1.innerHTML = '+'; btn2.innerText = '+';
rowData3.appendChild(btn1); rowData3.appendChild(btn1);
rowData3.appendChild(span); rowData3.appendChild(span);
rowData3.appendChild(btn2); rowData3.appendChild(btn2);
var rowData4 = document.createElement('td'); 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(rowData1);
tableRow.appendChild(rowData2); tableRow.appendChild(rowData2);
@ -420,21 +451,20 @@ function cartItems(){
tableBody.appendChild(tableRow); tableBody.appendChild(tableRow);
}) })
document.querySelectorAll('.add-item').forEach(item => { document.querySelectorAll('.addOn-item').forEach(item => {
item.addEventListener('click', addItem); item.addEventListener('click', addOnItem);
}) })
document.querySelectorAll('.remove-item').forEach(item => { document.querySelectorAll('.drop-item').forEach(item => {
item.addEventListener('click', removeItem); item.addEventListener('click', dropItem);
}) })
} }
var currentPrice = 0; var currentPrice = 0;
function addItem(){ function addOnItem(){
let itemToAdd = this.parentNode.previousSibliing.innerText; let itemAdd = this.parentNode.previousSibling.innerText;
console.log(itemToAdd);
var addObject = cartData.find(element => element.name = itemToAdd); var addObject = cartData.find(element => element.name == itemAdd);
addObject.quantity += 1; addObject.quantity += 1;
currentPrice = (addObject.price*addObject.quantity - addObject.price*(addObject.quantity - 1))/(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; var flag = false;
function removeItem(){ function dropItem(){
let itemToRemove = this.parentNode.previousSibliing.innerText; let itemRemove = this.parentNode.previousSibling.innerText;
let removeObject = cartData.find(element => element.name == itemToRemove); let removeObject = cartData.find(element => element.name == itemRemove);
let ind = cartData.indexOf(removeObject); let ind = cartData.indexOf(removeObject);
if(removeObject.quantity > 1){ 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 { else {
document.getElementById(removeObject.id).classList.remove('cart-toggle'); document.getElementById(removeObject.id).classList.remove('toggle-cart');
cartData.splice(ind,1); cartData.splice(ind,1);
document.getElementById('shopping-cart').innerHTML = '' + cartData.length + 'Items'; document.getElementById('shopping-cart').innerHTML = '' + cartData.length + 'Items';
//document.getElementById('m-shopping-cart').innerHTML = '' + cartData.length; //document.getElementById('m-shopping-cart').innerHTML = '' + cartData.length;
@ -477,13 +509,17 @@ function removeItem(){
function totalAmount(){ function totalAmount(){
var sum = 0; var sum = 0;
cartData.map(item => { 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-item').innerText = 'Items :' + cartData.length;
console.log(document.getElementById('total-price').innerText);
document.getElementById('total-price').innerText = 'Total Amount : $' + sum; document.getElementById('total-price').innerText = 'Total Amount : $' + sum;
} }
document.getElementById('shopping-cart').addEventListener('click', cartToggle); 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(){ function cartToggle(){
if(cartData.length > 0){ if(cartData.length > 0){