ckportfolio.com - Basic Calculator: jQuery

Basic Calculator: jQuery

jQuery

Now that HTML and CSS components are in place, we can move onto making these elements interactive via jQuery. Ensure that jQuery is selected in "Frameworks & Extensions," and write the following statement in JavaScript pane:

$(".num, .op").click(insert);
$("#delete").click(del);
$("#process").click(process);

As you can immediately recognize, each of these three jQuery statement consists of dollar sign ($), selector ("#content"), and a specific function. You can also see that anonymous functions between the two parentheses have been replaced with simple names as well. These names refer to the name of function that should have been previously identified. To translate these three statements into plain English:

  • Upon clicking buttons with class name "num" or "op," launch a function named "insert."
  • Upon clicking "#delete" element, launch a function named "del."
  • Upon clicking "#process" element, launch a function named "process."

Your code will not work at this point, because we have not defined the three functions (insert, del, and process) that these jQuery commands are referring to. Above these statements, establish the three functions and place a very simple command within each. To write a simple function, refer to the following format:

function functionname(){
    // Place the task you would like the code to perform
    alert("Insert!");
};

Based on the above format, we can move onto establishing relevant functions: 

function insert(){
    alert("Insert!");
};

function del(){
    alert("Delete");
};

function process(){
    alert("Process");
};

At this point, you should be able to see three different messages based on button clicks.

Screencast Recording

https://www.dropbox.com/scl/fi/iml83nh9vf8c7lo78bv4v/Page-3.mov?rlkey=t16a27cm6kk0jg1s8dsk9tq88&dl=0

Fin