<!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.