Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<!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>
@benjaminbhollon

This comment has been minimized.

Copy link
Owner Author

@benjaminbhollon benjaminbhollon commented Mar 5, 2021

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment