-
Notifications
You must be signed in to change notification settings - Fork 2
/
How_Many_Apocalypses_Have_I_Survived_v2.html
executable file
·129 lines (126 loc) · 5.45 KB
/
How_Many_Apocalypses_Have_I_Survived_v2.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
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>How Many Apocalypses Have I Survived?</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
html, body {
height:100%;width:100%;
margin:0;
padding:0;
}
body {
font:100%/1.5 sans-serif;
display: -webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-pack: center;
-webkit-box-align: center;
display: -moz-box;
-moz-box-orient: horizontal;
-moz-box-pack: center;
-moz-box-align: center;
display: box;
box-orient: horizontal;
box-pack: center;
box-align: center;
text-align:center;
}
#main {
max-width:90%;
}
#year, #submit {
display:inline-block;
font-size:2em;
line-height:1.5;
}
#social {
margin:1em;
}
h1 {font-size:2em}
#result, #form {display:none}
#result {margin-top:1em;}
table#output { border-collapse: collapse }
#output td { border: 1px #AAA solid; padding:0.2em }
#output tr:last-child { display:none }
</style>
</head>
<body>
<div id="main">
<div id="loading">Loading<br/><img src="http://cdnjs.cloudflare.com/ajax/libs/file-uploader/3.7.0/loading.gif" alt="" /></div>
<form id="form" action="#">
<h1>Find out how many times you've survived "the apocalypse"</h1>
<input type="text" id="year" placeholder="Year of Birth"/><button type="submit" id="submit">»</button>
</form>
<div id="result">
<h2>You have survived <span id="counter"></span> times.</h2>
<p>Find out more on <a href="https://en.wikipedia.org/wiki/List_of_dates_predicted_for_apocalyptic_events">wikipedia</a></p>
<table id="output"></table>
<div id="social">
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://bit.ly/ZqUg4K" data-text="how many times have you survived the apocalypse?" data-via="JKirchartz" data-related="jkirchartz">Tweet</a>
<div class="fb-like" data-href="http://jkirchartz.com/demos/How_Many_Apocalypses_Have_I_Survived.html" data-send="false" data-width="450" data-show-faces="false"></div>
</div>
</div>
<div id="fb-root"></div>
<script>
var getYears = [],
count = 0,
d = new Date(),
currYear = d.getFullYear();
$(function() {
$.getJSON("http://en.wikipedia.org/w/api.php?action=parse&rvprop=content&page=List_of_dates_predicted_for_apocalyptic_events&format=json&callback=?",
function(data) {
$(data.parse.text["*"]).find("tr").each(function() {
if(!!window.console){
console.log(this);
}
var origin = $(this).find("td:first").text();
if (origin.search(/\d\d+/) != -1) {
getYears.push([origin.replace(/,/gi, ""),this]);
}
});
$("#loading").hide();
$("#form").show();
});
});
$("#form").on("submit", function(e) {
e.preventDefault();
var inputYear = parseInt($("#year").val(),10),
output = [];
if(!inputYear){
$("#year").val("");
alert("Try a number, genius.");
return false;
}
getYears.map(function(item) {
var yr = item[0].match(/\d{3,9}/);
if (yr !== null &&
(yr >= inputYear) &&
(yr <= currYear)
) {
output.push(item[1]);
count++;
}
});
$("#counter").text(count);
$("#output").html(output);
$("#result").show();
count = 0;
return false;
});
$("#output a").live("click",function(e){
e.preventDefault();
window.open("http://en.wikipedia.org/" + $(this).attr('href'));
});
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
</script>
</body>
</html>