-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
141 lines (132 loc) · 5.84 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
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<html>
<head>
<title>What happened today ?</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="index.css">
<link rel="icon" type="image/png" href="img/icon.png" />
<!-- VueJS -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- Axios -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- Materialize Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Materialize Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<!-- WNumb -->
<script src="https://unpkg.com/[email protected]"></script>
<!-- noUISlider min js -->
<script src="https://unpkg.com/[email protected]/distribute/nouislider.min.js"></script>
<!-- noUISlider min css -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/distribute/nouislider.min.css">
</head>
<body>
<div class="navbar-fixed">
<nav id="header">
<div class="nav-wrapper">
<span class="brand-logo">What happened on the {{inputDate}} ?</span>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li>
<input v-model.lazy="inputDate" type="text" class="datepicker" @change="changeDate()">
</li>
<li>
<a href="https://github.com/Okuuu/What-happened-today" target="_blank">
I'm open source, check me on github !
</a>
</li>
</ul>
</div>
</nav>
</div>
<div id="data">
<div id="events">
<h2> Events : </h2>
<div style="width: 95%;" id="sliderEvent" class="slider"></div>
<ul class="collapsible">
<li>
<div v-if="length > 1" class="collapsible-header">
There are {{length}} events in the database
</div>
<div v-else-if="length === 1" class="collapsible-header">
There is {{length}} event in the database
</div>
<div v-else-if="length === 0" class="collapsible-header">
There are no events in the database
</div>
<div class="collapsible-body">
<ul class="collection">
<li v-for="event in info" class="collection-item" v-if="event.wikipedia[0]">
<strong>
{{event.year}}
</strong>
-
{{event.description}}
</li>
</ul>
</div>
</li>
</ul>
</div>
<div id="births">
<h2> Births : </h2>
<div style="width: 95%;" id="sliderBirths" class="slider"></div>
<ul class="collapsible">
<li>
<div v-if="length > 1" class="collapsible-header">
There are {{length}} births in the database
</div>
<div v-else-if="length === 1" class="collapsible-header">
There is {{length}} birth in the database
</div>
<div v-else-if="length === 0" class="collapsible-header">
There are no births in the database
</div>
<div class="collapsible-body">
<ul class="collection">
<li v-for="birth in info" class="collection-item">
<a v-bind:href="birth.wikipedia[0].wikipedia" v-if="birth.wikipedia[0]" target="_blank">
<strong>
{{ birth.year }}
</strong>
-
{{ birth.description }}
</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
<div id="deaths">
<h2> Deaths : </h2>
<div style="width: 95%;" id="sliderDeaths" class="slider"></div>
<ul class="collapsible">
<li>
<div v-if="length > 1" class="collapsible-header">
There are {{length}} deaths in the database
</div>
<div v-else-if="length === 1" class="collapsible-header">
There is {{length}} death in the database
</div>
<div v-else-if="length === 0" class="collapsible-header">
There are no deaths in the database
</div>
<div class="collapsible-body">
<ul class="collection">
<li v-for="death in info" class="collection-item">
<a v-bind:href="death.wikipedia[0].wikipedia" v-if="death.wikipedia[0]" target="_blank">
<strong>
{{ death.year }}
</strong>
-
{{ death.description }}
</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
<script src="index.js"></script>
</body>
</html>