-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathfunfact.html
143 lines (117 loc) · 3.61 KB
/
funfact.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
142
143
<html>
<head>
<meta charset="utf8"/>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h1>Funfact generator</h1>
<p id="funfact-body" style="font-size: 1.5em">(body)</p>
<div class="checkbox">
<label>
<input checked id="checkbox-country" onclick="toggleCountry()" type="checkbox"> Country
</label>
<select id="select-country" class="form-control">
<option value="Norway">Norway</option>
<option value="United States">United States</option>
</select>
</div>
<div class="checkbox">
<label>
<input id="checkbox-person" type="checkbox"> Person
</label>
</div>
<div class="checkbox">
<label>
<input onclick="toggleField()" id="checkbox-country" type="checkbox"> Field
</label>
</div>
<div class="checkbox">
<label>
<input id="checkbox-animals" type="checkbox"> Animals
</label>
</div>
<button onclick="newFunfact();" class="btn btn-primary">Funfact!</button>
</div>
<hr/>
<button id="button-new-random-person" onclick="newRandomPerson()" class="btn btn-primary">New person</button>
<div>
<span id="reference"></span>
<div id="infobox"></div>
</div>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script>
var funfacts = [
{
body: 'Jorden er rund',
country: 'Norway'
},
{
body: 'Katter er pattedyr',
country: 'Norway'
},
{
body: 'Neil Armstrong var den første mannen på månen',
country: 'United States'
}
];
var body = document.querySelector('#funfact-body');
// input stuff
var checkboxCountry = document.querySelector('#checkbox-country');
var selectCountry = document.querySelector('#select-country');
function newFunfact() {
var criteria = {};
// build criteria object
if (checkboxCountry.checked) {
var country = selectCountry.value;
criteria.country = country;
}
// filter the funfacts based on criteria
var eligibleFunfacts = funfacts.filter(function(funfact) {
for (var criterium in criteria) {
if (funfact[criterium] !== criteria[criterium]) {
return false;
}
return true;
}
});
// select a random eligible funfact and display it.
var funfactId = Math.floor(Math.random() * eligibleFunfacts.length);
body.innerHTML = eligibleFunfacts[funfactId].body;
}
function toggleCountry() {
if (checkboxCountry.checked) {
selectCountry.setAttribute('style', 'display: block;');
} else {
selectCountry.setAttribute('style', 'display: none;');
}
}
newFunfact();
function newRandomPerson() {
var buttonNewRandomPerson = document.getElementById('button-new-random-person');
buttonNewRandomPerson.disabled = true;
var urls = [
'https://en.wikipedia.org/wiki/Leonardo_da_Vinci',
'https://en.wikipedia.org/wiki/Edvard_Munch',
'https://en.wikipedia.org/wiki/John_F._Kennedy',
'https://en.wikipedia.org/wiki/Sigrid_Undset',
'https://en.wikipedia.org/wiki/Ivar_Aasen',
'https://en.wikipedia.org/wiki/Nikola_Tesla',
'https://en.wikipedia.org/wiki/Thomas_Edison'
];
var url = urls[Math.floor(Math.random() * urls.length)];
$.ajax('http://localhost:1234?url=' + url)
.done(function(data) {
var table = data.substring(
data.indexOf('<table class="infobox'),
data.indexOf('</table>') + '</table>'.length
);
$('#infobox').html(table);
$('#reference').html('<a href="' + url + '">' + url + '</a>');
buttonNewRandomPerson.disabled = false;
});
}
newRandomPerson();
</script>
</body>
</html>