| <!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"> | |
| <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 src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> | |
| <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/