Creating your own custom calculator is a pretty big task. You might see if there is a jQuery plugin out there that might simplify the process for you.
Here are some basic primer notes to help you get started.
in5 uses a JavaScript library called jQuery, which can make the code simpler for you to write.
Your JavaScript should run once the body of the page is ready (so that elements on the page are available for you to target).
With jQuery, this is done using the Ready function.
I like the shorthand version:
$(function(){
//code goes here and runs when the document is ready
}For items like the inputs in a calculator, you want to "listen" for events, like change (or a wait for a button to be pressed if you prefer), then run code based on the value inside the input. With jQuery you can listen for multiple events by adding a space between the names of the events, e.g.,
$(function(){
$('input#id-of-input').on('change keyup paste click',function(e){
var value = $(this).val();
//do something with value, e.g., recalculate(value); etc
}
});To use the input values as numbers, you'll also want to convert them from strings (text) to actual numbers (e.g., using the parseFloat function).
If you want to see a practical examples of jQuery, check out these two courses that I did for Lynda (Linkedin Learning):
Hope that helps!
