<!DOCTYPE html> | |
<html lang="en-us"> | |
<head> | |
<title>Astronaut Counter</title> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<meta charset="UTF-8"> | |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" async></script> | |
<style> | |
* { | |
box-sizing: border-box; | |
} | |
body { | |
width: 100vw; | |
height: 100vh; | |
text-align: center; | |
font-size: 1.3em; | |
font-family: sans-serif; | |
background: url(https://seewitheyesclosed.com/projects/astronaut-counter/daniel-olah-HNkgPFBShSw-unsplash.jpg); | |
background-size: cover; | |
background-position: center; | |
color: #fff; | |
overflow: hidden; | |
} | |
body div { | |
position: absolute; | |
left: 50%; | |
top: 50%; | |
text-align: left; | |
transform: translate(-50%, -50%); | |
background-color: rgba(175,175,175,0.5); | |
padding: 1em; | |
border-radius: 1em; | |
width: 420px; | |
max-width: 90vw; | |
} | |
p { | |
opacity: 0; | |
transition: opacity 1s; | |
} | |
a { | |
color: #fff; | |
font-weight: bold; | |
} | |
</style> | |
</head> | |
<body> | |
<div> | |
<p style="opacity:1"><b id="total">0</b> people have been in space</p> | |
<p style="text-align:center"><em>of these...</em></p> | |
<p><b id="male">0</b> were male</p> | |
<p><b id="female">0</b> were female</p> | |
<p><b id="died">0</b> died in or attempting later spaceflight</p> | |
<p><b id="moon">0</b> walked on the Moon</p> | |
<p><b id="now">0</b> are currently in space</p> | |
<p style="text-align:center;font-size:0.7em">Based on data from <a href="https://en.wikipedia.org/wiki/List_of_space_travelers_by_name" target="_blank" rel="noopener">Wikipedia</a></p> | |
</div> | |
<script> | |
//var data = JSON.parse(document.getElementById("data").innerText)['query']['pages']['9021683']['revisions'][0]["*"].split("{{compact ToC|side=yes|top=yes|num=yes}} __NOTOC__\n\n==A==")[1].split("\n*"); | |
$.getJSON("https://en.wikipedia.org/w/api.php?action=query&prop=revisions&rvprop=content&titles=List%20of%20space%20travelers%20by%20name&format=json&origin=*", function(response){ | |
var data = response.query.pages[9021683].revisions[0]["*"].split("\n*"); | |
var male = 0; | |
var female = 0; | |
var moon = 0; | |
var died = 0; | |
var now = 0; | |
function counter(number, element) { | |
function countUp() { | |
if (parseInt(element.innerText) < number) { | |
element.innerText = parseInt(element.innerText) + 1; | |
} else { | |
clearInterval(counterInterval); | |
} | |
} | |
var counterInterval = setInterval(countUp, 10); | |
} | |
for (var i in data) { | |
if (data[i].indexOf("[[File:Blue Mars symbol.svg|frameless|12x12px|alt=male]]") != -1) male++; | |
if (data[i].indexOf("[[File:Symbol venus.svg|10px|alt=female]]") != -1) female++; | |
if (data[i].indexOf("[[File:Injury icon 2.svg|15px|alt=died]]") != -1) died++; | |
if (data[i].indexOf("[[File:Moon symbol decrescent.svg|15px|alt=moonwalked]]") != -1) moon++; | |
if (data[i].indexOf("[[File:Star*.svg|15px|alt=star]]") != -1) now++; | |
} | |
counter(male + female, document.getElementById("total")); | |
setTimeout(function () { | |
document.getElementsByTagName("P")[1].style.opacity = "1"; | |
document.getElementsByTagName("P")[2].style.opacity = "1"; | |
counter(male, document.getElementById("male")); | |
}, (male + female) * 10); | |
setTimeout(function () { | |
document.getElementsByTagName("P")[3].style.opacity = "1"; | |
counter(female, document.getElementById("female")); | |
}, (male + female + male) * 10); | |
setTimeout(function () { | |
document.getElementsByTagName("P")[4].style.opacity = "1"; | |
counter(died, document.getElementById("died")); | |
}, (male + male + female + female) * 10); | |
setTimeout(function () { | |
document.getElementsByTagName("P")[5].style.opacity = "1"; | |
counter(moon, document.getElementById("moon")); | |
}, (male + male + female + female + died) * 10); | |
setTimeout(function () { | |
document.getElementsByTagName("P")[6].style.opacity = "1"; | |
counter(now, document.getElementById("now")); | |
}, (male + male + female + female + died + moon) * 10); | |
setTimeout(function () { | |
document.getElementsByTagName("P")[7].style.opacity = "1"; | |
}, (male + male + female + female + died + moon + now) * 10); | |
}); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This comment has been minimized.
Live demo: https://seewitheyesclosed.com/projects/astronaut-counter/