Retirement Calculator I created a program that determines how many years you have 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&gt;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");
     });
});
&lt;link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/&gt;
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"&gt;&lt;/script&gt;
&lt;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"&gt;

&lt;body&gt;
&lt;div class="container text-center m-5"&gt;
 &lt;button type="button" class="btn btn-primary" id="btn"&gt;Retirement Calculator&lt;/button&gt;
&lt;/div&gt;

&lt;form id="form"&gt;
    &lt;div class="form-group"&gt;
        &lt;label&gt;What is your current age?&lt;/label&gt;
        &lt;input type="number" class="form-control" id="currentAge" oninput="validity.valid||(value='');" min="0" style="width: 90px"&gt;  
    &lt;/div&gt;
    &lt;div class="form-group"&gt;
        &lt;label&gt;At what age would you like to retire?&lt;/label&gt;
        &lt;input type="number" class="form-control" id="retireAge" oninput="validity.valid||(value='');" min="0" style="width: 90px"&gt;  
    &lt;/div&gt;
&lt;/form&gt;

&lt;div id="message1"&gt;
 &lt;p&gt;You have &lt;span class="newAge"&gt;&lt;/span&gt; years left until you can retire.&lt;/p&gt;
 &lt;p&gt;It's &lt;span class="currentYear"&gt;&lt;/span&gt;, so you can retire in &lt;span class="retireYear"&gt;&lt;/span&gt;.&lt;/p&gt;
&lt;/div&gt;
&lt;div id="message2"&gt;
 &lt;p&gt;You could retire &lt;span class="newAge"&gt;&lt;/span&gt; years ago.&lt;/p&gt;
 &lt;p&gt;It's &lt;span class="currentYear"&gt;&lt;/span&gt;, so you could retire in &lt;span class="retireYear"&gt;&lt;/span&gt;.&lt;/p&gt;
&lt;/div&gt;
&lt;/body&gt;




I will appreciate any advice about code.
Since you're using some ES6+ features, I'd definitely recommend looking into others, such as let, arrow functions, and so on. This website is a good start, and you can find more information by searching "javascript es6".
Adding onto the last point, whenever you don't change a variable, prefer using const for consistency's sake. If you do need to change a variable, use let. Note that you can change properties on objects declared with const, but you still can't reassign the variable. You can look up more details on the website I linked.
The result function can be improved.

First off, it doesn't look like the return value is being used at all, so there's no need to return anything from it.

Secondly, if an element is referenced multiple times from jQuery, it's usually a good idea to cache it in a variable, so jQuery doesn't have to unnecessarily query the DOM multiple times. In small cases like this the performance difference doesn't matter much, but it's still a decent habit to pick up.


Here's what you'd end up with for the result function, as an example:

const result = (a, b) =&gt; {
  const $newAge = $(".newAge")
  const $retireYear = $(".retireYear")

  $(".currentYear").text(currentYear)
  if (b &gt; a) {
    $newAge.text(b - a)
    $retireYear.text(currentYear + (b - a))
    message1.dialog("open")
  } else {
    $newAge.text(a - b)
    $retireYear.text(currentYear - (a - b))
    message2.dialog("open")
  }
}