0

I am trying to create a Birthday Calculator that also includes months and days, not just years.

However I can't seem to get it to post the answer, and when it was posting it was incorrect.

I'm still learning, so I would really appreciate any feedback, and I'm hoping it is something simple that I overlooked.

//birthday (entered by user)
function calculateDiff(){
  var FromYear = parseInt(date[2]);
  var FromMonth = parseInt(date[1]);
  var FromDay = parseInt(date[0]);


  //current date
  var ToYear = today.getFullYear();
  var ToMonth = today.getMonth() + 1;
  var ToDay = new Date();
  var years, months, days;

  //months
  months = ToMonth - FromMonth;
  if(ToDay < FromDay) {
 months = months -1;
  }


  //years
  years = ToYear = FromYear;
  if(ToMonth < FromMonth) {
 years = years - 1;
 months = months + 12;
  }

  //days
  days = Math.floor((ToDay.getTime() - (newDate(FromYear + years, FromMonth + months - 1, FromDay)).getTime()) / (24 * 60 * 60 * 1000));

  //answer order
  var answer = years + " years, " + months + " months, and " + days + " days.";

  //post answer
  document.getElementById("result").textContent =  answer;
  return {years: years, months: months, days: days};
}
    <table>
        <tbody>
        <tr class="header">
          <th>&nbsp;</th>
          <th>Year</th>
          <th>Month</th>
          <th>Day</th>
        </tr>
        <tr>
       <th>Birth Date</th>
          <td><input  id="FromYear"  placeholder="YYYY" value=""></td>
          <td><input  id="FromMonth" placeholder="MM" value=""></td>
          <td><input  id="FromDay"   placeholder="DD" value=""></td>
        </tr>

        <tr>
          <th colspan="4">
            <button id="calculateDiff">Calculate</button>
          </th>
        </tr>
        <tr colspan="4">
          <th>You are <div id="result"></div></th>
      </tr>
      </tbody>
    </table>
Priyank_Vadi
  • 1,028
  • 10
  • 27
  • refer this https://stackoverflow.com/questions/17732897/difference-between-two-dates-in-years-months-days-in-javascript – Harish Jul 01 '19 at 12:07
  • 2
    This is obviously not the full code. The button isn't bound to any function, The `date`, `today` variables don't exist and the `newDate` function is also not defined. – MauriceNino Jul 01 '19 at 12:07

1 Answers1

0

You can try below code

<script>
function calculateDiff(){
  var FromYear = parseInt(document.getElementById("FromYear").value);
  var FromMonth = parseInt(document.getElementById("FromMonth").value);
  var FromDay = parseInt(document.getElementById("FromDay").value);


  //current date
  var today = new Date();
  var ToYear = today.getFullYear();
  var ToMonth = today.getMonth() + 1;
  var ToDay = today.getDay()
  var years, months, days;

  //months
  months = ToMonth - FromMonth;
  if(ToDay < FromDay) {
    months = months -1;
  }


  //years
  years = ToYear - FromYear;
  if(ToMonth < FromMonth) {
    years = years - 1;
    months = months + 12;
  }

  //days
  days = Math.floor(31 - (FromYear + years, FromMonth + months - 1, FromDay));

  //answer order
  var answer = years + " years, " + months + " months, and " + days + " days.";

  //post answer
  document.getElementById("result").textContent =  answer;
  return {years: years, months: months, days: days};
}
</script>



   <table>
        <tbody>
        <tr class="header">
          <th>&nbsp;</th>
          <th>Year</th>
          <th>Month</th>
          <th>Day</th>
        </tr>
        <tr>
       <th>Birth Date</th>
          <td><input  id="FromYear"  placeholder="YYYY" value=""></td>
          <td><input  id="FromMonth" placeholder="MM" value=""></td>
          <td><input  id="FromDay"   placeholder="DD" value=""></td>
        </tr>

        <tr>
          <th colspan="4">
            <button id="calculateDiff" onclick="calculateDiff()">Calculate</button>
          </th>
        </tr>
        <tr colspan="4">
          <th>You are <div id="result"></div></th>
      </tr>
      </tbody>
    </table>
Priyank_Vadi
  • 1,028
  • 10
  • 27