Back to Museum

Random Birthday Input

Why pick from a calendar when you can play the lottery? Just keep clicking "No" until we randomly generate your exact date of birth out of the last 126 years!

Live Preview

Please confirm if the date below is correct.

Generated Date Loading...

Is this your birthday?

Source Code

random_birthday.html
<h1>Enter your birthday</h1>

<label for="random_birthday">Birthday: </label>
<div id="random_birthday" name="random_birthday">01 June 1900</div>

<p>Is this your birthday?</p>
<button onclick="yipee()">Yes</button>
<button onclick="randomNewBirthday()">No</button>

<p id="res"></p>

<script>
  const box = document.getElementById('random_birthday');
  const res = document.getElementById('res');

  const startDate = new Date(1900, 0, 1);
  const endDate = new Date();

  let birthday;

  function randomDateGen(start, end) {
    const random_time_stamp = +start + Math.random() * (end - start);
    return [
      new Date(random_time_stamp).getDate(), 
      new Date(random_time_stamp).getMonth(), 
      new Date(random_time_stamp).getFullYear()
    ];
  }

  function determineMonth(data) {
    const month = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
    return month[data[1]];
  }

  function randomNewBirthday() {
    let new_date = randomDateGen(startDate, endDate);
    let new_month = determineMonth(new_date);
    
    // Pad single digits
    let day = new_date[0] < 10 ? '0' + new_date[0] : new_date[0];
    let parsed_date = `${day} ${new_month} ${new_date[2]}`;

    box.innerText = parsed_date;
    birthday = parsed_date;
  }

  function yipee() {
    res.innerText = `Your birthday is on ${birthday}`;
  }

  window.addEventListener('load', (event) => { randomNewBirthday(); });
</script>