<!DOCTYPE html>
<html>
<head>
  <title>100 years....</title>
</head>
<body style = "text-align:center;">

  <hr>
  <!-- The form start -->
  <label>Name: </label> <input type="text" id="name">
  <label>Age: </label> <input type="number" id="age">
  <button onclick="fun100()">Submit</button>

  <hr>
  <p id="p" style="font-size: 20px; color: gray;"></p>
  <!-- The form end -->

  
</body>
</html>


function fun100() {
      // Get the input values into variables...
      let name = document.getElementById('name').value;
      let age = document.getElementById('age').value;

      // Grab the current year...
      var current_date = new Date();
        var current_year = current_date.getFullYear();

      // calculate the year input age will be 100...
      let year = (current_year - age) + 100


      // Check if age is above 100 and write appropraite option to DOM..
      if (age >= 100){
        document.getElementById('p').innerHTML = name + " has already attained 100 years old";
      } else{
        document.getElementById('p').innerHTML = name + " will be 100 years old in the year " + year
      }

    }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.