To create a html, css and Java script code for calculation of retirement date is given as follows. You can apply necessary changes according to your need.
To create webpage for calculation of retirement date You need to to use HTML for basic structure, CSS for its styling to make it more user experiensive and Use JavaScript to make it interactive. These three languages has been used to design the Webpage to calculate retirement date. Explore the following code structure.
<!DOCTYPE html>
<html>
<head>
<title>Retirement Date Calculator</title>
<style>
/* Add css style to make it to look beautiful*/
label {
display:block;
margin:10px auto;
text-align:center;
color:white;
font-size:22px;
font-weight:800;
}
input[type=date], input[type=number] {
display:block;
margin:10px auto;
font-size:22px;
padding:5px;
}
#retire-btn {
display:block;
margin:10px auto;
font-size:25px;
font-weight:800;
padding:5px;
border-radius:8px;
}
</style>
</head>
<body>
<div style="background:green; padding:20px;">
<h1 style="color:white;text-align:center;">Retirement Date Calculator</h1>
<label for="dob">Date of Birth:</label>
<input type="date" id="dob"><br><br>
<label for="retirementAge">Retirement Age:</label>
<input type="number" id="retirementAge" min="1" max="100" value="62"><br><br>
<button id="retire-btn" onclick="calculateRetirementDate()">Calculate</button><br><br>
<h2 style="color:white;text-align:center;">Retirement Date:</h2>
<p style="color:white;text-align:center;font-size:25px; font-weight:800;"id="retirementDate"></p>
<script>
//JavaScript function start
function calculateRetirementDate() {
var dob = new Date(document.getElementById("dob").value);
var retirementAge = parseInt(document.getElementById("retirementAge").value);
var retirementDate = new Date(dob.getFullYear() + retirementAge, dob.getMonth(), dob.getDate());
var options = { year: 'numeric', month: 'long', day: 'numeric' };
var formattedDate = retirementDate.toLocaleDateString(undefined, options);
document.getElementById("retirementDate").innerHTML = "You will retire on " + formattedDate + ".";
}
//End of javascript function
</script>
</div>
</body>
</html>
For live preview click below
Post a Comment
"Thank you for taking the time to engage with this post! We value thoughtful and constructive comments that contribute to the discussion. Please keep your comments respectful and on-topic. We encourage you to share your insights, ask questions, and participate in meaningful conversations. Note that comments are moderated, and any inappropriate or spammy content will be removed. We look forward to hearing your thoughts!"