index.html

   1 <!DOCTYPE html>
   2 <html>
   3         <head>
   4                 <meta charset="utf-8">
   5                 <title>YOU ARE AN EGG</title>
   6                 <style>
   7                         * {font-size: 30px}
   8                 </style>
   9                 <script>
  10                         addEventListener("DOMContentLoaded", _ => {
  11                                 const elem = document.getElementById("name")
  12
  13                                 elem.addEventListener("input", _ => {
  14                                         fetch("https://api.genderize.io?name=" + elem.value)
  15                                                 .catch(_ => {document.getElementById("head").innerHTML = "Gefickt!"})
  16                                                 .then(res => res.json())
  17                                                 .then(data => ({female: 0, male: 1})[data.gender])
  18                                                 .catch(_ => undefined)
  19                                                 .then(gender => {
  20                                                         if (gender === undefined)
  21                                                                 document.getElementsByName("gender").forEach(elem => {elem.checked = false})
  22                                                         else
  23                                                                 document.getElementById("gender." + (1 - gender)).checked = true
  24                                                 })
  25                                 })
  26                         })
  27                 </script>
  28         </head>
  29         <body>
  30                 <img src="egg.png">
  31                 <form>
  32                         <center>
  33                                 <h1 id="head">USE THIS APP TO FIND OUT YOUR TRUE GENDER</h1>
  34                                 <h2 style="font-size:2px">(&amp;if ur mom gae)</h1>
  35                                 <input type="text" placeholder="(legal) first name" id="name">
  36                                 <br><br>
  37                                 <input type="radio" name="gender" value="female" id="gender.0" onclick="return false"><label for="gender.female">Female</label>
  38                                 <br>
  39                                 <input type="radio" name="gender" value="male" id="gender.1" onclick="return false"><label for="gender.male">Male</label>
  40                         </center>
  41                 </form>
  42         </body>
  43 </html>