8000 Merge pull request #9 from samahuja642/main · abhipshapatro/JavaScript30@4e94f1b · GitHub
[go: up one dir, main page]
Skip to content

Commit 4e94f1b

Browse files
abhipshapatroabhipshapatro
authored
Merge pull request #9 from samahuja642/main
Added Billing Website
2 parents 898dd46 + b9b0b75 commit 4e94f1b

File tree

3 files changed

+231
-0
lines changed

3 files changed

+231
-0
lines changed

‎Billing_Website/index.html‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
<!DOCTYPE HTML>
2+
<html>
3+
<!-- This Section is provided to browser that how to render the webiste in the browser -->
4+
<head>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
8+
<title>EVEFood</title>
9+
10+
<!-- Importing Poppins -->
11+
<link rel="preconnect" href="https://fonts.googleapis.com">
12+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
13+
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,500;0,700;1,200&display=swap" rel="stylesheet">
14+
15+
<!--linking my stylesheet -->
16+
<link rel="stylesheet" href="styles.css" type="text/css">
17+
18+
</head>
19+
<body>
20+
<nav>
21+
<ul>
22+
<li>
23+
<a href="#landing">EVEFood</a>
24+
</li>
25+
<li>
26+
<a href="#menu">Menu</a>
27+
</li>
28+
<li>
29+
<a href="#checkout">Checkout</a>
30+
</li>
31+
</ul>
32+
33+
</nav>
34+
35+
<div id="landing">
36+
<h1>EVEFood</h1>
37+
<p>Enjoy Your Meals with EVEFood.Happy to See You Back.</p>
38+
<a href="#menu">See The Menu</a>
39+
</div>
40+
41+
<div id="menu">
42+
<div class="menu-item">
43+
<h2>Burger</h2>
44+
<img src="https://images.unsplash.com/photo-1550547660-d9450f859349?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8YnVyZ2VyfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60">
45+
<h3>Rs 50</h3>
46+
<button id="item1" class="btn-primary" onClick="removeItem(this.id)">-</button>
47+
<span id="BurgerNumber"></span>
48+
<button id="item1" class="btn-primary" onClick="addItem(this.id)">+</button>
49+
</div>
50+
51+
<div class="menu-item">
52+
<h2>Pao Bhaji</h2>
53+
<img src="https://images.unsplash.com/photo-1606491956391-70868b5d0f47?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTR8fHBhbyUyMGJoYWppfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60">
54+
<h3>Rs 120</h3>
55+
<button id="item2" class="btn-primary" onClick="removeItem(this.id)">-</button>
56+
<span id="Pao BhajiNumber"></span>
57+
<button id="item2" class="btn-primary" onClick="addItem(this.id)">+</button>
58+
</div>
59+
60+
<div class="menu-item">
61+
<h2>Omlet</h2>
62+
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTT5SrW4bEFfmPsKFgc3z58HpSxUv_DdTrWDg&usqp=CAU">
63+
<h3>Rs 60</h3>
64+
<button id="item3" class="btn-primary" onClick="removeItem(this.id)">-</button>
65+
<span id="OmletNumber"></span>
66+
<button id="item3" class="btn-primary" onClick="addItem(this.id)">+</button>
67+
</div>
68+
</div>
69+
<div id="checkout">
70+
<h2>Total Amount : Rs <span id="total"></span></h2>
71+
<button id="buy" class="btn-primary" onClick="checkOut()">Checkout Basket</button>
72+
<table id="billing">
73+
<tr>
74+
<th>Dish</th>
75+
<th>Quantity</th>
76+
<th>Price</th>
77+
</tr>
78+
</table>
79+
80+
</div>
81+
<script src="script.js"></script>
82+
</body>
83+
</html>

‎Billing_Website/script.js‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
let total = 0;
2+
let content_basket = {
3+
"Burger":[0,50],
4+
"Pao Bhaji":[0,120],
5+
"Omlet":[0,60]
6+
};
7+
8+
function update_basket(){
9+
document.getElementById("total").innerHTML = total;
10+
document.getElementById("billing").innerHTML = "<tr><th>Dish</th><th>Quantity</th><th>Price</th></tr>"
11+
for (var key in content_basket){
12+
document.getElementById(`${key}Number`).innerHTML = content_basket[key][0];
13+
if(content_basket[key][0]!=0){
14+
document.getElementById("billing").innerHTML += `<tr><td>${key}</td><td>${content_basket[key][0]}</td><td>${content_basket[key][1]}</td></tr>`
15+
}
16+
}
17+
}
18+
19+
update_basket();
20+
21+
function removeItem(id){
22+
let mealItem = document.getElementById(id);
23+
let mealName = mealItem.parentNode.childNodes[1].innerHTML;
24+
let mealPrice = parseFloat(mealItem.parentNode.childNodes[5].innerHTML.replace("Rs ",""));
25+
if(content_basket[mealName][0]>0){
26+
total = total - mealPrice;
27+
content_basket[mealName][0]--;
28+
update_basket();
29+
}
30+
}
31+
32+
33+
function addItem(id){
34+
let mealItem = document.getElementById(id);
35+
let mealName = mealItem.parentNode.childNodes[1].innerHTML;
36+
let mealPrice = parseFloat(mealItem.parentNode.childNodes[5].innerHTML.replace("Rs ",""));
37+
total = total + mealPrice;
38+
content_basket[mealName][0]++;
39+
update_basket();
40+
}
41+
42+
function checkOut(){
43+
total = 0;
44+
content_basket = {
45+
"Burger":[0,50],
46+
"Pao Bhaji":[0,120],
47+
"Omlet":[0,60]
48+
};
49+
update_basket();
50+
}

‎Billing_Website/styles.css‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
body{
2+
font-family: 'Poppins', sans-serif;
3+
margin:0;
4+
padding:0;
5+
}
6+
nav{
7+
background-color:#6366F1;
8+
}
9+
nav ul{
10+
font-size:2em;
11+
list-style-type:none;
12+
display:flex;
13+
flex-direction:column;
14+
align-items:center;
15+
margin:0;
16+
padding:0;
17+
}
18+
nav ul li a{
19+
color:white;
20+
}
21+
#landing{
22+
background-image:url(https://images.unsplash.com/photo-1553527922-767df645c5f6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MzN8fHJlc3RhdXJhbnRzfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60);
23+
background-repeat:no-repeat;
24+
background-size:100% 100%;
25+
height:70vh;
26+
color:gold;
27+
}
28+
#landing h1{
29+
padding:0.5em;
30+
font-size:3em;
31+
margin:0;
32+
}
33+
#landing p,#landing a{
34+
font-size:1.75em;
35+
color:white;
36+
padding-left:0.5em;
37+
}
38+
#menu{
39+
display:flex;
40+
flex-direction:column;
41+
justify-content:space-around;
42+
}
43+
.menu-item{
44+
border:5px black solid;
45+
margin:1em;
46+
padding:0.5em;
47+
}
48+
.menu-item img{
49+
width:auto;
50+
height:200px;
51+
}
52+
.btn-primary{
53+
margin:5px;
54+
background-color:yellow;
55+
padding:6px;
56+
border:black solid 3px;
57+
border-radius:15px;
58+
font-size:1em;
59+
}
60+
#checkout{
61+
margin:0.4em;
62+
}
63+
table{
64+
border-collapse:collapse;
65+
}
66+
th ,td{
67+
padding:0.25em;
68+
border:0.15em solid black;
69+
}
70+
@media only screen and (min-width:1000px){
71+
nav ul{
72+
flex-direction:row;
73+
justify-content:space-around;
74+
padding:1em;
75+
}
76+
#landing{
77+
height:90vh;
78+
}
79+
#landing h1{
80+
font-size:6em;
81+
}
82+
#landing p,#landing a{
83+
font-size:2.75em;
84+
}
85+
#menu{
86+
flex-direction:row;
87+
}
88+
.menu-item h2 , .menu-item h3{
89+
font-size:1.75em;
90+
}
91+
.menu-item img{
92+
width:200px;
93+
height:200px;
94+
}
95+
#checkout{
96+
font-size:1.5em;
97+
}
98+
}

0 commit comments

Comments
 (0)
0