-
Notifications
You must be signed in to change notification settings - Fork 5
/
Copy pathindex.html
122 lines (110 loc) · 3.92 KB
/
index.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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>F1 Championship Predictor</title>
<link rel="stylesheet" href="css/style.css" />
<!-- <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'> -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
/>
</head>
<body>
<div class="container-fluid">
<h3 class="text-center display-4 my-5 font-weight-bold ">
Current Standings
</h3>
<!-- START OF CURRENT STANDINGS TABLE-->
<div
class="table-responsive table-standings rounded border border-dark shadow-lg"
>
<table
class="table table-bordered table-hover table-striped"
id="current-standings"
>
<thead class="thead-dark">
<tr>
<th>Position</th>
<th>Driver</th>
<th>Constructor</th>
<th>Points</th>
<th>Wins</th>
</tr>
</thead>
<tbody id="current-standings-data" class="labels"></tbody>
<tfoot>
<tr class="bg-light text-dark">
<td colspan="5" class="text-center">
Data retrieved from
<a href="https://ergast.com/mrd/" target="_blank"
>Ergast Developer API </a
>.
</td>
</tr>
</tfoot>
</table>
</div>
<!--end of current standing-->
<!-- Start of Predictor -->
<h3 class="text-center display-4 my-5 font-weight-bold">
Predict the Winner
</h3>
<div class="table-responsive rounded border border-dark shadow-lg mb-5">
<table class="table table-bordered table-hover" id="predictor-table">
<thead class="thead-dark">
<tr id="predictor-heading">
<th>Race Grand Prix</th>
</tr>
</thead>
<tbody id="upcoming-races"></tbody>
<tfoot>
<tr class="bg-light text-dark">
<td colspan="30" class="text-center">
Data retrieved from
<a href="http://ergast.com/mrd/" target="_blank"
>Ergast Developer API</a
>.
</td>
</tr>
</tfoot>
</table>
</div>
</div>
<!-- End of Predictor -->
<script id="current-standing-row" type="text/x-handlebars-template">
{{#each driver_standings}}
<tr>
<td>{{position}}</td>
<td>{{ Driver.givenName }} {{ Driver.familyName }}</td>
<td> {{ Constructors.0.name }}</td>
<td>{{ points }}</td>
<td>{{ wins }}</td>
</tr>
{{/each}}
</script>
<script id="driver-name-heading" type="text/x-handlebars-template">
{{#each driver_codes}}
<th> {{ Driver.code }} </th>
{{/each}}
</script>
<script id="race-name" type="text/x-handlebars-template">
{{#each race_names}}
<tr class="input-box">
<td> {{ raceName }} <p> {{ date }} </p> </td>
</tr>
{{/each}}
</script>
<script id="input-pos" type="text/x-handlebars-template">
{{#each driver_codes}}
<td> <input type="number" class="input" name="quantity" min="1" max="20" /> </td>
{{/each}}
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.10/handlebars.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/pace.min.js"></script>
<script src="js/index.js"></script>
</body>
</html>