So, it is a simple JavaScript code to calculate when an age will be 100 years old. The HTML form as seen above will consist of basic text labels and inputs.
The primary objective of the exercise is to show how to interact with the DOM:-
1- Get text from input box
2- Process the text values and
3- Write the processed text to HTML page
The JS Code
<!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 -->
<script>
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
}
}
</script>
</body>
</html>
No comments:
Post a Comment