Skip to content

Commit b23787f

Browse files
AnkitKumarMishra5AnkitKumarMishra5
committed
Practical 5: Order Tracking App
1 parent 35a3a94 commit b23787f

10 files changed

Lines changed: 216 additions & 0 deletions

‎Projects/OrderTrackingApp/assets/order-being-prepared.gif‎

1.23 MB
Loading

‎Projects/OrderTrackingApp/assets/order-confirmed.gif‎

1.15 MB
Loading

‎Projects/OrderTrackingApp/assets/order-delivered.gif‎

615 KB
Loading

‎Projects/OrderTrackingApp/assets/order-handed-over.gif‎

1010 KB
Loading

‎Projects/OrderTrackingApp/assets/order-on-the-way.gif‎

1.73 MB
Loading

‎Projects/OrderTrackingApp/assets/order-prepared.gif‎

1.37 MB
Loading

‎Projects/OrderTrackingApp/assets/order-reached-destination.gif‎

542 KB
Loading

‎Projects/OrderTrackingApp/index.css‎

Whitespace-only changes.

‎Projects/OrderTrackingApp/index.html‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Order Tracking App</title>
7+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
8+
<link rel="stylesheet" href="index.css">
9+
</head>
10+
<body>
11+
<div class="container mt-5 text-center">
12+
<div style="max-width: 500px; margin: auto;">
13+
<form id="order-form">
14+
<p class="text-muted">Enter the details for the order</p>
15+
<table class="table">
16+
<tbody>
17+
<tr>
18+
<td><input type="text" id="item-1" placeholder="Item 1"></td>
19+
<td><input type="number" id="quantity-1" placeholder="Quantity 1"></td>
20+
<td><input type="number" id="price-1" placeholder="Price 1"></td>
21+
</tr>
22+
<tr>
23+
<td><input type="text" id="item-2" placeholder="Item 2"></td>
24+
<td><input type="number" id="quantity-2" placeholder="Quantity 2"></td>
25+
<td><input type="number" id="price-2" placeholder="Price 2"></td>
26+
</tr>
27+
</tbody>
28+
</table>
29+
<button type="button" class="btn btn-dark" onclick="placeOrder()">
30+
Place order
31+
</button>
32+
</form>
33+
</div>
34+
<div class="row" id="order-list">
35+
</div>
36+
</div>
37+
38+
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
39+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.min.js" integrity="sha384-G/EV+4j2dNv+tEPo3++6LCgdCROaejBqfUeNjuKAiuXbjrxilcCdDz6ZAVfHWe1Y" crossorigin="anonymous"></script>
40+
<script src="index.js"></script>
41+
</body>
42+
</html>

‎Projects/OrderTrackingApp/index.js‎

Lines changed: 174 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,174 @@
1+
const orderBeingPrepared = (orderNo) => new Promise((resolve, reject) => {
2+
setTimeout(() => {
3+
document.getElementById(`order-status-img-${orderNo}`).src='assets/order-being-prepared.gif'
4+
document.getElementById(`order-status-txt-${orderNo}`).innerText = 'Order is being prepared'
5+
resolve(orderNo)
6+
}, 2000)
7+
})
8+
9+
const orderPrepared = (orderNo) => new Promise((resolve, reject) => {
10+
setTimeout(() => {
11+
document.getElementById(`order-status-img-${orderNo}`).src='assets/order-prepared.gif'
12+
document.getElementById(`order-status-txt-${orderNo}`).innerText = 'Order prepared'
13+
resolve(orderNo)
14+
}, 10000)
15+
})
16+
17+
const orderHandedOver = (orderNo) => new Promise((resolve, reject) => {
18+
setTimeout(() => {
19+
document.getElementById(`order-status-img-${orderNo}`).src='assets/order-handed-over.gif'
20+
document.getElementById(`order-status-txt-${orderNo}`).innerText = 'Order handed over to the delivery person'
21+
resolve(orderNo)
22+
}, 5000)
23+
})
24+
25+
const orderOnTheWay = (orderNo) => new Promise((resolve, reject) => {
26+
setTimeout(() => {
27+
document.getElementById(`order-status-img-${orderNo}`).src='assets/order-on-the-way.gif'
28+
document.getElementById(`order-status-txt-${orderNo}`).innerText = 'Order is on the way'
29+
resolve(orderNo)
30+
}, 3000)
31+
})
32+
33+
const orderReachedDestintaion = (orderNo) => new Promise((resolve, reject) => {
34+
setTimeout(() => {
35+
document.getElementById(`order-status-img-${orderNo}`).src='assets/order-reached-destination.gif'
36+
document.getElementById(`order-status-txt-${orderNo}`).innerText = `Order reached it's destination`
37+
resolve(orderNo)
38+
}, 8000)
39+
})
40+
41+
const orderDelivered = (orderNo) => new Promise((resolve, reject) => {
42+
setTimeout(() => {
43+
document.getElementById(`order-status-img-${orderNo}`).src='assets/order-delivered.gif'
44+
document.getElementById(`order-status-txt-${orderNo}`).innerText = 'Order has been delivered'
45+
resolve(orderNo)
46+
}, 4000)
47+
})
48+
49+
let orderNo = 0
50+
51+
const placeOrder = () => {
52+
orderNo++
53+
createOrderCard()
54+
55+
document.getElementById(`order-status-img-${orderNo}`).src='assets/order-confirmed.gif'
56+
document.getElementById(`order-status-txt-${orderNo}`).innerText = 'Order confirmed'
57+
58+
orderBeingPrepared(orderNo)
59+
.then((orderNo) => orderPrepared(orderNo))
60+
.then((orderNo) => orderHandedOver(orderNo))
61+
.then((orderNo) => orderOnTheWay(orderNo))
62+
.then((orderNo) => orderReachedDestintaion(orderNo))
63+
.then((orderNo) => orderDelivered(orderNo))
64+
.then((orderNo) => console.log(`Order ${orderNo} completed processing`))
65+
.catch(() => console.log('Something went wrong'))
66+
}
67+
68+
function createOrderCard() {
69+
const orderList = document.getElementById('order-list')
70+
71+
const colDiv = document.createElement('div')
72+
colDiv.classList.add('col-xl-4', 'col-md-6')
73+
colDiv.id = `order-${orderNo}`
74+
75+
const cardDiv = document.createElement('div')
76+
cardDiv.classList.add('card', 'text-center', 'mt-2')
77+
78+
const cardHeaderDiv = document.createElement('div')
79+
cardHeaderDiv.classList.add('card-header')
80+
cardHeaderDiv.innerText = `Order No. ${orderNo}`
81+
82+
const cardBodyDiv = document.createElement('div')
83+
cardBodyDiv.classList.add('card-body')
84+
85+
const item1 = document.getElementById('item-1').value || 'Mushroom Pizza'
86+
const item2 = document.getElementById('item-2').value || 'French Fries'
87+
const quantity1 = document.getElementById('quantity-1').value || '1'
88+
const quantity2 = document.getElementById('quantity-2').value || '2'
89+
const price1 = document.getElementById('price-1').value || '25'
90+
const price2 = document.getElementById('price-2').value || '36'
91+
const total = Number(price1) + Number(price2)
92+
const orderForm = document.getElementById('order-form')
93+
orderForm.reset()
94+
95+
cardBodyDiv.innerHTML = `
96+
<table class="table table-striped">
97+
<thead>
98+
<tr>
99+
<th scope="col">#</th>
100+
<th scope="col">Item</th>
101+
<th scope="col">Quantity</th>
102+
<th scope="col">Price</th>
103+
</tr>
104+
</thead>
105+
<tbody>
106+
<tr>
107+
<th scope="row">1</th>
108+
<td>${item1}</td>
109+
<td>${quantity1}</td>
110+
<td>$${Number(price1).toFixed(2)}</td>
111+
</tr>
112+
<tr>
113+
<th scope="row">2</th>
114+
<td>${item2}</td>
115+
<td>${quantity2}</td>
116+
<td>$${Number(price2).toFixed(2)}</td>
117+
</tr>
118+
<tr>
119+
<th scope="row">Total</th>
120+
<td></td>
121+
<td></td>
122+
<td>$${Number(total).toFixed(2)}</td>
123+
</tr>
124+
</tbody>
125+
</table>
126+
`
127+
128+
const orderStatusImg = document.createElement('img')
129+
orderStatusImg.src = ''
130+
orderStatusImg.id = `order-status-img-${orderNo}`
131+
orderStatusImg.width = '75'
132+
133+
const orderStatusTxt = document.createElement('p')
134+
orderStatusTxt.classList.add('card-text')
135+
orderStatusTxt.id = `order-status-txt-${orderNo}`
136+
137+
const cancelBtn = document.createElement('button')
138+
cancelBtn.classList.add('btn', 'btn-danger', 'btn-sm')
139+
cancelBtn.innerText = 'Cancel'
140+
cancelBtn.addEventListener('click', () => {
141+
const orderCol = document.getElementById(`order-${orderNo}`)
142+
orderList.remove(orderCol)
143+
})
144+
145+
cardBodyDiv.append(orderStatusImg, orderStatusTxt, cancelBtn)
146+
147+
const cardFooterDiv = document.createElement('div')
148+
cardFooterDiv.classList.add('card-footer', 'text-body-secondary')
149+
const currentTime = new Date()
150+
cardFooterDiv.innerText = currentTime.toLocaleString()
151+
152+
cardDiv.append(cardHeaderDiv, cardBodyDiv, cardFooterDiv)
153+
colDiv.append(cardDiv)
154+
orderList.append(colDiv)
155+
}
156+
157+
158+
/*
159+
<div class="col-lg-4 col-md-6">
160+
<div class="card text-center mt-2">
161+
<div class="card-header">
162+
Order No. 1
163+
</div>
164+
<div class="card-body">
165+
<img src="" id="order-status-img" width="75">
166+
<p class="card-text" id="order-status-txt"></p>
167+
<a href="#" class="btn btn-danger btn-sm">Cancel</a>
168+
</div>
169+
<div class="card-footer text-body-secondary">
170+
2 days ago
171+
</div>
172+
</div>
173+
</div>
174+
*/

0 commit comments

Comments
 (0)