-
Notifications
You must be signed in to change notification settings - Fork 1
/
busList.html
105 lines (95 loc) · 3.62 KB
/
busList.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<!DOCTYPE html>
<html>
<head>
<title> bus list </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" href="buslist.css">
</head>
<body>
<div id="wrapper">
<div class="container">
<div class="row">
<div class="split left col-md-6">
<div class="sidebar-item">
<div class="make-me-sticky">
<div class="centered">
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for bus.." title="Type in a name">
<ul id="myUL">
<li><a href="#">Nabil</a></li>
<li><a href="#">D link </a></li>
<li><a href="#">7 no </a></li>
<li><a href="#">Bkash </a></li>
<li><a href="#">VIP-27</a></li>
<li><a href="#">TransSilva</a></li>
<li><a href="#">Wellcome</a></li>
<li><a href="#">Nabil</a></li>
<li><a href="#">D link </a></li>
<li><a href="#">7 no </a></li>
</ul>
<div class="navbar">
<a href="busList.html" id="floatLeft" class="active" >All bus</a>
<a href="home.html" class="floatRight" >Home</a>
<a href="addBuses.html" class="floatRight" >Add Bus</a>
</div>
</div>
</div>
</div>
</div>
<div class="split right col-md-6">
<div class="center">
<div class="centereTop">
<h2 id="busName" class="text-center">Bus Name</h2>
</div>
<p class="station"><span id="from">Start</span> - <span id="to">End</span> <span id="RouteNO" style="display: block;margin: 2px">RouteNo: N/A</span></p>
<div class="textBox busRoute">
<ul class="busRoutes">
<li>Start</li>
<li>Station</li>
<li>Station</li>
<li>End</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
function myFunction() {
var input, filter, ul, li, a, i, txtValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
ul = document.getElementById("myUL");
li = ul.getElementsByTagName("li");
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
txtValue = a.textContent || a.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
</script>
<script src="main.js"></script>
<script>
let list=document.getElementById('myUL');
list.innerHTML='';
busList.forEach(function (bus) {
list.innerHTML=list.innerHTML+` <li><a href="#" class="bus"><span class="busId">${bus.id}</span>. ${bus.busName}</a></li>`;
})
list.addEventListener('click',function (e) {
e.preventDefault();
if (e.target.className='bus'){
showRoute(e.target.firstElementChild.innerText);
}
});
</script>
<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</body>
</html>