How to built age calcultor?

[pardhikhush]

so i build age calculator, here is the code of age calculator..

<div ><label for="birth_date">Birth Date: </label>
  <input type="text" id="birth_date" /></div>
<div id="age" style="padding-top:2em;"></div>

#main_container {
    width: 400px;
    margin: 20px;
    margin-left: auto;
    margin-right: auto;
    padding: 30px;
    font-family: sans-serif;
    border-radius: 20px;
    border: 3px solid #999;
}

#birth_date_input, #age_container {
    text-align: center;
    margin: 20px;
    margin-left: auto;
    margin-right: auto;
}

#age_container {
    margin: 40px 5px;
    padding: 20px;
    border-radius: 50px;
    border: 1px solid #000;
    font-weight: bolder;
    background: #EEE;
    font-size: 20px;
    line-height: 40px;
}

#calculate {
    cursor: pointer;
    text-align: center;
    width: 200px;
    padding: 5px;
    margin: 10px;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid #999;
    border-radius: 10px;
    background: #FFD119;
    background: -webkit-gradient(linear, left top, left bottom, from(#FFD119), to(#E6B800));
    background: -moz-linear-gradient(top, #FFD119, #E6B800);
    font-weight: bold;
    height: 28px;
    box-shadow: 0 -8px inset;
}

#calculate:hover {
    background: -webkit-gradient(linear, left top, left bottom, from(#E6B800), to(#FFD119));
    background: -moz-linear-gradient(top, #E6B800, #FFD119);
    margin-top: 13px;
    height: 25px;
    box-shadow: 0 -5px inset;
}

#calculate:active {
    background: #403300;
    padding-top: 10px;
    height: 20px;
    box-shadow: 0 5px #000 inset;
}

#age {
    padding: 5px;
    border: 3px dashed #AAA;
    background-color: green;
}
html{
    background:rgb(100, 100, 1000);
}
function calculateAge(date)
{
  const now = new Date();
  const diff = Math.abs(now - date );
  const age = Math.floor(diff / (1000 * 60 * 60 * 24 * 365));
  return age
}

var picker = new Pikaday({
  field: document.getElementById('birth_date') ,
  yearRange:[1900,2020],
  onSelect: function(date) {
  let age = calculateAge(date);
  document.getElementById('age').innerHTML = "age: "+age ;

  }                       
});

here is the features that i try to bring in this age calculator.
what is age calculator ?
At age calculator
1. you can calculate your age in days
2. age calculator calculates age in seconds.
3. age calculator calulates age in minutes.
4age calculator calculates age in months.
5. age calculator calculates in years,
Why we need age calculator ?
So let’s first understand the age calculator, age calculator has many terms. Different people call age calculator differnetly. Some calls it age calculator, Some calls birth calculator,Some calls date of birth calculator, Some calls dob calculator, some calls date of birth calculation.

 

[Johna]

I think this thread belongs in Share with the community