-
Notifications
You must be signed in to change notification settings - Fork 0
/
25over.html
92 lines (68 loc) · 3.26 KB
/
25over.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
<!DOCTYPE html>
<html>
<head>
<title>Speeding Tickets: Over 25</title>
<!-- Bring in Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- bring in Vue.js -->
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div class="container">
<nav class="navbar navbar-inverse">
<div class="navbar-header">
<a class="navbar-brand" href="#">Our Website</a>
</div>
<div>
<ul class="nav navbar-nav">
<li><a href="index.html">All Tickets</a></li>
<li class="active"><a href="25over.html">25mph or move over</a></li>
</ul>
</div>
</nav> <!-- end nav-bar -->
<!-- where we apply our Vue.js formatting -->
<div id="over25App">
<h2>Tickets for 25 MPH and over:</h2>
<h3 class="text-center">July 4, 2014, Minneapolis/St. Paul</h3>
<table class="table table-bordered table-striped">
<tr>
<th>Ticket ID</th>
<th>Time</th>
<th>Posted Speed</th>
<th>MPH Over</th>
<th>Violator Sex</th>
</tr>
<tr v-for = "ticket in tickets">
<td>{{ticket.tid}}</td>
<td>{{ticket.stop_time}}</td>
<td>{{ticket.posted_speed}}</td>
<td>{{ticket.actual_speed - ticket.posted_speed}}</td>
<td>{{ticket.violator_sex}}</td>
</tr>
</table>
</div> <!-- end ticketApp -->
</div> <!-- end class= 'container' -->
<script>
let app = Vue.createApp({
data() { // returns an object of data
return {
tickets: [], // array to hold student data
}
},
created() { // section executes as page loads
this.getData() // load json data as page loads
},
methods: { // ajax request
async getData() {
const response = await fetch('tickets1.json');
this.tickets = await response.json();
this.tickets = this.tickets.filter( (violator) => (violator.actual_speed - violator.posted_speed) >= 25 );
},
}
})
app.mount('#over25App') //in which div to mount the vue app
</script>
</body>
</html>