JSFiddle - React, Tailwind, and code Playground

by Vladimir

HTML

<h2>Enter your birthday:</h2>
<input type="date" id="birthday" />
<h2>Today is</h2>
<div id="today">
</div>
<div id="result">
 <h2>You are <span id="years"></span> years <span id="months"></span> months <span id="days"></span> days old.</h2>
</div>

CSS

body {
  font-size: 16px;
  text-align: center;
  font-family: sans-serif;
  background: #C6FFDD;  /* fallback for old browsers */
  background: -webkit-linear-gradient(left, #f7797d, #FBD786, #C6FFDD);
  background: -moz-linear-gradient(left, #f7797d, #FBD786, #C6FFDD);
  background: -o-linear-gradient(left, #f7797d, #FBD786, #C6FFDD);
  background: linear-gradient(to right, #f7797d, #FBD786, #C6FFDD);  /* Chrome 10-25, Safari 5.1-6 */ /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
#result {
  display:none;
}

JavaScript

var  leadZero = function(n)  {
	return n > 9 ? n : '0'+n; 
}
window.addEventListener('load', function() {
	var today = new Date();
  var y2 = today.getFullYear();
  var m2 = today.getMonth() + 1;
  var d2 = today.getDate();
  var todayDisplay = leadZero(m2) + '/' + leadZero(d2) + '/' + y2;
  document.querySelector('#today').innerText = todayDisplay;
  
  document.querySelector('#birthday').addEventListener('change', function(e)  {
  	var parts = this.value.split('-');
    var y1 = parts[0];
    var m1 = parts[1];
    var d1 = parts[2];
  	var birthDay = new Date(y1, m1-1, d1);
    var dayDiff = 0;
    var monthDiff = 0;
    var yearDiff = y2-y1;
    if(m2 < m1 || (m2 == m1 && d2 < d1)) {
    	yearDiff -= 1;
      monthDiff += 12;
    }
    monthDiff += m2 - m1;
    if(d2 < d1) {
    	monthDiff -= 1;
      dayDiff += 30;
    }
    dayDiff  += d2 -d1;
    document.querySelector('#years').innerText = yearDiff;
    document.querySelector('#months').innerText = monthDiff;
    document.querySelector('#days').innerText = dayDiff;
    document.querySelector('#result').style.display = 'block';
  });
});