1
\$\begingroup\$

I have created a simple jQuery based finance calculator.

Just to make it easy to read I will list below all the functionality and validation it has.

Functionalities:

  • Ability to enter the amount you would like to borrow
  • Ability to select the repayment period (in months) by dragging the slider

Validation:

  • Check if the amount is between £400 and £2000 (including empty input field)
  • Re-calculate repayments through the slider or "UPDATE" button.

Since I am new to jQuery I would like to hear from you if I have followed best practices in building it and if there is something I can improve/optimize on it from your point of view.

Please see link to MY JSFIDDLE

I have also listed my jQuery code below:

(function($) {
  "use strict";
  $(document).ready(function() {
    //Finance Amount Field
    $("#update_financeAmount").click(function() {
      //Validation | Empty input field or amount bigger than 399 or smaller than 2000
      if (parseInt($("#input-financeAmount").val()) > 399 && parseInt($("#input-financeAmount").val()) < 2001) {

        $("input#update_financeAmount").css("background", "#323470");
        var amountBorrowed = $('#input-financeAmount').val();
        var monthlyBreakdown = $('#monthPick_slider').slider('value');
        var totalRepayment = (amountBorrowed / monthlyBreakdown).toFixed(2);
        $('#financeAmount').text('£' + amountBorrowed);
        $('#monthly_repayments').text('£' + totalRepayment);
      }
    });
    //if "ENTER" hit force above click event    
    $("#input-financeAmount").keydown(function(event) {
      if (event.keyCode == 13) {
        $("#update_financeAmount").click();
        //Prevent from submitting the form by pressing "ENTER"
        $("form").submit(function() {
          return false;
        });
      }
    });
    //Monthly Range Slider    
    $("#monthPick_slider").slider({
      range: 'min',
      min: 3,
      max: 18,
      value: 12,
      slide: function(event, ui) {
        var curValue = ui.value;
        var tooltip_Date = '<div class="tooltip_Date"><div class="tooltip_Date-inner">' + curValue + ' months</div><div class="tooltip_Date-arrow"></div></div>';
        $(this).find('.ui-slider-handle').html(tooltip_Date);
        $("#number_repayments").html(curValue);
      },
      create: function(event, ui) {
        var curValue = ui.value || 12;
        var tooltip_Date = '<div class="tooltip_Date"><div class="tooltip_Date-inner">' + curValue + ' months</div><div class="tooltip_Date-arrow"></div></div>';
        $(this).find('.ui-slider-handle').html(tooltip_Date);
        $("#number_repayments").html(curValue);
      }
    });
    //Re-calculate on change   
    $('#monthPick_slider').slider().on({
      slidechange: function() {
        //Validation | Empty input field or amount bigger than 399 or smaller than 2000
        if (parseInt($("#input-financeAmount").val()) > 399 && parseInt($("#input-financeAmount").val()) < 2001) {
          var amountBorrowed = $('#input-financeAmount').val();
          var monthlyBreakdown = $('#monthPick_slider').slider('value');
          var totalRepayment = (amountBorrowed / monthlyBreakdown).toFixed(2);
          $('#monthly_repayments').text('£' + totalRepayment);
          $("#update_financeAmount").click();
        }
      }
    });

  });
})(jQuery);

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.