ckportfolio.com - Basic Calculator: jQuery Pt. 2

Basic Calculator: jQuery Pt. 2

jQuery - Part 2

Once you can confirm that the three functions load successfully, we can proceed with populating these functions with relevant tasks.

Upon launching "Insert," we want to place the clicked number or operator into the display pane. First we want to declare a variable (container of information) based on the current display screen content. Upon manipulating this variable, we will push it back to where it came from: display pane. To declare a variable, refer to the following format:

var variablename = "value"
var variablename = 5

Please note that text element will need to be wrapped in quotation marks, while numbers do not require them. Based on this format, let us declare a variable:

var resultOld = $("#display").val();

Instead of declaring a variable based on a static value, we are referring to the current content of the display element (which should be empty at first). Using this value and the button that has just been clicked, we want to declare another variable.

var resultNew = resultOld + $(this).html();

Our new variable is a combination of the previously declared variable "resultOld" and content of the clicked button (ex. 1, 2, 3). To verify your newly generated variable, Let us insert it back into the display screen:

function insert(){
    var resultOld = $("#display").val();
    var resultNew = resultOld + $(this).html();
    $("#display").val(resultNew);
};

Upon pressing number or operator buttons, you will see that your display pane populates with relevant characters.

For "delete" function to work, we need to reverse engineer our "insert" function -- and take away the last character in the display pane. As JavaScript does not offer a native function that allows us to do so, we need to take the following steps:

  • Declare a variable based on the display pane
  • Identify the length of the new variable
  • Declare a new variable that takes all characters from the old variable -- except the last one
  • Place the new variable into the display pane
var resultOld = $("#display").val();

We can identify the length of the variable by attaching ".length" at the end of the variable:

var resultLength = resultOld.length;

We can now declare a variable that extracts a part of another variable, via "substring":

var resultNew = resultOld.substring(0, resultLength - 1);

Note that this substring takes two "parameters": where the extraction should begin (zero as the very beginning), and where it should end (one character away from the last position). You can now push this back into the display pane:

function del(){
    var resultOld = $("#display").val();
    var resultLength = resultOld.length;
    var resultNew = resultOld.substring(0, resultLength - 1);
    $("#display").val(resultNew);
};

You should be able to verify that "delete" button erases the last character at this point.

Screencast Recording

https://www.dropbox.com/scl/fi/o88zakpp04x2kwxzd1s6g/Page-4.mov?rlkey=tagh9h7hxia59a1wzl942o2am&dl=0

Fin