I created a program that determines how many years you left before retiring, and in a year when you can retire.
This is my code below:
$(function(){
const currentYear = (new Date).getFullYear();
var convert = function(a){
return parseInt(a.val());
}
var result = function(a, b){
$('.currentYear').text(currentYear);
if (b>a){
$('.newAge').text(b - a);
$('.retireYear').text(currentYear + (b - a));
message1.dialog("open");
return message1
} else {
$('.newAge').text(a - b);
$('.retireYear').text(currentYear - (a - b));
message2.dialog("open");
return message2
}
}
const message1 = $("#message1").dialog({autoOpen: false});
const message2 = $("#message2").dialog({autoOpen: false});
const form = $("#form").dialog({
autoOpen: false,
modal: true,
buttons:[{
text: "Сount",
icon: "ui-icon-contact",
click: function(){
$( this ).dialog( "close" );
var str1 = convert($('#currentAge'));
var str2 = convert($('#retireAge'));
result(str1, str2);
}
}]
});
$("#btn").click(function(){
form.dialog("open");
});
});
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<body>
<div class="container text-center m-5">
<button type="button" class="btn btn-primary" id="btn">Retirement Calculator</button>
</div>
<form id="form">
<div class="form-group">
<label>What is your current age?</label>
<input type="number" class="form-control" id="currentAge" oninput="validity.valid||(value='');" min="0" style="width: 90px">
</div>
<div class="form-group">
<label>At what age would you like to retire?</label>
<input type="number" class="form-control" id="retireAge" oninput="validity.valid||(value='');" min="0" style="width: 90px">
</div>
</form>
<div id="message1">
<p>You have <span class="newAge"></span> years left until you can retire.</p>
<p>It's <span class="currentYear"></span>, so you can retire in <span class="retireYear"></span>.</p>
</div>
<div id="message2">
<p>You could retire <span class="newAge"></span> years ago.</p>
<p>It's <span class="currentYear"></span>, so you could retire in <span class="retireYear"></span>.</p>
</div>
</body>
I will appreciate any advice about code.
